/* ================= Каталог DBA + ACL — светла тема ================= */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Сайтът се показва само в светла гама. Няма собствена тъмна тема, а
     автоматичното потъмняване на браузъра обръщаше и белите полета около
     стоката — стоката излизаше залепена върху сива или черна дъска.
     „only light“ казва на браузъра да не пипа цветовете. */
  color-scheme: only light;
  --page:#f2f4f7;      /* фон на страницата */
  --surf:#ffffff;      /* карти и панели */
  --surf2:#f7f8fa;     /* вторична повърхност */
  --line:#dfe3e9;      /* граници */
  --line2:#eceff3;     /* по-леки граници */
  --ink:#11151c;       /* основен текст */
  --ink2:#3d4655;      /* вторичен текст */
  --mut:#6b7585;       /* приглушен текст */
  --acc:#BA2C29;       /* фирменото червено на Аутофикс Партс */
  --acc-d:#96211F;
  --acc-soft:#fbeceb;
  --dba:#c8791a;
  --dba-soft:#fdf3e4;
  --acl:#1256a8;
  --acl-soft:#e9f1fb;
  --ok:#127c3f;
  --ok-soft:#e7f5ec;
  --r:8px;             /* радиус */
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-l:0 4px 14px rgba(16,24,40,.08);
}
html{-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--ink);
  font:400 17px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
/* Страницата никога не бива да се плъзга настрани. Широките неща (таблици,
   ленти с марки) си имат собствено плъзгане в кутия; ако някъде излезе нещо
   по-широко, то се отрязва, вместо да размести цялата страница и шапката.
   clip, а не hidden — hidden убива position:sticky на шапката. */
@supports (overflow-x: clip) { body { overflow-x: clip } }
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
b,strong{font-weight:700}

/* ---------- зареждане ---------- */
/* Въртележката стои вътре в страницата, а не върху нея: шапката, менюто и
   търсачката се виждат и работят още докато каталогът се тегли. */
#boot{display:grid;place-content:center;gap:16px;justify-items:center;text-align:center;padding:72px 24px;min-height:38vh}
#boot .ring{width:44px;height:44px;border:4px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#boot p{color:var(--mut);font-size:15px}

/* ---------- шапка ----------
   min-width:100% е нарочно. Ако някой ред вътре стане по-широк от екрана,
   шапката се свива по съдържанието си и бялото ѝ свършва по-рано от картите
   отдолу — отстрани се показва парче от долната карта и лентата изглежда
   изместена. Така фонът стига до края, каквото и да се случи вътре. */
header{position:sticky;top:0;z-index:40;background:var(--surf);
  border-bottom:1px solid var(--line);width:100%;min-width:100%;box-sizing:border-box}
.hin{max-width:1360px;margin:0 auto;padding:12px 22px;display:flex;gap:16px;
  align-items:center;box-sizing:border-box}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.2px;white-space:nowrap;color:var(--ink)}
.logo img{height:48px;width:auto;display:block}
.logo .b-dba{background:var(--dba)}
.logo .b-acl{background:var(--acl);margin-left:-5px}
.logo small{display:block;font-size:10px;font-weight:700;color:var(--mut);letter-spacing:1.5px;padding-left:14px;margin-left:4px;border-left:1px solid var(--line);line-height:1.35;max-width:130px;white-space:normal}
@media(max-width:1180px){.logo small{display:none}}
@media(max-width:700px){.logo img{height:38px}}
.sbox{flex:1 1 220px;display:flex;gap:8px;max-width:620px;min-width:0;margin-left:auto}
.search{flex:1;min-width:0;background:var(--surf);border:1.5px solid var(--line);color:var(--ink);border-radius:var(--r);padding:12px 16px;font:inherit;font-size:16px;outline:none;transition:border-color .12s,box-shadow .12s}
.search::placeholder{color:var(--mut)}
.search:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.search.sm{max-width:400px;margin:6px 0 16px}
.iconbtn{background:var(--acc);border:0;color:#fff;font:inherit;font-weight:700;border-radius:var(--r);padding:0 22px;cursor:pointer;font-size:16px;transition:background .12s}
.iconbtn:hover{background:var(--acc-d)}

/* ---------- скелет ---------- */
#main{max-width:1360px;margin:0 auto;padding:28px 24px 96px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:26px;margin:22px 0;box-shadow:var(--shadow)}
.card h2{font-size:21px;font-weight:700;letter-spacing:-.2px;margin-bottom:18px}
.ttl{font-size:34px;font-weight:800;line-height:1.12;letter-spacing:-.8px;margin:4px 0 6px}
.muted{color:var(--mut);font-size:15px;margin-bottom:18px}
.hint{color:var(--mut);font-size:15px;padding:10px 0}
.lead{color:var(--ink2);font-size:17px;margin-bottom:20px}
.kicker{color:var(--acc);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.cardhead h1,.cardhead h2{margin:0}

.crumbs{font-size:14px;color:var(--mut);display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.crumbs a:hover{color:var(--acc)}
.crumbs .sep{opacity:.45}

/* ---------- начало ---------- */
.hero{border-radius:var(--r);padding:52px 40px;background:var(--surf);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero h1{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-1.4px;margin:14px 0}
.hero .sub{color:var(--ink2);max-width:660px;font-size:17px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.stat{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:28px;font-weight:800;letter-spacing:-.6px}
.stat span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:1.1px;font-weight:600}

/* ---------- полета ---------- */
.selrow{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px}
.sel{background:var(--surf);border:1.5px solid var(--line);color:var(--ink);padding:12px 16px;border-radius:var(--r);font:inherit;font-size:15px;outline:none;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:42px}
.sel:disabled{opacity:.45;cursor:not-allowed}
.sel:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.sel.sm{padding:10px 14px;padding-right:38px;font-size:14px}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.btn{background:var(--acc);border:0;color:#fff;font:inherit;font-weight:700;padding:12px 26px;border-radius:var(--r);cursor:pointer;font-size:16px;transition:background .12s}
.btn:hover{background:var(--acc-d)}
.btn.ghost{display:block;margin:22px auto 0;background:var(--surf);border:1.5px solid var(--line);color:var(--ink);font-weight:600}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);background:var(--surf)}
.btn.ghost.sm{margin:16px auto 6px;padding:10px 22px;font-size:15px}

/* ---------- решетки ---------- */
.grid-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.mcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:border-color .12s,box-shadow .12s}
.mcard:hover{border-color:var(--acc);box-shadow:var(--shadow-l)}
.mcard b{display:block;font-size:16px;font-weight:700}
.mcard span{font-size:13px;color:var(--mut)}

.grid-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .12s,box-shadow .12s}
.gcard:hover{border-color:var(--acc);box-shadow:var(--shadow-l)}
.gcard b{display:block;font-size:17px;font-weight:700;margin:8px 0 4px}
.gcard span{font-size:13px;color:var(--mut)}

.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin-bottom:8px}
.pcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.pcard:hover{border-color:var(--acc);box-shadow:var(--shadow-l)}
/* Плочката приема ръста на самата снимка — както на продуктовата страница.
   Така снимката я запълва по цялата ширина, нищо не се реже, нищо не се
   уголемява и не остава фон, който тъмната тема да почерни. */
.pimg{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;
  background:#fff;padding:0;overflow:hidden;display:block}
/* .pimg е ту самата снимка, ту обвивка около нея — важи и за двете. */
.pimg > img{width:100%;height:auto;display:block}
.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:1px solid var(--line2)}
.pcode{font-weight:800;font-size:17px;letter-spacing:-.2px;display:flex;align-items:center;gap:8px}
.pname{font-size:14px;color:var(--mut);line-height:1.45;flex:1}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:12px;background:var(--surf2);border:1px solid var(--line);color:var(--ink2);padding:3px 9px;border-radius:20px;white-space:nowrap}
.tag.alt{background:var(--acc-soft);border-color:#f5c6c9;color:var(--acc-d);font-weight:600}
.tag.ok{background:var(--ok-soft);border-color:#bfe3cd;color:var(--ok);font-weight:600}
.price{margin-top:10px;display:flex;flex-direction:column;gap:1px}
.price b{font-size:21px;font-weight:800;letter-spacing:-.4px}
.price span{font-size:12px;color:var(--mut)}

/* ---------- заглавия на групи ---------- */
.gh{font-size:14px;margin:30px 0 14px;display:flex;align-items:center;gap:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;color:var(--ink)}
.gh span{background:var(--surf2);border:1px solid var(--line);color:var(--mut);font-size:12px;padding:2px 9px;border-radius:20px;letter-spacing:0;font-weight:700}

/* ---------- доставчици ---------- */
.btabs{display:inline-flex;background:var(--surf2);border:1px solid var(--line);border-radius:var(--r);padding:4px;gap:3px}
.btab{background:transparent;border:0;color:var(--ink2);font:inherit;font-size:14px;font-weight:700;padding:9px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;transition:.12s}
.btab span{font-size:11px;font-weight:500;color:var(--mut)}
.btab i{font-style:normal;font-size:12px;font-weight:700;background:var(--line2);padding:1px 8px;border-radius:20px}
.btab:hover{color:var(--ink)}
.btab.on{background:var(--ink);color:#fff}
.btab.on span{color:rgba(255,255,255,.7)}
.btab.on i{background:rgba(255,255,255,.18);color:#fff}
.btab.empty{opacity:.4;cursor:not-allowed}
.btab.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.btag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.7px;padding:3px 7px;border-radius:4px;vertical-align:middle}
.btag.b0{background:var(--dba-soft);color:var(--dba);border:1px solid #f0dcbd}
.btag.b1{background:var(--acl-soft);color:var(--acl);border:1px solid #cadff5}
.btags{margin-top:8px;display:flex;gap:5px}

/* ---------- лента с категории ---------- */
.grpnav{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:8px 0 6px;box-shadow:var(--shadow)}
.grpsum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--ink2);margin-bottom:14px;font-weight:600}
.grpsum i{color:var(--mut);font-style:normal;opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.grpnav .chips{margin-top:0}
.chip{background:var(--surf);border:1.5px solid var(--line);border-radius:20px;padding:7px 15px;font-size:14px;font-weight:600;color:var(--ink2);transition:.12s;cursor:pointer}
button.chip{font:inherit;font-weight:600}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.chip b{color:var(--mut);font-weight:800;margin-left:5px}
.chip:hover b{color:inherit}
.chip.b0{border-color:#f0dcbd}
.chip.b0:hover{border-color:var(--dba);color:var(--dba)}
.chip.b1{border-color:#cadff5}
.chip.b1:hover{border-color:var(--acl);color:var(--acl)}

/* Каросериите на един модел, прибрани зад „+5“ — виж chasti-za-index.js.
   details/summary се държи като още един чип в същия ред; когато се отвори,
   подчиповете минават на нов ред под него. */
.mgrp{display:contents}
.mchip{list-style:none;color:var(--mut);border-style:dashed}
.mchip::-webkit-details-marker{display:none}
.mgrp[open] .mchip{border-style:solid;border-color:var(--acc);color:var(--acc)}
.msub{display:none;flex-basis:100%;flex-wrap:wrap;gap:8px;padding:2px 0 2px 14px;
      border-left:2px solid var(--line);margin:2px 0 4px}
.mgrp[open] .msub{display:flex}

.supnote{display:flex;gap:12px;align-items:flex-start;background:var(--acl-soft);border:1px solid #cadff5;border-radius:var(--r);padding:14px 18px;margin:0 0 18px;font-size:15px;color:var(--ink2);line-height:1.5}
.supnote .btag{margin-top:2px;flex:0 0 auto}

/* ---------- двигатели ---------- */
.engrow{display:grid;grid-template-columns:1fr auto;gap:12px}

/* ---------- наличност ---------- */
.stock{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink2);background:var(--ok-soft);border:1px solid #bfe3cd;border-radius:var(--r);padding:12px 16px;margin-bottom:18px}
.stock b{color:var(--ink)}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.dot.g{background:var(--ok)}
.dot.r{background:var(--mut)}

/* ---------- цена ---------- */
.pricebox{background:var(--surf2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:20px}
.pmain{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.pmain b{font-size:36px;font-weight:800;letter-spacing:-1.2px;color:var(--ink)}
.pmain span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:1.1px;font-weight:700}
.prows{display:grid;grid-template-columns:1fr auto;font-size:15px}
.prows dt{color:var(--mut);padding:7px 0;border-top:1px solid var(--line)}
.prows dd{padding:7px 0;border-top:1px solid var(--line);text-align:right;font-weight:600}
.pnote{border-top:1px solid var(--line);padding-top:13px;margin-top:4px;font-size:14px;color:var(--mut)}

/* ---------- страница на артикул ---------- */
.detail{display:grid;grid-template-columns:440px 1fr;gap:36px;margin-top:16px;align-items:start}
.dimg{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  align-self:start;box-shadow:var(--shadow);line-height:0}
.dimg img{width:100%;height:auto;display:block}
.specs{display:grid;grid-template-columns:210px 1fr;font-size:15.5px;margin-top:10px}
.specs dt{color:var(--mut);padding:11px 0;border-top:1px solid var(--line)}
.specs dd{padding:11px 0;border-top:1px solid var(--line);font-weight:600}
.rich{color:var(--ink2);font-size:16px}
.rich h1{font-size:21px;color:var(--ink);margin:6px 0 14px;font-weight:700}
.rich h2{font-size:17px;color:var(--ink);margin:22px 0 9px;font-weight:700}
.rich p{margin:11px 0}
.rich ul{margin:11px 0 11px 22px}
.rich li{margin:5px 0}
.rich img{border-radius:6px;margin:14px 0}
.rich table{border-collapse:collapse;width:100%}
.rich td,.rich th{padding:8px 10px;border:1px solid var(--line);vertical-align:top}

.gal{display:flex;gap:9px;padding:12px;overflow-x:auto;border-top:1px solid var(--line)}
.gthumb{flex:0 0 64px;width:64px;height:64px;border-radius:6px;overflow:hidden;border:2px solid var(--line);background:#fff;padding:0;cursor:pointer}
.gthumb.on{border-color:var(--acc)}
.gthumb img{width:100%;height:100%;object-fit:contain}

/* ---------- таблица ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:760px;background:var(--surf)}
.tbl th{text-align:left;background:var(--surf2);padding:13px 15px;color:var(--mut);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.7px;position:sticky;top:0}
.tbl td{padding:14px 15px;border-top:1px solid var(--line2)}
.tbl tbody tr:hover{background:var(--surf2)}
.tbl a{color:var(--acc);font-weight:600}

/* ---------- падащ списък с търсене ---------- */
.combo{position:relative}
.combo .cbi{width:100%;padding-right:38px}
.combo.off .cbi{opacity:.5;cursor:not-allowed;background:var(--surf2)}
.cbclear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;display:none}
.combo.has .cbclear{display:block}
.cbclear:hover{color:var(--acc)}
.cblist{display:none;position:absolute;z-index:50;top:calc(100% + 6px);left:0;right:0;max-height:340px;overflow-y:auto;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(16,24,40,.16)}
.cblist.open{display:block}
.cbitem{padding:11px 16px;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:1px solid var(--line2)}
.cbitem:last-child{border-bottom:0}
.cbitem .cbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbitem .cbc{font-size:12.5px;color:var(--mut);white-space:nowrap;flex:0 0 auto}
.cbitem b{color:var(--acc);font-weight:800}
.cbitem:hover,.cbitem.hi{background:var(--surf2)}
.cbempty{padding:13px 16px;font-size:14px;color:var(--mut)}

footer{border-top:1px solid var(--line);padding:30px 24px;text-align:center;color:var(--mut);font-size:13.5px;background:var(--surf)}
footer a{color:var(--ink2)}

body.seo #main{display:block}
body.seo .sbox form{width:100%}

/* ---------- мобилно ---------- */
@media(max-width:900px){
  body{font-size:16px}
  .hin{flex-wrap:wrap;padding:12px 16px;gap:12px}
  .sbox{max-width:none;width:100%;order:3;margin-left:0}
  #main{padding:20px 16px 72px}
  .hero{padding:32px 22px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .selrow{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr;gap:22px}
  .specs{grid-template-columns:1fr}
  .specs dt{padding-bottom:0;border-top:1px solid var(--line)}
  .specs dd{padding-top:3px;border-top:0}
  .grid-p{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card{padding:20px 16px}
  .ttl{font-size:27px}
  .cardhead{gap:12px}
  .btabs{width:100%;justify-content:space-between}
  .btab{flex:1;justify-content:center;padding:9px 8px}
  .btab span{display:none}
}

/* ================= кошница ================= */
.cartbtn{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--line);border-radius:var(--r);color:var(--ink);flex:0 0 auto;transition:.12s}
.cartbtn:hover{border-color:var(--acc);color:var(--acc)}
.cartbtn i{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:11px;background:var(--mut);color:#fff;font:700 11px/21px Inter,sans-serif;font-style:normal;text-align:center;padding:0 5px}
.cartbtn.full i{background:var(--acc)}

.addbtn{margin-top:12px;width:100%;background:var(--ink);color:#fff;border:0;border-radius:6px;padding:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .12s}
.addbtn:hover{background:var(--acc)}
.addbtn.big{margin-top:16px;padding:14px;font-size:16px;background:var(--acc)}
.addbtn.big:hover{background:var(--acc-d)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:14px 20px;border-radius:var(--r);display:flex;gap:16px;align-items:center;font-size:15px;z-index:80;box-shadow:0 10px 30px rgba(16,24,40,.28);transition:transform .25s}
.toast.on{transform:translate(-50%,0)}
.toast a{color:#ffb3b7;font-weight:700}

.cartwrap{display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:start;margin-top:8px}
.cartlist{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.cline{display:grid;grid-template-columns:26px 78px 1fr auto auto 34px;gap:16px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line2)}
.cline:last-child{border-bottom:0}
.cthumb{width:78px;height:78px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:6px;padding:6px}
.ccode{font-weight:800;font-size:16px}
.ccode:hover{color:var(--acc)}
.cname{font-size:13.5px;color:var(--mut);line-height:1.4}
.cunit{font-size:13px;color:var(--mut);margin-top:3px}
.cqty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:6px;overflow:hidden}
.cqty button{width:34px;height:36px;border:0;background:var(--surf2);font-size:18px;cursor:pointer;color:var(--ink)}
.cqty button:hover{background:var(--line2)}
.cqty span{min-width:38px;text-align:center;font-weight:700}
.cline-sum{font-weight:800;font-size:17px;min-width:96px;text-align:right}
.crm{border:0;background:transparent;color:var(--mut);font-size:22px;cursor:pointer;line-height:1}
.crm:hover{color:var(--acc)}

.cartside .card{margin:0}
.ctotal{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin-top:12px;padding-top:14px;font-size:15px;color:var(--mut)}
.ctotal b{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.6px}

.cform{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.cform h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.radios{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.cform .radios label{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;border:1.5px solid var(--line);border-radius:6px;padding:12px 15px}
.cform .radios label:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.cform .radios label b{margin-left:auto;font-weight:800}
.cform .radios input{accent-color:var(--acc);width:18px;height:18px;margin:0;flex:0 0 auto}
.frow{margin-bottom:13px}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform label{display:block;font-size:13px;font-weight:700;color:var(--ink2)}
.cform input,.cform textarea{width:100%;margin-top:5px;border:1.5px solid var(--line);border-radius:6px;padding:11px 13px;font:inherit;font-size:15px;font-weight:400;color:var(--ink);background:var(--surf);outline:none}
.cform input:focus,.cform textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.paynote{font-size:14px;color:var(--ink2);background:var(--surf2);border:1px solid var(--line);border-radius:6px;padding:11px 14px;margin:6px 0 14px}
.btn.wide{width:100%;padding:15px;font-size:17px}
.finenote{font-size:12.5px;color:var(--mut);margin-top:11px;line-height:1.45}
.cform.login{margin-top:0;border-top:0;padding-top:0}
.formerr{margin-top:11px;color:var(--acc-d);font-size:14px;font-weight:600}

.done{text-align:center;padding:52px 26px}
.done .doneicon{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:32px;line-height:62px;font-weight:800}
.done .btn.ghost{display:inline-block;margin-top:20px}

@media(max-width:900px){
  .cartwrap{grid-template-columns:1fr}
  /* Редът в количката на телефон: отметка, снимка и текст на първия ред,
     количество и сума на втория. Преди колонките бяха три за шест клетки и
     дългите наименования избутваха реда извън екрана — оттам идваше
     плъзгането наляво-надясно. */
  .cline{position:relative;grid-template-columns:22px 60px minmax(0,1fr);
    column-gap:10px;row-gap:10px;padding:14px 14px;align-items:start}
  .cthumb{width:60px;height:60px}
  .cpick{grid-column:1;grid-row:1;padding-top:4px}
  .cline>img.cthumb{grid-column:2;grid-row:1}
  .cinfo{grid-column:3;grid-row:1;min-width:0;padding-right:24px}
  .cinfo .ccode{font-size:15px;overflow-wrap:anywhere}
  .cinfo .cname{overflow-wrap:anywhere}
  .cqty{grid-column:2 / span 1;grid-row:2;justify-self:start}
  .cline-sum{grid-column:3;grid-row:2;min-width:0;text-align:right;align-self:center}
  .crm{position:absolute;top:8px;right:10px;font-size:24px;padding:2px 4px}
  .frow.two{grid-template-columns:1fr}
  .cartbtn{width:44px;height:44px}
}

/* избор на офис в кошницата */
.offslot{display:block;margin-top:5px}
.offslot .combo .cbi{font-weight:400}
.offslot .cblist{max-height:300px}

/* ================= меню с категории ================= */
#catnav{background:var(--ink);position:sticky;top:75px;z-index:35}
.catnav-in{max-width:1360px;margin:0 auto;padding:0 24px;display:flex;gap:2px;align-items:stretch}
@media(max-width:760px){.catnav-in{overflow-x:auto;padding:0 12px}.cattop{padding:12px 14px;font-size:14px;white-space:nowrap}.bycar{margin-left:8px;padding:0 14px;white-space:nowrap}}
.catgroup{position:relative}
.cattop{display:block;color:#fff;font-weight:700;font-size:15px;padding:14px 20px;transition:background .12s}
.catgroup:hover .cattop{background:rgba(255,255,255,.1)}
.bycar{margin-left:auto;display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;
  font-size:14.5px;padding:0 20px;background:var(--acc);transition:background .12s}
.bycar:hover{background:var(--acc-d);color:#fff}
.cattop.on{background:rgba(255,255,255,.14)}
.catsub{display:none;position:absolute;top:100%;left:0;min-width:290px;background:var(--surf);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);box-shadow:0 14px 34px rgba(16,24,40,.18);padding:8px;z-index:36}
.catgroup:hover .catsub{display:block}
.catsub a{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 14px;font-size:15px;border-radius:6px;color:var(--ink)}
.catsub a:hover{background:var(--surf2);color:var(--acc)}
.catsub a span{font-size:12.5px;color:var(--mut);font-weight:700}
@media(max-width:900px){
  #catnav{top:auto;position:static}
  .catnav-in{overflow-x:auto;padding:0 12px}
  .cattop{padding:12px 14px;font-size:14px;white-space:nowrap}
  .catsub{display:none!important}
}

/* ---------- гост / дилър ---------- */
.btn.b2b{background:var(--acc);color:#000;border:0;font-weight:800;font-size:14px;
  letter-spacing:.4px;text-transform:uppercase;padding:11px 18px;border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn.b2b:hover{background:var(--acc-d);color:#000}
.afuser{display:flex;align-items:center;margin-left:6px;flex:0 0 auto}

.mynote{display:block;font-size:11.5px;font-weight:800;color:var(--ok);letter-spacing:.3px;
  text-transform:uppercase;margin-top:3px}
.mynote em{font-style:normal;font-weight:600;color:var(--mut);text-transform:none;
  letter-spacing:0;margin-left:9px;font-size:12px}
.mynote s{margin-left:4px}
.price.mine b,.pricebox.mine .pmain b{color:var(--ok)}
.pricebox.mine{border-color:#bfe3cd;background:var(--ok-soft)}
@media(max-width:760px){.whoami{display:none}.btn.b2b{background:var(--acc);color:#000;border:0;font-weight:800;font-size:14px;
  letter-spacing:.4px;text-transform:uppercase;padding:11px 18px;border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn.b2b:hover{background:var(--acc-d);color:#000}
.afuser{margin-left:8px}}

/* ---------- резултати от търсене (по образец на портала) ---------- */
.tbl .r{text-align:right;white-space:nowrap}
.tbl .mut{color:var(--mut)}
.tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:14.5px}
.tbl .mono a{color:var(--acc);text-decoration:none}
.tbl .mono a:hover{text-decoration:underline}
.tbl tr.instock{background:var(--ok-soft)}
.tbl .now{color:var(--ok);font-weight:700}
.src{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;
  background:var(--surf2);border:1px solid var(--line);color:var(--ink2)}
.src.ok{background:var(--ok-soft);border-color:#bfe3cd;color:var(--ok)}
.src.s-dba{background:#fdf2e5;border-color:#e8c79a;color:var(--dba)}
.src.s-acl{background:#e8f0fb;border-color:#a9c6ea;color:var(--acl)}
.dsep{display:inline-block;width:1px;height:15px;background:#bfe3cd;margin:0 4px}

/* ---------- странична лента с филтри ---------- */
.withside{display:grid;grid-template-columns:262px minmax(0,1fr);gap:26px;align-items:start;margin:18px 0}
.side{position:sticky;top:78px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 16px 4px;
  max-height:calc(100vh - 96px);display:flex;flex-direction:column}
/* Лентата с филтрите си има свой скрол — иначе трябва да превъртиш цялата
   страница, за да стигнеш до последната група. */
.sidescroll{overflow-y:auto;overscroll-behavior:contain;padding-right:4px;margin-right:-4px;
  flex:1;min-height:0}
.sidescroll::-webkit-scrollbar{width:8px}
.sidescroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.sidescroll::-webkit-scrollbar-thumb:hover{background:var(--mut)}
.sideh{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mut);margin-bottom:13px}
.side .filters{display:block;margin:0}
.side .frow{margin-bottom:13px}
.side .fl{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:5px}
.side .sel{width:100%}
.sidecats .grpnav{background:none;border:0;padding:0;margin:4px 0 0}
.sidecats .grpsum{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:12px;padding-top:13px;border-top:1px solid var(--line);font-size:13px}
.sidecats .grpsum i{display:none}
.sidecats .chips{flex-direction:column;align-items:stretch;gap:7px}
.sidecats .chip{text-align:left;justify-content:space-between;display:flex}
.sidemain{min-width:0}
@media(max-width:900px){
  .withside{grid-template-columns:1fr;gap:16px}
  .side{position:static}
  .side .filters{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .sidecats .chips{flex-direction:row;flex-wrap:wrap}
}

/* ---------- бутони за действие в реда ---------- */
.tbl .c{text-align:center}
.acts{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.ab{width:34px;height:34px;border-radius:7px;border:1.5px solid var(--line);background:var(--surf);
  font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;text-decoration:none;transition:border-color .12s,background .12s}
.ab:hover{border-color:var(--acc)}
.ab.cart{background:var(--acc);border-color:var(--acc)}
.ab.cart:hover{background:var(--acc-d);border-color:var(--acc-d)}
.ab.fav.on{background:var(--acc-soft);border-color:var(--acc)}
.ab.off{border-color:#e8c79a}
.ab.pm{border-color:#f0c674}
.ab.cfdone,.btn.buy.cfdone{background:var(--ok);border-color:var(--ok);color:#fff}
.ab:disabled{opacity:.45;cursor:not-allowed}
/* Иконките под картата в каталога — по-дребни от тези в таблицата, за да не
   спорят с бутона „Добави“. */
.cardacts{display:flex;gap:6px;margin-top:8px}
.cardacts .ab{width:30px;height:30px;font-size:14px}
@media(max-width:760px){.acts{gap:4px}.ab{width:30px;height:30px;font-size:14px}}

.aftoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:400;
  background:var(--ink);color:#fff;font-size:14.5px;font-weight:600;padding:13px 22px;
  border-radius:9px;box-shadow:0 8px 26px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;max-width:88vw;text-align:center}
.aftoast.on{opacity:1;transform:translate(-50%,0)}
.aftoast.bad{background:var(--acc-d)}

/* ---------- чакане при доставчиците ---------- */
.card.waiting{text-align:center;padding:46px 26px}
.card.waiting h2{margin:18px 0 6px;font-size:19px}
.card.waiting p{margin:0}
.bigspin{width:46px;height:46px;margin:0 auto;border:4px solid var(--acc-soft);
  border-top-color:var(--acc);border-radius:50%;animation:spin .85s linear infinite}
.iconbtn.af-searching{opacity:.75;pointer-events:none}

/* ---------- избор по автомобил, вертикално и номерирано ---------- */
.carfinder{display:flex;flex-direction:column;gap:12px;max-width:520px}
.cfstep{display:flex;align-items:stretch;gap:0;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--surf);position:relative}
.cfstep:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.cfnum{flex:0 0 52px;display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:15px;color:var(--mut);background:var(--surf2);border-right:1px solid var(--line);
  border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px)}
.cfstep .combo{flex:1;min-width:0}
.cfstep .combo .cbi{border:0;border-radius:0;width:100%;box-shadow:none;background:var(--surf);padding:14px 38px 14px 15px;font-size:15.5px}
.cfstep .combo .cbi:focus{box-shadow:none}
.cfstep .cblist{left:-53px;right:0}
.cfstep.cfdone .cfnum{background:var(--acc);color:#fff;border-right-color:var(--acc)}
.cfstep{padding:0}
.carfinder .btn.wide{width:100%;margin-top:4px}
.cfhelp{display:block;text-align:center;font-weight:700;font-size:14px;color:var(--acc);margin-top:2px}
.cfhelp:hover{text-decoration:underline}
@media(max-width:600px){.cfnum{flex-basis:44px}}

/* ---------- ред за поръчка в картата на артикул ---------- */
.buyrow{display:flex;gap:8px;align-items:stretch;margin:6px 0 20px;flex-wrap:wrap}
.qty{width:74px;text-align:center;border:1.5px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:16px;padding:12px 8px;background:var(--surf);color:var(--ink)}
.btn.buy{flex:1;min-width:210px;padding:13px 24px;font-size:16px}
.buyrow .ab{width:48px;height:auto;font-size:18px}
@media(max-width:560px){.btn.buy{min-width:100%;order:-1}.buyrow .ab{flex:1}}

/* цената примигва, защото страницата идва от кеша с клиентската цена —
   докато дилърската се зареди, я показваме приглушено */
/* Докато не знаем неговата цена, клиентската не бива да се чете — иначе
   дилърът вижда чуждо число и после то се сменя пред очите му. Скриваме
   само числото, мястото му остава, за да не подскача страницата. */
.af-wait [data-code]:not(.pxok) b{color:transparent!important;position:relative;
  border-radius:6px;background:linear-gradient(90deg,#eceff3,#f6f7f9,#eceff3);
  background-size:200% 100%;animation:afpx 1.1s ease-in-out infinite}
.af-wait [data-code]:not(.pxok) b *{visibility:hidden}
@keyframes afpx{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.af-wait [data-code]:not(.pxok) b{animation:none}}

/* ---------- модал ---------- */
.afmodal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:500;display:flex;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.afmodal-in{background:var(--surf);border-radius:14px;max-width:520px;width:100%;
  padding:26px 26px 22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.afmodal-in h3{font-size:20px;font-weight:800;margin-bottom:6px}
.afmodal-in>.muted{margin-bottom:18px}
.afmodal-in .pmour{color:var(--acc)}
.afmodal-in .fl{display:block;font-size:14px;font-weight:700;color:var(--ink2);margin:14px 0 6px}
.afmodal-in input[type=file]{font-size:14px}
.afmodal-btns{display:flex;gap:10px;margin-top:22px}
.afmodal-btns .btn{flex:1;margin:0}
.afmodal-btns .btn.ghost{margin:0}
.offer .obody{margin-top:12px}
.offer .cardhead{align-items:baseline}
.tbl tfoot td{padding:11px 14px;border-top:2px solid var(--line)}

/* ---------- кой е влезлият дилър ---------- */
.uwrap{position:relative}
.uchip{display:flex;align-items:center;gap:10px;background:var(--surf);border:1.5px solid var(--line);
  border-radius:99px;padding:5px 14px 5px 5px;cursor:pointer;font:inherit;max-width:280px}
.uchip:hover{border-color:var(--acc)}
.uwrap.open .uchip{border-color:var(--acc);background:var(--acc-soft)}
.uav{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--acc);color:#fff;font-weight:800;font-size:15px}
.uinfo{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.25}
.uinfo b{font-size:13.5px;font-weight:700;color:var(--ink);max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.uinfo em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ok);max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucar{color:var(--mut);font-size:11px}
.umenu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 34px rgba(16,24,40,.18);
  padding:7px;z-index:60}
.uwrap.open .umenu{display:block}
.umenu a{display:block;padding:10px 13px;border-radius:6px;font-size:14.5px;font-weight:600;color:var(--ink)}
.umenu a:hover{background:var(--surf2);color:var(--acc)}
.umsg{font-size:12.5px;color:var(--mut);padding:8px 13px 10px;border-bottom:1px solid var(--line);margin-bottom:5px}
@media(max-width:820px){.uinfo{display:none}.uchip{padding:4px;border-radius:50%}.ucar{display:none}}

/* ---------- колоната „Твоя цена“ ----------
   Две различни колони, с две различни условия — затова са с различни класове.

   `.mycol` е в дилърските таблици на портала (търсене при доставчици). Там
   „твоя цена“ често е ЕДИНСТВЕНАТА цена, значи колоната зависи само от това
   дали човекът е дилър.

   `.dcol` е в публичното търсене. Тя се показва САМО когато наистина има
   отстъпка — тоест когато поне един ред е получил цена, по-ниска от
   клиентската. Дотук висеше на `af-dealer`, а той се слага оптимистично от
   localStorage още преди да се знае кой е човекът: на невлязъл с остатък от
   стара сесия излизаше колона „ТВОЯ ЦЕНА —“ с празно тире. Сега класът
   `af-hasmine` се слага от dealer.js едва след като има истинска разлика в
   цената, значи на гост и на краен клиент без отстъпки колоната изобщо не се
   появява. */
.mycol{display:none}
html.af-dealer .mycol{display:table-cell}
.dcol{display:none}
html.af-hasmine .dcol{display:table-cell}
html.hidemy .tbl .dcol{display:none}
.tbl td.mine b{color:var(--ok);font-size:16.5px}
.tbl tr.hasmine td[data-code]{color:var(--mut)}

/* ── Снимки на артикул (от онлайн магазина) ─────────────────────────────── */
.pgal{margin:18px 0 22px;max-width:380px}
/* Без поле и без наложена квадратна форма: кутията приема ръста на самата
   снимка, така че снимката я запълва изцяло. Иначе отстрани оставаха ивици
   от фона на кутията — при тъмна тема телефонът ги почерняше и стоката
   изглеждаше в рамка. Сега няма какво да се почерни. */
.pgalmain{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.pgalmain img{width:100%;height:auto;display:block}
.pgalthumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:2px}
.pgalt{flex:0 0 auto;width:60px;height:60px;overflow:hidden;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;display:block;padding:0}
/* cover, не contain: миниатюрата се запълва докрай и няма ивици отстрани.
   Снимките на стоката са с широко бяло поле, така че нищо не се реже. */
.pgalt img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pgalt.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(186,44,41,.15)}

/* Описанието идва като HTML от магазина — стягаме го да не разваля страницата */
.card.desc{line-height:1.65}
.card.desc h1,.card.desc h2,.card.desc h3{font-size:1.05rem;margin:16px 0 6px}
.card.desc h2:first-child{margin-top:0}
.card.desc p{margin:0 0 10px}
.card.desc ul,.card.desc ol{margin:0 0 12px 20px}
.card.desc li{margin:3px 0}
.card.desc img{max-width:100%;height:auto;border-radius:10px}
.card.desc table{width:100%;border-collapse:collapse;overflow-x:auto;display:block}
.card.desc td,.card.desc th{border:1px solid var(--line);padding:6px 9px;font-size:.94rem}

/* ── Снимка в таблицата с резултати ─────────────────────────────────────── */
/* Клетката е с фиксиран размер още при рендера, за да не подскача редът,
   когато снимката дойде след това. */
.tbl th.thc{width:44px;padding-left:10px;padding-right:0}
.tbl td.thc{width:44px;padding-left:10px;padding-right:0}
.thb{display:block;width:34px;height:34px;border-radius:7px;background:var(--line2);
  opacity:.45;overflow:hidden}
.thb img{width:100%;height:100%;object-fit:contain;display:block}
.thb.has{opacity:1;border:1px solid var(--line2)}
/* Търсене без нито една снимка — колоната си отива изцяло. */
.tbl.nothumbs th.thc,.tbl.nothumbs td.thc{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Голямата снимка при посочване на миниатюра в резултатите */
.thpop{position:fixed;z-index:80;pointer-events:none;opacity:0;transform:scale(.96);
  transition:opacity .12s ease,transform .12s ease;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;
  box-shadow:0 14px 40px rgba(17,21,28,.22)}
.thpop img{display:block;width:300px;height:300px;object-fit:contain}
.thpop.on{opacity:1;transform:scale(1)}
@media (hover:none){.thpop{display:none}}

/* ── Оферти ─────────────────────────────────────────────────────────────── */
.ofhead{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ofhead .muted{margin-left:auto}
.oftbl td.acts{white-space:nowrap}

/* Изборът на оферта в прозорчето */
.oflist{max-height:280px;overflow-y:auto;margin:12px 0;display:flex;flex-direction:column;gap:6px}
.ofrow{display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ofrow:hover{border-color:var(--acc);background:var(--acc-soft)}
.ofname{display:block;font-weight:650;color:var(--ink)}
.ofmeta{display:block;font-size:.86rem;color:var(--mut);margin-top:2px}
.qtyrow{display:flex;align-items:center;gap:10px;margin:10px 0 4px}
.qtyrow .fl{margin:0}

/* Самата оферта: съдържание вляво, обобщение вдясно — както в Интеркарс */
.ofdetail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.ofside h3{margin:0 0 12px}
.ofside .btn{width:100%;margin-top:8px}
.ofside textarea{margin-top:4px;resize:vertical;font-family:inherit}
.oftotal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.oftotal b{font-size:1.5rem}
.btn.danger{color:var(--acc);border-color:var(--acc)}
.tag.warn{background:#fff6e6;color:#8a5a00}
@media (max-width:900px){.ofdetail{grid-template-columns:1fr}}

/* Отпечатване: остава само офертата */
@media print{
  header,#catnav,footer,.crumbs,.ofside .btn,#ofprint,#ofdel,#ofnotesave,
  .acts,.ab,.aftoast{display:none !important}
  .ofdetail{grid-template-columns:1fr}
  .card{box-shadow:none;border:1px solid #ddd}
  body{background:#fff}
}

/* ── Оферта с две цени: неговата и тази за клиента ──────────────────────── */
.ofbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
  padding:10px 12px;background:var(--surf2);border:1px solid var(--line);border-radius:10px}
.ofbar .fl{margin:0}
.ofbar .qty{width:74px}
.oftbl2 .ofsell{width:96px;text-align:right}
.oftbl2 .ofqty{width:64px}
.oftbl2 td.myc{color:var(--mut)}
.proff{display:none}
.oftotal.small{border-top:0;padding-top:0;margin-top:6px}
.oftotal.small b{font-size:1.05rem}
.oftotal.profit b{color:#1a7f37}
.ofnoteout{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.95rem}
.hint.sm{font-size:.85rem;margin:8px 0 0}
.ofprhead{display:none}

/* Разпечатката е за КЛИЕНТА: неговата цена и всичко служебно отпада. */
@media print{
  header,#catnav,footer,.aftoast,.afmodal,.nopr{display:none !important}
  .ttl,.muted{display:none}
  .ofprhead{display:flex !important;align-items:center;justify-content:space-between;
    gap:20px;margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid #111}
  .ofprhead img{height:40px;width:auto}
  .ofprhead div{text-align:right;font-size:.92rem;line-height:1.5}
  .ofdetail{display:block}
  .card{box-shadow:none;border:0;padding:0}
  .cardhead{margin-bottom:10px}
  .tbl input{display:none}
  .proff{display:inline}
  .tbl th,.tbl td{padding:7px 9px;font-size:.92rem}
  .tbl tfoot b{font-size:1.05rem}
  body{background:#fff}
  a[href]:after{content:none !important}
}

/* ── Адреси за доставка ─────────────────────────────────────────────────── */
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.adcard.isdef{border-color:var(--acc)}
.adacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.adopts{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.adopt{display:block;width:100%;text-align:left;cursor:pointer;background:var(--surf2);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.adopt:hover{border-color:var(--acc);background:var(--acc-soft)}
.adopt b{display:block;font-weight:650;font-size:.94rem}
.adopt span{display:block;font-size:.82rem;color:var(--mut)}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.savechk2{display:flex;align-items:center;gap:8px;margin:12px 0 4px;font-size:.94rem}

/* Изборът на адрес в поръчката */
.addrbook{margin:0 0 14px}
.abttl{font-weight:650;font-size:.92rem;color:var(--mut);margin-bottom:6px}
.abrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.abcard{text-align:left;cursor:pointer;background:var(--surf2);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;font:inherit;color:var(--ink)}
.abcard:hover{border-color:var(--acc)}
.abcard.sel{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 2px rgba(186,44,41,.12)}
.abcard b{display:block;font-size:.92rem}
.abcard b i{font-style:normal;font-weight:500;font-size:.76rem;color:var(--acc)}
.abcard span{display:block;font-size:.82rem;color:var(--mut);margin-top:2px}
.abcard .abph{font-size:.78rem}
.abcard.abnew{display:flex;align-items:center;justify-content:center;color:var(--mut);
  border-style:dashed;font-weight:600}
.savechk{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:.93rem}
@media (max-width:560px){.frow2{grid-template-columns:1fr}}

/* Свитите лични данни: „поръчваш като…“ вместо празна форма всеки път */
.whobox{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--surf2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin:0 0 12px}
.whoin{min-width:0}
.whoin b{display:block;font-size:.95rem}
.whoin span{display:block;font-size:.84rem;color:var(--mut);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whobox .linkbtn{flex:0 0 auto}

.abdef{margin:8px 0 0}
.linkbtn{background:none;border:0;padding:0;color:var(--acc);cursor:pointer;
  font:inherit;font-size:.86rem;text-decoration:underline}
.linkbtn:disabled{color:var(--mut);cursor:default}

/* ── Каталог масла ──────────────────────────────────────────────────────── */
.lbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.sortbar{margin-left:auto;font-size:.9rem;color:var(--mut)}
.sortbar a{margin-left:9px;color:var(--ink2);text-decoration:none;
  border-bottom:1px dashed var(--line)}
.sortbar a.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:650}
.sidehead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.clearf{font-size:.85rem;color:var(--acc)}

.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ocard{display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s}
.ocard:hover{border-color:var(--acc);box-shadow:0 4px 16px rgba(17,21,28,.08)}
/* Без собствен фон. Самсунг обръща и фоновия цвят, и фоновата картинка,
   когато тъмни страницата насила — затова бялото тук идва от самата
   снимка, точно както е на продуктовата страница. */
.oimg{height:150px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line2);padding:10px}
.oimg img{max-width:100%;max-height:100%;object-fit:contain}
.onoimg{font-weight:800;font-size:1.3rem;color:var(--line)}
.obody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.obadges{display:flex;gap:5px;flex-wrap:wrap}
.ob{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:99px;
  background:var(--surf2);color:var(--ink2);border:1px solid var(--line2)}
.ob.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.ob.dpf{background:#e8f4ec;color:#1a7f37;border-color:#c9e5d3}
.oname{font-weight:600;font-size:.95rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.omut{font-size:.82rem;color:var(--mut)}
.ooem{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.ooem span{font-size:.7rem;color:var(--mut);background:var(--surf2);
  border:1px solid var(--line2);border-radius:5px;padding:1px 5px}
.oprice{margin-top:auto;padding-top:7px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.oprice b{font-size:1.14rem}
.oprice b.ask{font-size:.9rem;font-weight:600;color:var(--mut)}
.perl{font-size:.78rem;color:var(--mut)}
.ostock{font-size:.8rem}

/* Фасетите в страничната лента на каталога с масла */
.side .fgrp{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line2)}
.side .fgrp:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.side .fgrp h3{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--mut);margin:0 0 7px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.flist li{margin:0}
.flist a{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:7px;
  text-decoration:none;color:var(--ink2);font-size:.89rem;line-height:1.3}
.flist a:hover{background:var(--surf2);color:var(--ink)}
.flist .fx{flex:0 0 13px;width:13px;height:13px;border:1.5px solid var(--line);border-radius:4px;
  font-size:10px;line-height:11px;text-align:center;color:#fff;background:#fff}
.flist li.on > a{color:var(--acc);font-weight:650}
.flist li.on .fx{background:var(--acc);border-color:var(--acc)}
.flist .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist em{font-style:normal;font-size:.78rem;color:var(--mut);flex:0 0 auto}
.flist .fmore summary{cursor:pointer;font-size:.82rem;color:var(--acc);padding:4px 6px;
  list-style:none}
.flist .fmore summary::-webkit-details-marker{display:none}
.flist .fmore summary:before{content:'+ '}
.flist .fmore details[open] summary:before{content:'− '}

/* ── Търсачка вътре във филтър (марка, вискозитет, одобрение) ───────────── */
.fsbox{padding:4px 0 7px}
.fsinp{width:100%;box-sizing:border-box;padding:7px 10px;font:inherit;font-size:.85rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.fsinp::placeholder{color:var(--mut)}
.fsinp:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(200,16,32,.10)}
.flist.scroll{max-height:290px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px}
.flist.scroll::-webkit-scrollbar{width:8px}
.flist.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.fsnone{margin:4px 0 2px;padding:0 6px;color:var(--mut);font-size:.82rem}

/* ── Указател на маслата: откъде да започна ───────────────────────────────
   Дотук бяха четири отвесни колони. Бедата е, че разделите са с много
   различна дължина: „За коя кола“ е шестнайсет реда, „За техника“ — три.
   Тоест височината на целия указател се определя от най-дългата колона, а
   до нея остават две трети празно място. На широк екран това беше близо
   900 пиксела, преди да се стигне до първото масло.

   Сега всеки раздел е СВОЙ РЕД: заглавието отляво, копчетата се пренасят
   надясно и запълват ширината. Шестнайсетте марки стават два реда копчета
   вместо шестнайсет реда текст, а празното място изчезва — височината пада
   към 300 пиксела. Копчетата са същите като на телефона, значи указателят
   се чете еднакво и на двете. */
/* Двата раздела — кола или мотор. Това е първият въпрос, затова не са чипове
   като останалите връзки в указателя, а два едри избора над тях. */
.omraz{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.omraz a{display:block;padding:12px 14px;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;background:var(--surf);color:var(--ink)}
.omraz a:hover{border-color:var(--acc);background:#fff}
.omraz b{display:block;font-size:1rem;line-height:1.25}
.omraz small{display:block;margin-top:3px;color:var(--mut);font-size:.8rem;line-height:1.35}
@media(max-width:560px){.omraz{grid-template-columns:1fr}}

/* Същите два раздела най-горе в падащото меню под „Масла и течности“. */
.orazdeli{list-style:none;display:flex;gap:8px;margin:0 0 12px;padding:0 0 12px;
  border-bottom:1px solid var(--line2);flex-wrap:wrap}
.orazdeli a{display:block;padding:7px 14px;text-decoration:none;font-weight:600;
  font-size:.9rem;color:var(--ink);border:1px solid var(--line);border-radius:999px;
  background:var(--surf)}
.orazdeli a:hover{border-color:var(--acc);color:var(--acc);background:#fff}

.omgrid{display:flex;flex-direction:column;gap:0}
.omcol{display:grid;grid-template-columns:158px 1fr;align-items:start;gap:4px 16px;
  padding:9px 0}
.omcol + .omcol{border-top:1px solid var(--line2)}
.omcol h3{margin:5px 0 0;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);font-weight:700;line-height:1.3}
.omcol ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
.omcol li{margin:0}
.omcol a{display:block;padding:5px 11px;text-decoration:none;color:var(--ink);
  font-size:.88rem;line-height:1.2;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--surf)}
.omcol a:hover{border-color:var(--acc);color:var(--acc);background:#fff}

/* Между телефона и широкия екран мястото за заглавието отляво не стига —
   там то се качва над копчетата, но пренасянето остава. */
@media(max-width:1040px){
  .omcol{grid-template-columns:1fr;gap:6px}
  .omcol h3{margin:0}
}

/* На телефон четирите колони една под друга правеха 1 470 пиксела указател —
   почти два екрана, преди да се стигне до първото масло. Затова там всеки
   раздел става един ред копчета, който се плъзга настрани с палец. Същият
   HTML, друга подредба: нищо не се крие, просто не се точи надолу. */
@media(max-width:860px){
  /* Уводът на 17 пиксела ставаше пет реда и изяждаше четвърт екран преди
     самия каталог. Смъква се, без да се крие — текстът си стои за четене
     и за търсачките. */
  .lead{font-size:15px;line-height:1.45;margin-bottom:14px}
  .omap{padding:14px 14px 10px}
  .omap .cardhead{margin-bottom:10px}
  .omgrid{display:block}
  .omcol{display:block;padding:0}
  .omcol + .omcol{margin-top:12px;border-top:0}
  .omcol h3{margin-bottom:7px;font-size:.72rem}
  /* На телефон редът НЕ се пренася — плъзга се настрани с палец. Затова
     flex-wrap:nowrap изрично: основното правило по-горе е с wrap. */
  .omcol ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:7px;overflow-x:auto;
    padding:1px 14px 5px;margin:0 -14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .omcol ul::-webkit-scrollbar{display:none}
  .omcol li{flex:0 0 auto;margin:0}
  .omcol a{padding:7px 13px;border:1px solid var(--line);border-radius:999px;
    background:var(--surf);white-space:nowrap;font-size:.86rem;line-height:1.15}
  .omcol a:active{border-color:var(--acc);color:var(--acc)}
}

/* ── Българско име за артикул от доставчик ──────────────────────────────── */
.namefix{margin-top:8px;padding:10px 12px;border-radius:10px;
  background:#fffbeb;border:1px solid #f5d98a}
.namefix.ok{background:#f0f9f2;border-color:#c9e5d3;padding:6px 10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nfok{font-size:.9rem;color:#1a7f37;font-weight:600}
.nfhead{font-size:.86rem;color:#8a5a00;line-height:1.45}
.nfwas{font-size:.8rem;color:var(--mut);margin-top:4px}
.nfrow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px;margin-top:8px}
.nfrow .search{padding:8px 11px;font-size:.92rem}
.nfrow .search.guessed{border-color:#22c55e;background:#f4fdf6}
.nfsug{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.nflbl{font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.nfchip{font-size:.82rem;padding:4px 10px;border-radius:99px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink2)}
.nfchip:hover{border-color:var(--acc);color:var(--acc)}
.nferr{font-size:.8rem;color:#b45309;margin-top:5px}
.gatewarn{font-size:.88rem;color:#b45309;background:#fffbeb;border:1px solid #f5d98a;
  border-radius:9px;padding:9px 11px;margin:10px 0}
@media (max-width:560px){.nfrow{grid-template-columns:1fr}}

/* ── Правни текстове и подписване ───────────────────────────────────────── */
.legal{max-width:820px}
.lsec{margin:0 0 16px}
.lsec:last-child{margin-bottom:0}
.lsec h2{font-size:1.02rem;margin:0 0 5px}
.lsec p{margin:0;line-height:1.62;color:var(--ink2)}
.termschk{display:flex;align-items:flex-start;gap:9px;margin:12px 0;font-size:.9rem;line-height:1.45}
.termschk input{margin-top:3px;flex:0 0 auto}
.agrgate:empty{display:none}
.agrok{font-size:1.05rem;font-weight:700;color:#1a7f37;margin-bottom:6px}
.sigbox{border:1px dashed var(--line);border-radius:12px;background:#fff;padding:8px;
  margin:4px 0 6px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sigbox canvas{width:100%;max-width:640px;height:200px;touch-action:none;cursor:crosshair;
  background:repeating-linear-gradient(180deg,#fff 0 198px,var(--line2) 198px 199px)}
.btn.wide{width:100%}

/* ── Отметки и действия в количката ─────────────────────────────────────── */
.cartbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 14px;margin-bottom:12px;background:var(--surf2);
  border:1px solid var(--line);border-radius:12px}
.cpickall{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink2);cursor:pointer}
.cpickall input{width:17px;height:17px;cursor:pointer}
.cartacts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.cartacts .btn{white-space:nowrap}
.cartacts .btn:disabled{opacity:.45;cursor:default}
.cpick{display:flex;align-items:center;padding-right:4px;cursor:pointer}
.cpick input{width:17px;height:17px;cursor:pointer}
.cline.unpicked{opacity:.5}
.cline.unpicked .cline-sum{text-decoration:line-through}
@media (max-width:640px){
  .cartacts{margin-left:0;width:100%}
  .cartacts .btn{flex:1}
}
.onote{font-size:.79rem;color:var(--mut);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Категории ──────────────────────────────────────────────────────────── */
.catchips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;
  background:var(--surf);border:1px solid var(--line);text-decoration:none;color:var(--ink2);
  font-size:.92rem}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.chip span{font-size:.78rem;color:var(--mut)}
.chip:hover span{color:var(--acc)}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin:24px 0 0;
  font-size:.95rem;color:var(--mut)}
.pager a{color:var(--acc);text-decoration:none;font-weight:600}
.catsub a span{font-size:.74rem;opacity:.6;margin-left:4px}

/* ── Подвал, марки, контакти, статични страници ─────────────────────────── */
.fin{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.flinks{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:center}
.flinks a{color:var(--ink2);text-decoration:none;font-weight:600}
.flinks a:hover{color:var(--acc)}
.fin p{margin:0}
.fnote{font-size:12.5px;opacity:.75}

.bgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bcard{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);text-decoration:none;color:inherit}
.bcard:hover{border-color:var(--acc)}
.bname{font-weight:700;letter-spacing:.2px}
.bmut,.bfrom{font-size:.79rem;color:var(--mut)}
.bfrom{color:var(--acc);font-weight:600}

.azbar{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 16px}
.azbar a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink2);
  font-size:.82rem;font-weight:700}
.azbar a:hover{border-color:var(--acc);color:var(--acc)}
.azgrp{margin:0 0 14px;scroll-margin-top:90px}
.azl{margin:0 0 6px;font-size:.95rem;color:var(--mut)}
.azlist{display:grid;gap:2px 16px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.azlist a{display:block;padding:4px 0;text-decoration:none;
  color:var(--ink2);font-size:.9rem;border-bottom:1px dotted var(--line)}
.azlist a:hover{color:var(--acc)}
.azlist a span{color:var(--mut);font-size:.78rem}

.kgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 0 14px}
.kcard{margin:0}
.klist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.klist li{display:flex;gap:12px;align-items:baseline}
.klist li span{min-width:80px;color:var(--mut);font-size:.85rem}
.klist li a{font-weight:600;text-decoration:none;color:var(--acc)}
.kform{display:flex;flex-direction:column;gap:9px}
.kform label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--mut)}
.kform input,.kform textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem}
.kform input:focus,.kform textarea:focus{outline:none;border-color:var(--acc)}
.kform .btn{align-self:flex-start}
.kmap{border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;min-height:260px}
.kmap iframe{width:100%;height:100%;border:0;display:block}

main blockquote{margin:12px 0;padding:10px 16px;border-left:3px solid var(--acc);
  background:var(--surf);border-radius:0 10px 10px 0;color:var(--ink2)}
.catnav-in .cattop{white-space:nowrap}

/* ── Разфасовки (1 л / 4 л / 20 л…) ─────────────────────────────────────── */
.vpick{margin:0 0 16px}
.vlbl{display:block;font-size:.82rem;color:var(--mut);margin:0 0 7px;font-weight:600}
.vrow{display:flex;gap:8px;flex-wrap:wrap}
.vchip{display:inline-flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--ink2);
  font-weight:700;font-size:.95rem;line-height:1.2;min-width:78px}
.vchip b{font-weight:600;font-size:.79rem;color:var(--acc)}
.vchip b.ask{color:var(--mut)}
.vchip:hover{border-color:var(--acc)}
.vchip.ok{border-color:#b7e0c4}
.vchip.on{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default}
.vchip.on b{color:#fff;opacity:.8}
/* Количка направо от чипа с разфасовката. */
.vcart{margin-top:4px;align-self:stretch;border:1px solid var(--line2);border-radius:7px;
  background:var(--surf);cursor:pointer;font-size:12px;line-height:1;padding:4px 0}
.vcart:hover{border-color:var(--acc)}
.vchip.on .vcart{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
/* Състоянието на разфасовката, изписано с думи. Цветът сам по себе си не
   стига: на избрания (черен) чип зеленият кант не се вижда, а човек чете
   реда като „всичко е налично" и се изненадва чак в кошницата. */
.vst{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.1}
.vst.nal{color:#1a7f45}
.vst.zay{color:#9a6a18}
.vchip.on .vst.nal{color:#8fe0b0}
.vchip.on .vst.zay{color:#f0c674}

/* Сгъваеми групи филтри */
.side details.fgrp > summary{display:flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;padding:2px 0;user-select:none}
.side details.fgrp > summary::-webkit-details-marker{display:none}
.side details.fgrp > summary:after{content:'';margin-left:auto;width:7px;height:7px;
  border-right:1.7px solid var(--mut);border-bottom:1.7px solid var(--mut);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.side details.fgrp[open] > summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
.side details.fgrp > summary h3{margin:0}
.side details.fgrp > summary:hover h3{color:var(--ink2)}
.side details.fgrp > summary i{font-style:normal;font-size:11px;font-weight:800;
  background:var(--acc);color:#fff;border-radius:99px;padding:1px 6px;line-height:1.5}
.side details.fgrp > .flist{margin-top:6px}
@media(max-width:900px){
  .side{max-height:none;display:block}
  .sidescroll{overflow:visible;max-height:none}
}

/* ── „Приложи“ за филтрите ──────────────────────────────────────────────── */
.fapply{flex:0 0 auto;display:flex;gap:8px;align-items:center;
  margin:10px -16px -4px;padding:11px 16px;border-top:1px solid var(--line);
  background:var(--surf);border-radius:0 0 var(--r) var(--r);
  /* Докато страницата е най-горе, лентата още не е „залепнала" за екрана —
     затова се държи и сама за долния ръб на прозореца. */
  position:sticky;bottom:0;z-index:2}
.fapply .btn{flex:1;justify-content:center}
.fapply .btn i{font-style:normal;font-weight:600;opacity:.85;margin-left:4px}
.fundo{background:none;border:0;color:var(--mut);font:inherit;font-size:.86rem;
  cursor:pointer;padding:6px 4px;text-decoration:underline}
.fundo:hover{color:var(--ink2)}

/* Отметките, които още не са приложени, личат — за да е ясно кое чака бутона. */
.flist li.on .fx{background:var(--acc);border-color:var(--acc)}
.flist li.pend > a{background:rgba(178,34,34,.07);box-shadow:inset 2px 0 0 var(--acc)}
.flist li.pend > a:hover{background:rgba(178,34,34,.12)}
.flist li.pend .fn{font-weight:650}

@media(max-width:900px){
  /* На телефон лентата стои най-долу на екрана — винаги под ръка. */
  .fapply{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;border-radius:0;
    border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,24,40,.14);
    padding:10px 14px;background:var(--bg)}
  body.has-fapply{padding-bottom:64px}
}

/* ── Скриване на дилърската цена пред клиента (Z+W) ─────────────────────── */
/* Влезлият човек не чете „Цена след вход“ — белегът af-in се слага от
   dealer.js още преди рисуването, по сесията в браузъра. Докато цената
   пътува от базата, на нейно място стои неутрално многоточие. */
html.af-in b.lock{font-size:0;color:transparent;letter-spacing:0}
html.af-in b.lock::before{content:'…';font-size:1rem;color:var(--mut);letter-spacing:2px}
html.af-in .vchip b.lock::before{font-size:.79rem;letter-spacing:1px}
html.af-in .gatenote{display:none}

.custmoney{display:none}
html.hidemy .mymoney{display:none}
html.hidemy .custmoney{display:inline}
.mynote .custlbl{display:none}
html.hidemy .mynote .mylbl{display:none}
html.hidemy .mynote .custlbl{display:inline;color:var(--mut);font-weight:600;
  text-transform:none;letter-spacing:0}
/* без зеленото — цената трябва да изглежда като обикновена клиентска */
html.hidemy .price.mine b,
html.hidemy .pricebox.mine .pmain b{color:inherit}
html.hidemy .pricebox.mine{border-color:var(--line);background:var(--surf)}
html.hidemy .tbl .mycol{display:none}
html.hidemy .tbl tr.hasmine td[data-code]{color:inherit}
/* в офертите — само колоните с твоята цена и разликата */
html.hidemy .myc{display:none !important}
.umenu a small{font-weight:700;font-size:11px;color:var(--mut);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:6px}

.hmtoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:99px;
  font-size:14px;font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;box-shadow:0 8px 26px rgba(16,24,40,.28)}
.hmtoast.show{opacity:1;transform:translate(-50%,0)}
.vchip.mine b{color:var(--ok)}
html.hidemy .vchip.mine b{color:var(--acc)}
.lhint{font-style:normal;font-size:11px;font-weight:700;color:var(--mut);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:6px;
  text-transform:uppercase;letter-spacing:.3px;cursor:help}
/* Колоната „Срок“ в търсенето може да се пренася на два реда */
.tbl td:nth-last-child(2){white-space:normal;min-width:120px}

/* Числата на дилъра са вътре в <b>, а правила като „.pmain span“ ги
   смачкваха до 12px с разредка. Тук им връщаме размера на самото <b>. */
.pmain b .mymoney, .pmain b .custmoney,
.price b .mymoney, .price b .custmoney,
.oprice b .mymoney, .oprice b .custmoney,
.vchip b .mymoney, .vchip b .custmoney,
.tbl b .mymoney, .tbl b .custmoney,
b .mymoney, b .custmoney{
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}

/* ── Падащото меню „Марки“ ──────────────────────────────────────────────── */
.cattop .car{font-style:normal;font-size:11px;opacity:.7;margin-left:5px}
.catsub.wide{min-width:640px;padding:14px}
.bcols{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:6px 18px}
.bcol{display:flex;flex-direction:column;gap:1px}
.bcol a{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:5px 8px;border-radius:6px;font-size:13.5px;color:var(--ink2)}
.bcol a:hover{background:var(--surf2);color:var(--acc)}
.bcol a span{font-size:11.5px;color:var(--mut);font-weight:700}
.bcol .bhead{font-weight:800;font-size:14.5px;color:var(--ink);
  border-bottom:1px solid var(--line);border-radius:0;margin-bottom:3px;padding-bottom:6px}
.bcol .bhead span{color:var(--acc)}
.bcol .ball{font-size:12px;color:var(--acc);font-weight:700;padding-top:2px}
.bfoot{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-weight:800;font-size:13.5px;color:var(--acc)}
@media(max-width:900px){
  .catsub.wide{min-width:0}
  .bcols{grid-template-columns:1fr}
}

/* ── Падащото меню на маслата ───────────────────────────────────────────── */
/* Четири раздела: по агрегат, по вискозитет, за коя кола, за техника.
   „За коя кола“ е шестнайсет реда — минава в два стълба, за да не се точи
   менюто надолу и да не покрие половината страница. */
.catsub.oilmenu{min-width:800px;max-width:calc(100vw - 48px);padding:18px 20px 14px}
.ocols{display:grid;grid-template-columns:1.15fr .62fr 1.75fr .95fr;gap:4px 26px}
.ocol{min-width:0}
.ocol h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);font-weight:800;padding-bottom:7px;border-bottom:1px solid var(--line)}
.ocol h4.mt{margin-top:16px}
.ocol ul{list-style:none;margin:0;padding:0}
.ocol ul.two{column-count:2;column-gap:22px}
.ocol li{margin:0;break-inside:avoid}
.ocol a{display:block;padding:5px 8px;border-radius:6px;font-size:13.5px;
  color:var(--ink2);line-height:1.3}
.ocol a:hover{background:var(--surf2);color:var(--acc)}
@media(max-width:1100px){
  .catsub.oilmenu{min-width:0;max-width:94vw}
  .ocols{grid-template-columns:1fr 1fr}
  .ocol ul.two{column-count:1}
}
@media(max-width:900px){ .ocols{grid-template-columns:1fr} }

/* Pedders в резултатите от търсенето */
.src.s-pedders{background:#f1ecfb;border-color:#c9b8ea;color:#5b3fa0}
.btag.b2{background:#f1ecfb;border-color:#c9b8ea;color:#5b3fa0}

/* ---------- Моите поръчки ---------- */
.tag.bad{background:#fdecec;border-color:#f3c6c6;color:#a12727;font-weight:600}
.obar{margin:0 0 16px}
.ofilt{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.ofilt .chip.on{border-color:var(--acc);color:var(--acc);background:#fdf4f4}
.ofilt .chip[disabled]{opacity:.45;cursor:default}

/* търсене в поръчките */
.osearchbox{position:relative;max-width:520px}
.osearch{width:100%;font:inherit;font-size:15px;padding:11px 38px 11px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--surf);color:var(--ink)}
.osearch:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(186,44,41,.12)}
.oclear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:19px;line-height:1;color:var(--mut)}
.oclear:hover{background:var(--surf2);color:var(--ink)}
.ofound{margin:8px 0 0;font-size:14px;color:var(--mut)}

.ocard{margin-bottom:12px}
/* Свита поръчка: вижда се само главата, съдържанието идва при разпъване. */
.oexp>summary{list-style:none;cursor:pointer}
.oexp>summary::-webkit-details-marker{display:none}
.oarr{flex:0 0 auto;width:10px;height:10px;margin-top:6px;border-right:2px solid var(--mut);
  border-bottom:2px solid var(--mut);transform:rotate(-45deg);transition:transform .15s}
.oexp[open]>.ohead .oarr{transform:rotate(45deg)}
.oleft{flex:1 1 220px;min-width:0}
.obody{margin-top:14px}
.ohead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ohead:hover .ono{color:var(--acc)}
.ohead .ono{font-size:17px}
.ohead .mut{color:var(--mut);font-size:13px}
/* редът, който отговаря на търсеното */
.otbl tr.hit>td{background:var(--acc-soft)}
.otbl tr.hit>td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.oright{display:flex;align-items:center;gap:12px}
.ototal{font-size:19px;white-space:nowrap}
.odel{margin:12px 0;color:var(--ink2);font-size:14.5px}
.onote{margin-top:12px;font-size:14px}
.onote summary{cursor:pointer;color:var(--mut)}
.onote pre{white-space:pre-wrap;font:inherit;color:var(--ink2);margin:8px 0 0;padding:10px 12px;background:var(--surf2);border-radius:10px}
.otbl{min-width:680px}
.otbl td{vertical-align:top}

/* пътят на поръчката */
.osteps{display:flex;list-style:none;margin:0 0 16px;padding:0;gap:0;counter-reset:s;overflow-x:auto}
.osteps li{flex:1;min-width:104px;position:relative;padding-top:22px;text-align:center;color:var(--mut);font-size:12.5px;line-height:1.3}
.osteps li i{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--surf);border:2px solid var(--line);z-index:1}
.osteps li:before{content:'';position:absolute;top:9px;left:0;right:50%;height:2px;background:var(--line)}
.osteps li:after{content:'';position:absolute;top:9px;left:50%;right:0;height:2px;background:var(--line)}
.osteps li:first-child:before,.osteps li:last-child:after{display:none}
.osteps li.done i,.osteps li.now i{border-color:var(--ok);background:var(--ok)}
.osteps li.done:before,.osteps li.done:after,.osteps li.now:before{background:var(--ok)}
.osteps li.done{color:var(--ink2)}
.osteps li.now{color:var(--ok);font-weight:700}
.osteps li.now i{box-shadow:0 0 0 4px rgba(18,124,63,.15)}
.osteps .oshort{display:none}
@media(max-width:620px){
  .osteps{overflow:visible}
  .osteps li{min-width:0;font-size:10px;padding-top:20px;padding-left:2px;padding-right:2px;
    overflow-wrap:anywhere}
  .osteps li i{width:11px;height:11px;top:4px}
  .osteps li:before,.osteps li:after{top:9px}
  .osteps .olong{display:none}
  .osteps .oshort{display:inline}
}
/* в таблицата с поръчките срокът е самостоятелен ред — без капси и рамка */
.otbl .lhint{border:0;padding:0;margin:2px 0 0;text-transform:none;letter-spacing:0;
  font-weight:600;font-size:12px;display:inline-block;cursor:default}

/* ---------- подсказки под търсачката ---------- */
.sgbox{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;display:none;
  background:var(--surf);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(16,24,40,.14);overflow:hidden;max-height:min(70vh,460px);overflow-y:auto}
.sgbox.on{display:block}
.sgi{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto auto auto;gap:12px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--ink2);font-size:14.5px;text-decoration:none}
.sgi:last-of-type{border-bottom:0}
.sgi.hi,.sgi:hover{background:var(--surf2)}
.sgi .sgc{font-weight:700;color:var(--ink2);white-space:nowrap}
.sgi .sgc b{color:var(--acc)}
.sgi .sgn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgi .sgb{color:var(--mut);font-size:12.5px;white-space:nowrap}
.sgi .sgp{font-weight:700;white-space:nowrap}
.sgs{font-size:11.5px;font-weight:700;white-space:nowrap;padding:2px 8px;border-radius:20px;
  background:var(--surf2);border:1px solid var(--line);color:var(--ink2)}
.sgs.own{background:var(--ok-soft);border-color:#bfe3cd;color:var(--ok)}
.sgd{font-size:11.5px;color:var(--mut);white-space:nowrap}
.sgall{display:block;width:100%;text-align:left;padding:11px 14px;background:var(--surf2);
  border:0;border-top:1px solid var(--line);color:var(--acc);font-weight:700;font-size:14px;cursor:pointer}
.sgall:hover{background:#fdf4f4}
@media(max-width:760px){
  .sgi{grid-template-columns:minmax(88px,auto) 1fr auto;gap:8px;font-size:13.5px}
  .sgi .sgb{display:none}
  .sgi .sgp{grid-column:3}
  .sgs,.sgd{grid-column:2 / -1;justify-self:start}
}

/* ---------- телефон в главата ---------- */
.hphone{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink);
  padding:7px 14px 7px 12px;border:1.5px solid var(--line);border-radius:var(--r);
  transition:.12s;white-space:nowrap}
.hphone:hover{border-color:var(--acc);color:var(--acc)}
.hphone svg{color:var(--acc);flex:0 0 auto}
.hphone .hpt{display:flex;flex-direction:column;line-height:1.15}
.hphone .hpt small{font-size:11px;color:var(--mut);font-weight:600}
.hphone:hover .hpt small{color:inherit}
.hphone .hpt b{font-size:20px;font-weight:800;letter-spacing:-.3px}
@media(max-width:1180px){.hphone .hpt small{display:none}}
@media(max-width:900px){.hphone{padding:7px 10px}.hphone .hpt b{font-size:17px}}
@media(max-width:560px){
  /* Телефонът остава четлив и на телефон — той е основният начин да се обадят. */
  .hphone{padding:6px 10px;gap:7px}
  .hphone .hpt b{font-size:16px}
  .hphone svg{width:18px;height:18px}
}
@media(max-width:380px){.hphone .hpt b{font-size:15px}}

/* ---------- витрина на началната страница ---------- */
.hbanner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;
  background:linear-gradient(120deg,#141821 0%,#242b39 62%,#33202a 100%);
  color:#fff;border-radius:var(--r2,18px);padding:34px 38px;margin:22px 0;overflow:hidden}
.hbtext .hbtag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:#ffb4a8;border:1px solid rgba(255,255,255,.22);
  padding:4px 11px;border-radius:20px;margin-bottom:14px}
.hbtext h2{font-size:31px;line-height:1.18;margin:0 0 12px;color:#fff;letter-spacing:-.4px}
.hbtext p{color:rgba(255,255,255,.76);margin:0 0 20px;max-width:46ch;font-size:15.5px}
.hbtext .btn{background:var(--acc);border-color:var(--acc);color:#fff}
.hbtext .btn:hover{filter:brightness(1.08)}
.hbimg{display:flex;justify-content:center}
.hbimg img{max-width:100%;height:auto;max-height:260px;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.45))}
@media(max-width:820px){
  .hbanner{grid-template-columns:1fr;padding:26px 22px;text-align:center}
  .hbtext p{margin-left:auto;margin-right:auto}
  .hbimg img{max-height:190px}
}

/* плочки по категории */
/* Петнайсет малки плочки с рисувана иконка, вместо шест едри със снимка.
   Снимките бяха две беди наведнъж: категория без снимка стоеше с празен
   кръг (спирачната система беше точно такава), а самите плочки отнемаха
   три екрана на телефон за шест категории. Иконката се чертае на линия и
   наследява цвета, затова при посочване побелява без втори файл. */
.ktiles{display:grid;gap:10px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ktile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:7px;padding:16px 10px 13px;background:var(--surf);
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;
  transition:border-color .13s,box-shadow .13s,transform .13s}
.ktile:hover{border-color:var(--acc);box-shadow:0 4px 14px rgba(16,24,40,.09);
  transform:translateY(-2px)}
.kico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc);flex:none;transition:background .13s,color .13s}
.kico svg{width:27px;height:27px}
.ktile:hover .kico{background:var(--acc);color:#fff}
/* Името заема два реда винаги — иначе „Накладки“ и „Пружини и амортисьори“
   избутват брояча на различна височина и редът се разкривява. */
.kname{font-weight:650;font-size:.93rem;line-height:1.25;color:var(--ink);
  display:flex;align-items:center;justify-content:center;min-height:2.5em}
.kbroi{font-size:.8rem;color:var(--mut)}

/* Разгъването е само за телефон: на компютър петнайсетте се събират в три
   реда и бутонът е излишно цъкане. */
.kmore{display:none}
@media (max-width:620px){
  .ktiles{grid-template-columns:repeat(3,1fr);gap:7px}
  .ktile{padding:12px 4px 10px;gap:5px}
  .kico{width:40px;height:40px}
  .kico svg{width:21px;height:21px}
  .kname{font-size:.76rem;min-height:2.6em;hyphens:auto}
  .kbroi{font-size:.69rem}
  /* Скритите излизат от подредбата, но остават в страницата — Гугъл ги
     чете, а търсенето в браузъра ги намира. */
  .ktile.skrita{display:none}
  .ktiles.otvoreni .ktile.skrita{display:flex;animation:ktpoyava .22s ease both}
  .kmore{display:block;width:100%;margin-top:10px;padding:11px;
    background:var(--surf2);border:1px solid var(--line);border-radius:10px;
    font:inherit;font-weight:600;color:var(--acc);cursor:pointer}
  .kmore:after{content:' \25BE';font-size:.85em}
  .kmore.otvoren:after{content:' \25B4'}
}
@keyframes ktpoyava{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ktiles.otvoreni .ktile.skrita{animation:none}}

/* предимства */
.hperks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:22px 0}
.hperk{display:flex;flex-direction:column;gap:5px;padding:18px 18px 20px;background:var(--surf);
  border:1.5px solid var(--line);border-radius:var(--r)}
.hperk .hpi{font-size:24px;line-height:1}
.hperk b{font-size:15px}
.hperk span:last-child{font-size:13.5px;color:var(--mut);line-height:1.45}

/* ---------- въртящ се банер най-горе ---------- */
.hslider{position:relative;overflow:hidden;border-radius:var(--r);margin:0 0 22px;
  background:#12161f;isolation:isolate}
.hstrack{display:flex;transition:transform .45s cubic-bezier(.4,.05,.2,1);will-change:transform}
.hsslide{flex:0 0 100%;display:grid;grid-template-columns:1.05fr .95fr;gap:22px;
  align-items:center;padding:38px 68px 52px;min-height:310px;color:#fff}
.hsslide.b-ped{background:linear-gradient(120deg,#141821,#2a2440 62%,#3b2b52)}
.hsslide.b-acl{background:linear-gradient(120deg,#101820,#16324a 62%,#1d4a6b)}
.hsslide.b-dba{background:linear-gradient(120deg,#181410,#3d2a15 62%,#5a3a17)}
.hsslide.b-hrc{background:linear-gradient(120deg,#12141a,#2b1c22 62%,#4a2026)}
.hsslide.b-hon{background:linear-gradient(120deg,#161011,#3a1418 62%,#5c1a20)}
.hsslide.b-toy{background:linear-gradient(120deg,#151011,#3a1a15 62%,#5a2a1c)}
.hsslide.b-maz{background:linear-gradient(120deg,#101317,#1c2b3a 62%,#26414f)}
.hsslide.b-sub{background:linear-gradient(120deg,#0f1319,#152a44 62%,#1b3d63)}
.hsslide.b-nis{background:linear-gradient(120deg,#141414,#33201f 62%,#4b2320)}
.hsslide.b-kia{background:linear-gradient(120deg,#121417,#22303a 62%,#2c4650)}
/* Ротингер — стоманено сиво със синкав отблясък, като самия диск. */
.hsslide.b-rot{background:linear-gradient(120deg,#101215,#252b33 62%,#39434f)}
/* Terra — въглен с керемиденото на кутиите им. */
.hsslide.b-ter{background:linear-gradient(120deg,#12100f,#33201a 62%,#54301f)}
.hstag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.hsslide h1{font-size:34px;line-height:1.14;margin:0 0 12px;color:#fff;letter-spacing:-.6px}
.hsslide p{color:rgba(255,255,255,.78);margin:0 0 20px;max-width:44ch;font-size:15.5px}
.hsslide .btn{background:var(--acc);border-color:var(--acc);color:#fff}
.hsslide .btn:hover{filter:brightness(1.1)}
.hsimg{display:flex;justify-content:center;align-items:center}
.hsimg img{max-width:100%;height:auto;max-height:230px;object-fit:contain;
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.5))}

.hsarr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.3);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.14s;padding-bottom:3px}
.hsarr:hover{background:rgba(0,0,0,.55);border-color:#fff}
.hsarr.prev{left:14px}
.hsarr.next{right:14px}

.hsdots{position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;justify-content:center;gap:9px}
.hsdot{width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.65);background:transparent;transition:.16s}
.hsdot:hover{background:rgba(255,255,255,.5)}
.hsdot.on{background:#fff;border-color:#fff;width:26px;border-radius:6px}

@media(max-width:860px){
  .hsslide{grid-template-columns:1fr;text-align:center;padding:24px 46px 44px;min-height:0;gap:14px}
  .hsslide h1{font-size:25px}
  .hsslide p{margin-left:auto;margin-right:auto;font-size:14.5px}
  .hsimg{order:-1}
  .hsimg img{max-height:150px}
  .hsarr{width:34px;height:34px;font-size:20px}
  .hsarr.prev{left:6px}
  .hsarr.next{right:6px}
}
@media(prefers-reduced-motion:reduce){.hstrack{transition:none}}

/* --- страницата на банера: лого, снимка или изписано име --- */
.hslogos{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.hslogo{display:flex;align-items:center;justify-content:center;background:#fff;
  border-radius:18px;padding:20px 26px;box-shadow:0 16px 32px rgba(0,0,0,.34)}
.hslogo{min-width:150px;min-height:104px}
.hslogo img{max-width:150px;max-height:104px;width:auto;height:auto;object-fit:contain;display:block}
.hslogo.wide{padding:18px 20px;min-width:250px}
.hslogo.wide img{max-width:250px;max-height:84px}
.hsimg.shot img{max-height:250px;border-radius:14px;object-fit:cover;width:100%}
.hsword{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hsword b{font-size:52px;font-weight:900;letter-spacing:2px;line-height:1;color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,.45)}
.hsword i{font-style:normal;font-size:13px;font-weight:700;letter-spacing:3.2px;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.hsslide.b-pak{background:linear-gradient(120deg,#120e0e,#3a1213 62%,#5e1a1a)}
@media(max-width:860px){
  .hslogo{padding:14px 18px;border-radius:14px}
  .hslogo{min-width:104px;min-height:74px}
  .hslogo.wide{min-width:180px}
  .hslogo img{max-width:104px;max-height:74px}
  .hslogo.wide img{max-width:180px;max-height:56px}
  .hsword b{font-size:38px}
  .hsimg.shot img{max-height:150px}
}

/* ---------- взимане от магазина ---------- */
.pickbox{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;padding:14px 16px;
  background:var(--ok-soft);border:1.5px solid #bfe3cd;border-radius:var(--r);font-size:14px}
.pickbox b{font-size:15px;color:var(--ink)}
.pickbox span{color:var(--ink2);line-height:1.45}
.pickbox a{color:var(--ok);font-weight:700;margin-top:3px}

/* „hidden“ трябва наистина да скрива: правило с display:flex го надвива. */
[hidden]{display:none !important}

/* ---------- филтрите като изскачащ панел на телефон ---------- */
.filtbar{display:none}
.filthead,.filtfoot{display:none}

@media(max-width:900px){
  /* Лентата излиза отдясно върху страницата, а не над стоката. */
  .withside{grid-template-columns:1fr}
  .side{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(370px,92vw);
    max-height:none;margin:0;border:0;border-left:1px solid var(--line);border-radius:0;
    padding:0;display:flex;flex-direction:column;
    transform:translateX(102%);transition:transform .26s cubic-bezier(.4,.05,.2,1);
    box-shadow:-14px 0 34px rgba(16,24,40,.18);visibility:hidden}
  html.filtopen .side{transform:none;visibility:visible}
  html.filtopen{overflow:hidden}

  .filthead{display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .filthead b{font-size:17px}
  .filtx{border:0;background:none;font-size:30px;line-height:1;color:var(--mut);
    cursor:pointer;padding:0 4px;margin:-4px -4px -4px 0}
  .filtx:hover{color:var(--ink)}

  .sidescroll{overflow-y:auto;max-height:none;flex:1;min-height:0;padding:14px 16px;margin:0}
  /* Панелът си има собствена глава — вътрешната „Филтри“ отпада. */
  .side .sidehead,.side .sideh{display:none}
  .side .filters{display:block;padding:0 16px;margin-top:12px}
  .side .sidecats{padding:0 16px}

  .filtfoot{display:flex;align-items:center;gap:10px;flex:0 0 auto;
    padding:11px 16px;border-top:1px solid var(--line);background:var(--surf)}
  .filtfoot .btn{flex:1;justify-content:center}
  .filtclr{background:none;border:0;color:var(--mut);font:inherit;font-size:14px;
    cursor:pointer;text-decoration:underline;padding:6px 2px;white-space:nowrap}
  .filtclr:hover{color:var(--ink2)}

  /* вътрешният „Приложи“ вече е в подножието — да не се дублира */
  .side .fapply{display:none !important}
  body.has-fapply{padding-bottom:0}

  .filtback{position:fixed;inset:0;z-index:94;background:rgba(16,24,40,.42);
    opacity:0;pointer-events:none;transition:opacity .22s}
  .filtback.on{opacity:1;pointer-events:auto}

  /* бутонът, който отваря панела — стои над резултатите и не бяга */
  .filtbar{display:block;position:sticky;top:0;z-index:12;
    padding:8px 0 10px;background:var(--bg)}
  .filtbtn{display:flex;align-items:center;gap:9px;width:100%;justify-content:center;
    background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r);
    padding:11px 14px;font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
  .filtbtn:hover{border-color:var(--acc);color:var(--acc)}
  .filtbtn svg{flex:0 0 auto}
  .filtbtn i{font-style:normal;font-size:12.5px;font-weight:800;min-width:21px;height:21px;
    display:none;align-items:center;justify-content:center;border-radius:11px;
    background:var(--acc);color:#fff}
  .filtbtn.has i{display:flex}
  .filtbtn.has{border-color:var(--acc)}
}

/* Тъмна плочка — за лога, които са бели върху тъмен фон (DBA). */
.hslogo.dark{background:#141414;box-shadow:0 16px 32px rgba(0,0,0,.5);padding:16px 22px}
.hslogo img{border-radius:2px}

/* Задаване на парола по покана */
.pwacc{background:var(--acc-soft);border:1px solid rgba(186,44,41,.25);border-radius:10px;
  padding:10px 14px;margin:0 0 16px;font-size:14px;color:var(--ink)}
.cform label.pwshow{display:flex;align-items:center;gap:8px;margin:12px 0 0;
  font-size:14px;font-weight:500;color:var(--mut);cursor:pointer}
.cform label.pwshow input{width:auto;margin:0}

/* „Нямаш достъп още?“ — деликатен ред под входа */
.askline{max-width:460px;margin:14px 0 0;font-size:14px;color:var(--mut);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.askline .linkbtn{font-size:14px}

/* Отказана поръчка — да личи, без да се отваря */
.ocard.odead{border-color:rgba(186,44,41,.45);box-shadow:inset 4px 0 0 var(--acc)}
.ocard.odead .ono{color:var(--acc-d)}
.obang{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-right:5px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:11px;font-weight:800;line-height:1}
.odeadmsg{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;
  background:var(--acc-soft);border:1px solid rgba(186,44,41,.25);border-radius:10px;
  padding:12px 14px;font-size:14.5px;color:var(--ink2)}
.odeadmsg b{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:13px}
.odeadmsg a{color:var(--acc);font-weight:700;text-decoration:underline;white-space:nowrap}

/* Напомняне за неподписан дилърски договор */
.agrbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:#fff6e6;border-bottom:1px solid #f2d9a8;color:#7a4c07;
  padding:10px 16px;font-size:14.5px;font-weight:600;text-align:center}
.agrbar b{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-right:6px;border-radius:50%;
  background:#b7791f;color:#fff;font-size:12px;font-weight:800}
.agrbar a{background:var(--acc);color:#fff;border-radius:8px;padding:6px 14px;
  font-weight:700;white-space:nowrap}
.agrbar a:hover{background:var(--acc-d)}

/* Страница „решение по поръчка“ */
.chbox{border:1px solid #dfe3e9;border-left:4px solid #b7791f;background:#fff9ef;
  border-radius:10px;padding:12px 14px;margin:0 0 10px}
.chbox.bad{border-color:#f3d4d3;border-left-color:var(--acc);background:var(--acc-soft)}
.chbox b{display:block;font-size:15.5px}
.chwhat{display:block;font-size:14px;font-weight:700;color:#7a4c07;margin-top:2px}
.chbox.bad .chwhat{color:var(--acc-d)}
.chsub{display:block;font-size:13.5px;color:var(--ink2);margin-top:3px}
.chsum{margin:14px 0 0;font-size:16px}
.chsum .up{color:var(--acc);font-weight:700}
.chsum .down{color:var(--ok);font-weight:700}
.chform{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
.chform .btn.ghost{background:var(--surf);color:var(--ink);border:1px solid var(--line)}
.chform .btn.ghost:hover{border-color:var(--acc)}
.chform .btn.danger{background:var(--surf);color:var(--acc);border:1px solid rgba(186,44,41,.35)}
.chform .btn.danger:hover{background:var(--acc-soft)}

/* Списък за отмятане кои артикули да се поръчат */
.pick{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;margin:0 0 8px;
  border:1px solid var(--line);border-radius:10px;background:var(--surf);cursor:pointer}
.pick:hover{border-color:var(--acc)}
.pick input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--acc)}
.pick.warnrow{border-color:#f2d9a8;background:#fff9ef}
.pick.out{background:var(--surf2);color:var(--mut);cursor:default;border-style:dashed}
.pick.out:hover{border-color:var(--line)}
.pickx{flex:0 0 auto;width:20px;text-align:center;color:var(--acc);font-weight:800}
.pickmain{flex:1 1 auto;min-width:0}
.pickmain b{display:block;font-size:15px}
.pickcode{display:block;font-size:12.5px;color:var(--mut);font-family:ui-monospace,monospace;margin-top:2px}
.pickwhat{display:block;font-size:13.5px;font-weight:600;color:#7a4c07;margin-top:4px}
.pickwhat.bad{color:var(--acc-d)}
.picksum{flex:0 0 auto;font-weight:700;white-space:nowrap}
.picktot{margin:14px 0 0;font-size:16px;font-weight:700;text-align:right}
.btn.danger{background:var(--surf);color:var(--acc);border:1px solid rgba(186,44,41,.4)}
.btn.danger:hover{background:var(--acc-soft)}

/* Бутон „Профил“ до входа за Б2Б — за крайните клиенти */
.afuser{gap:8px}
.btn.acct{display:inline-flex;align-items:center;gap:7px;background:var(--surf);
  color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:14px;
  padding:10px 14px;border-radius:var(--r);white-space:nowrap}
.btn.acct:hover{border-color:var(--acc);color:var(--acc)}
.btn.acct svg{flex:0 0 auto}
@media(max-width:760px){
  .btn.acct span{display:none}
  .btn.acct{padding:10px 12px}
}

/* Какво получава дилърът — списък на страницата за кандидатстване */
.dperks{margin:10px 0 0;padding-left:20px;font-size:15px;line-height:1.9;color:var(--ink2)}

/* ---------- оферти, които сме направили ние ---------- */
.qzone{margin-bottom:16px}
.qh{margin:0 0 4px;font-size:19px}
.qcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;
  background:var(--surf)}
.qcard[open]{box-shadow:0 1px 0 var(--line)}
.qcard>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qcard>summary .oarr{margin-top:0}
.qcard[open]>summary .oarr{transform:rotate(45deg)}
.qcard>summary .mut{color:var(--mut);font-size:13px}
.qtot{margin-left:auto;font-size:17px;font-weight:600;white-space:nowrap}
.qnote{margin:10px 0 0;padding:10px 12px;background:var(--surf2);border-radius:10px;
  font-size:14px;color:var(--ink2);white-space:pre-wrap}
.qacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.qacts .sm{font-size:13px}
/* количка, тръгнала от наша оферта */
.qref{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 14px;border-radius:12px;background:var(--acc-soft);
  border:1px solid var(--line);font-size:14.5px}

/* ---------- документ за печат: оферта/поръчка като от CRM-а ---------- */
.pvwrap{position:fixed;inset:0;z-index:3000;background:#e5e5e5;overflow:auto}
.pvbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 20px;background:#1d1d1f;color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.3)}
.pvbar .pvb{display:flex;gap:10px;flex-wrap:wrap}
.pvbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:none}
.pdoc{width:210mm;min-height:297mm;margin:24px auto;padding:15mm;background:#fff;color:#333;
  font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.5;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.pdoc p{margin:0 0 1.5mm}
.pdoc .dm{color:#777}
.dhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5mm}
.dttl{font-size:24px;font-weight:700;color:#BA2C29;text-decoration:underline}
.dorig{font-size:14px;color:#BA2C29}
.dno{font-size:14px;margin-bottom:8mm}
.dcols{display:flex;gap:10mm;margin-bottom:5mm}
.dcols>div{flex:1;min-width:0}
.dsec{color:#BA2C29;font-weight:700;margin-bottom:2mm}
.ddate{margin:5mm 0}
.dtbl{width:100%;border-collapse:collapse;margin:5mm 0}
.dtbl th{background:#f5f5f5;border:1px solid #ccc;padding:2mm;text-align:left;
  font-weight:400;color:#666}
.dtbl td{border:1px solid #ccc;padding:2mm;vertical-align:top}
.dtbl .c,.dtbl th.c{text-align:center}
.dtbl .r,.dtbl th.r{text-align:right}
.dtbl .mono{font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.dsum{margin:5mm 0 0 auto;width:52%}
.dsum>div{display:flex;justify-content:space-between;padding:1mm 0;border-bottom:1px solid #eee}
.dsum .dtot{font-weight:700;font-size:13px;color:#BA2C29;border-bottom:0;
  border-top:2px solid #BA2C29;margin-top:2mm;padding:2mm 0}
.dnote{margin-top:5mm;padding:3mm;background:#f9f9f9;border-left:3px solid #BA2C29}
.dvalid{margin-top:3mm;color:#777;font-size:10px}
.dsign{display:flex;justify-content:space-between;gap:10mm;
  margin-top:10mm;padding-top:5mm;border-top:1px solid #eee}
.dsign>div{width:45%}
.dsign b{display:block;margin-bottom:2mm}
.dsn{display:block;min-height:5mm;margin-bottom:5mm}
@media (max-width:840px){
  .pdoc{width:auto;min-height:0;margin:12px;padding:14px}
}
@media print{
  body.printing>*{display:none !important}
  body.printing>.pvwrap{display:block !important;position:static !important;
    background:#fff !important;overflow:visible !important}
  body.printing .pvbar{display:none !important}
  body.printing .pdoc{width:100% !important;min-height:0 !important;margin:0 !important;
    padding:10mm !important;box-shadow:none !important}
  @page{size:A4;margin:0}
}
.dlogo{margin-bottom:6mm}
.dlogo img{height:11mm;width:auto}

/* цена, която се вижда само след вход (изискване на доставчика) */
.ask.lock,.pmain .lock{color:var(--mut);font-weight:600}
.gatenote{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:var(--surf2);
  border:1px solid var(--line);font-size:13.5px;color:var(--ink2);max-width:520px}
.gatenote a{color:var(--acc)}

/* Артикул извън нашия склад: цената му е от последната доставка, не твърда
   оферта. Надписът стои и до голямата цена, и на картата в списъка. */
.asknote{margin:0 0 16px;padding:10px 12px;border-radius:10px;
  background:var(--surf2);border:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--ink2);max-width:560px}
.asknote b{font-weight:700;color:var(--ink)}
.pvalid{margin:-6px 0 0;font-size:12.5px;color:var(--mut)}
.pvalid b{font-weight:700;color:var(--ink2)}

/* Техническата карта на маслото — PDF на производителя. Копчето е нарочно
   едро и с думата PDF отляво: човек, който търси одобренията на маслото,
   трябва да го намери от пръв поглед, без да чете. */
.tdslink{display:flex;align-items:center;gap:12px;margin:0 0 18px;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surf2);text-decoration:none;color:var(--ink);
  transition:border-color .12s,background .12s}
.tdslink:hover{border-color:var(--acc);background:#fff}
.tdsic{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.5px;
  color:#b3261e;background:#fdeceb;border:1px solid #f3c9c6;
  border-radius:6px;padding:4px 7px}
.tdstxt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tdstxt b{font-size:14.5px;font-weight:700}
.tdstxt small{font-size:12px;color:var(--mut);line-height:1.35}
.tdsarr{flex:0 0 auto;color:var(--mut);font-size:17px}
.tdslink:hover .tdsarr{color:var(--acc)}
@media(max-width:560px){
  .tdstxt small{display:none}
  .tdslink{padding:10px 12px;margin-bottom:14px}
}

/* Списъкът с всички карти — /masla/dokumenti */
.tdsgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tdscard{display:flex;align-items:center;gap:11px;padding:11px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--surf2);
  text-decoration:none;color:var(--ink);transition:border-color .12s,background .12s}
.tdscard:hover{border-color:var(--acc);background:#fff}
.tdscard .tdstxt b{font-size:14px;line-height:1.3}
.tdscard:hover .tdsarr{color:var(--acc)}
.lead.sm{font-size:13.5px;color:var(--mut);margin-top:16px}
.lead.sm a{color:var(--acc)}
.pmain .lhint{align-self:center}
.oprice .lhint{margin-left:0;font-size:10px;padding:0 4px}

/* страница „Капара без фактура“ */
.ok{color:#127c3f;font-weight:600}


/* ================= главата: компактна и без застъпване =================
   Търсачката е input — без min-width:0 тя не се свива под собствената си
   ширина и изтласкваше телефона под себе си (номерът се губеше). На телефон
   главата се събираше на четири реда: лого, телефон+кошница, профил+Б2Б,
   търсачка. Сега са два: всичко в един ред, търсачката отдолу. */
@media(max-width:1180px){
  /* Търсачката е основният инструмент — тя взима остатъка, а надписите
     около нея се смаляват, вместо да я смачкват. */
  .hin{gap:12px}
  .sbox{max-width:none;flex:1 1 280px}
  .btn.acct span{display:none}
  .btn.acct{padding:10px 12px}
}
@media(max-width:1100px){
  .hphone{padding:7px 11px}
  .btn.b2b{font-size:0;letter-spacing:0;padding:11px 14px}
  .btn.b2b::after{content:'Б2Б';font-size:14px;letter-spacing:.4px}
}
@media(max-width:900px){
  /* ред 1: лого + телефон + кошница + профил · ред 2: търсачка */
  .hin{gap:10px;padding:10px 16px;row-gap:10px}
  .logo{margin-right:auto}
  .sbox{order:3;flex:1 1 100%}
  .hphone{margin-left:0}
  .afuser{margin-left:0;gap:8px}
}
@media(max-width:620px){
  /* Логото остава само знакът — така целият ред се събира на един телефон. */
  .logo img{height:36px;width:36px;object-fit:cover;object-position:left center}
  .hin{gap:8px;padding:9px 12px}
  .cartbtn{width:40px;height:40px}
  .hphone{padding:0;width:40px;height:40px;justify-content:center;border:1.5px solid var(--line)}
  .hphone .hpt{display:none}
  .btn.acct{padding:0;width:40px;height:40px;justify-content:center}
  .btn.b2b{padding:0 12px;font-size:13px;height:40px;display:inline-flex;align-items:center}
  .afuser{gap:6px}
  .search{padding:10px 12px;font-size:15px}
  .iconbtn{padding:0 16px;font-size:15px}
}
/* Дългият надпис не се събира на тесен екран — става само „Б2Б". */
@media(max-width:620px){
  .btn.b2b{font-size:0;letter-spacing:0}
  .btn.b2b::after{content:'Б2Б';font-size:13px;letter-spacing:.4px}
}

/* Лентата с категориите се плъзга, вместо да бута страницата настрани.
   САМО на тесен екран. На широк `overflow-x:auto` отрязваше падащите менюта:
   браузърът не умее да реже водоравно и да пуска отвесно наведнъж, затова
   превръща и отвесното в „auto“ — и менютата, които висят под лентата, се
   скриваха. На тесните екрани менюта и без това няма (.catsub е display:none
   под 900px), значи там плъзгането е безвредно. */
@media(max-width:900px){
  .catnav-in{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .catnav-in::-webkit-scrollbar{display:none}
}
@media(min-width:901px){ .catnav-in{overflow:visible} }
@media(max-width:1180px){.cattop{white-space:nowrap}}

body.seo .sbox form{min-width:0}

/* Характеристики на артикула — две колони, четат се като таблица. */
.dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dl dt{padding:10px 14px;background:var(--page);color:var(--mut);font-size:14px;font-weight:600;border-bottom:1px solid var(--line)}
.dl dd{padding:10px 14px;font-size:15px;border-bottom:1px solid var(--line)}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0}
@media(max-width:520px){.dl{grid-template-columns:1fr}.dl dt{border-bottom:0;padding-bottom:2px}}

/* Значки и тагове на артикула. */
.bdgs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
.bdg{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:#fff}
.bdg.nov{background:var(--acc)}
.bdg.prep{background:#0f766e}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.tagc{font-size:13px;color:var(--mut);background:var(--page);border:1px solid var(--line);
  border-radius:999px;padding:3px 11px}

.btag.b3{background:#e9f7ef;border-color:#a9dcc0;color:#1c7a4a}
.chip.b3{border-color:#a9dcc0}
.chip.b3:hover{border-color:#1c7a4a;color:#1c7a4a}

/* ---------- продуктова страница: галерия вляво, данните вдясно ---------- */
.ptop{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;align-items:start;margin-top:14px}
.ptop .pgal{margin:0;max-width:none}
.ptop .pright>.ttl{margin-top:0}
.ptop .pright>.card{margin-top:14px}
.pgalnone .pgalmain{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#f7f8fa url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><circle cx='150' cy='142' r='72' fill='none' stroke='%23d3d8e0' stroke-width='14'/><circle cx='150' cy='142' r='28' fill='%23d3d8e0'/></svg>") center/60% no-repeat}
.ptrust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 4px}
.ptr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 14px 15px;display:flex;
  flex-direction:column;gap:3px}
.ptr span{font-size:20px;line-height:1}
.ptr b{font-size:13.5px;font-weight:800}
.ptr small{font-size:12px;color:var(--mut);line-height:1.45}
@media(max-width:900px){
  .ptop{grid-template-columns:1fr;gap:16px}
  .ptop .pgal{max-width:420px;margin:0 auto}
  .ptrust{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.ptrust{grid-template-columns:1fr}}
.fitlist{margin:0;padding:0 0 0 18px;columns:2;column-gap:26px}
.fitlist li{margin:0 0 6px;font-size:13.5px;line-height:1.5;break-inside:avoid}
@media(max-width:700px){.fitlist{columns:1}}

/* Отметките в поръчката: квадратчето стои пред текста, а не над него.
   Общите правила за .cform label/input ги разпъваха на цял ред. */
.cform label.termschk,.cform label.savechk,.cform label.savechk2{
  display:flex;align-items:flex-start;gap:9px;font-size:.9rem;font-weight:400;
  line-height:1.45;color:var(--ink);cursor:pointer;margin:12px 0}
.cform label.savechk{margin:10px 0}
.termschk a,.savechk a,.savechk2 a{color:var(--acc);text-decoration:underline}
.cform label.savechk,.cform label.savechk2{align-items:center;font-size:.93rem}
.cform label.termschk>input[type=checkbox],
.cform label.savechk>input[type=checkbox],
.cform label.savechk2>input[type=checkbox]{
  width:17px;height:17px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--acc)}
.termschk>span,.savechk>span,.savechk2>span{flex:1 1 auto;min-width:0}
.cform label.savechk>input[type=checkbox],
.cform label.savechk2>input[type=checkbox]{margin:0}

.savechk2{align-items:flex-start}
.savechk2>input[type=checkbox]{width:17px;height:17px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--acc)}

/* ---------- лентата с марките: с пет доставчика вече не се събира ----------
   На тесен екран се пренася на два реда, за да се вижда и Hardrace. */
@media(max-width:900px){
  /* Един ред, който се плъзга настрани. Дясната страна избледнява, за да
     личи, че има още марки нататък. */
  .btabs{display:flex;flex-wrap:nowrap;width:100%;gap:4px;overflow-x:auto;
    justify-content:flex-start;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .btabs::-webkit-scrollbar{display:none}
  .btabs.atend{-webkit-mask-image:none;mask-image:none}
  .btab{flex:0 0 auto;justify-content:center;padding:9px 13px;font-size:13.5px;gap:6px;
    scroll-snap-align:start}
  .btab i{font-size:12px}
}

/* индикатор, докато пълните данни се теглят */
.loadbox{display:flex;align-items:center;gap:11px;justify-content:center;
  padding:56px 20px;color:var(--mut);font-size:15px}
.spin{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ── избор на начин на плащане в кошницата ─────────────────────────────────
   Общото правило .cform input{width:100%} разпъваше и кръгчето на цял ред,
   а надписът излизаше извън рамката. Затова тук радиото се фиксира по размер,
   както е при отметките по-горе. */
.payopts{margin:6px 0 14px}
.paylbl{font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 7px}
.cform label.payopt,.payopt{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 13px;margin:0 0 8px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--surf);
  font-size:.95rem;font-weight:400;color:var(--ink);line-height:1.4;cursor:pointer}
.payopts .payopt:last-child{margin-bottom:0}
.cform label.payopt>input[type=radio],.payopt>input[type=radio]{
  width:18px;height:18px;flex:0 0 auto;margin:1px 0 0;padding:0;
  accent-color:var(--acc);border:0;background:none;box-shadow:none}
.payopt>span{flex:1 1 auto;min-width:0;display:block}
.payopt b{display:block;font-weight:700;font-size:.95rem;color:var(--ink)}
.payopt i{display:block;font-style:normal;font-weight:400;font-size:.85rem;
  color:var(--ink2);margin-top:2px}
.payopt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.advnote{font-size:.86rem;line-height:1.45;color:var(--ink2);background:var(--acc-soft);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 9px}
.advnote b{color:var(--ink)}

/* ── таблици на телефон: всеки ред става картичка ─────────────────────────
   .tbl е с min-width:760px, за да не се смачкват колоните на компютър. На
   телефон това означаваше плъзгане наляво-надясно, за да се види един ред —
   виждаше се източникът и номерът, а цената и бутонът за количка оставаха
   извън екрана. Тук редът се разгъва вертикално: заглавието на всяка колонка
   идва от data-l и стои пред стойността. */
@media(max-width:760px){
  .tblwrap{overflow-x:visible;border:0;border-radius:0;background:none}
  .tbl{display:block;min-width:0;width:100%;background:none;font-size:15px}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  /* Снимката отляво, номерът и наименованието до нея; всичко останало —
     на цял ред отдолу. */
  .tbl tr{display:grid;grid-template-columns:64px 1fr;column-gap:12px;align-items:start;
    background:var(--surf);border:1px solid var(--line);
    border-radius:10px;padding:11px 13px;margin:0 0 10px}
  .tbl td.thc{grid-column:1;grid-row:1 / span 2}
  .tbl td.mono{grid-column:2;grid-row:1}
  .tbl td.nm{grid-column:2;grid-row:2}
  .tbl td.br{grid-column:2;grid-row:3}
  .tbl td:not(.thc):not(.mono):not(.nm){grid-column:1 / -1}
  .tbl.nothumbs tr{grid-template-columns:1fr}
  .tbl.nothumbs td.mono,.tbl.nothumbs td.nm,.tbl.nothumbs td.br{grid-column:1}
  .tbl tbody tr:hover{background:var(--surf)}
  .tbl tr.instock{background:var(--ok-soft);border-color:#cfe6d3}
  .tbl td{display:flex;align-items:baseline;gap:10px;padding:3px 0;border:0;
    text-align:left;white-space:normal}
  .tbl td::before{content:attr(data-l);flex:0 0 96px;color:var(--mut);
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
  .tbl td:not([data-l])::before{display:none}
  .tbl .r{text-align:left}
  html.af-dealer .mycol{display:flex}
  html.af-hasmine .dcol{display:flex}
  html.hidemy .tbl .dcol{display:none}
  /* На телефон редът „НАЛИЧНОСТ —“ е чист шум: точно под него стои „СРОК ·
     По заявка“, което казва същото с думи. На широк екран колоната остава,
     защото там таблицата се чете по колони. */
  .tbl td.prazna{display:none}

  /* снимка и номер най-отгоре, един до друг */
  .tbl td.thc{display:block;width:auto;padding:2px 0 0}
  .tbl td.thc::before{display:none}
  .tbl .thb{width:64px;height:64px}
  /* „НОМЕР“ и „МАРКА“ не се надписват — вижда се какво е. */
  .tbl td.mono{font-size:17px;padding-bottom:2px}
  .tbl td.mono::before{display:none}
  .tbl td.nm{font-size:15px;line-height:1.35}
  .tbl td.nm::before,.tbl td.br::before{display:none}
  .tbl td.br{color:var(--mut);font-size:13.5px;padding-top:0}

  /* бутоните — собствен ред най-долу, отделен с чертичка */
  .tbl td.acts{justify-content:flex-end;gap:8px;margin-top:8px;padding-top:9px;
    border-top:1px solid var(--line2)}
  .tbl td.acts::before{display:none}
  .tbl .ab{width:38px;height:38px;font-size:17px}
  .tbl.nothumbs td.thc{display:none}
}

/* ── горното черно меню на телефон ────────────────────────────────────────
   Лентата се плъзга настрани (overflow-x:auto), но лентичката за плъзгане е
   скрита и отстрани изглежда просто отрязана. Слагаме избледняване вдясно —
   така се вижда, че има още, без да заема място. */
@media(max-width:760px){
  #catnav{position:sticky;overflow:hidden}
  #catnav::after{content:'';position:absolute;top:0;right:0;bottom:0;width:34px;
    pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,0),var(--ink) 78%)}
  .catnav-in{padding-right:34px}
}

/* ── филтър по марка над резултатите ─────────────────────────────────────
   Един номер вади десетина реда от различни производители. Бутончетата
   само скриват редове — нищо не се тегли наново. */
.bfilt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 14px}
.bfilt[hidden]{display:none}
.blabel{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.5px;margin-right:2px}
.bchip{font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;
  background:var(--surf);border:1.5px solid var(--line);border-radius:20px;
  padding:5px 12px;line-height:1.2;white-space:nowrap}
.bchip:hover{border-color:var(--acc);color:var(--ink)}
.bchip i{font-style:normal;font-weight:400;color:var(--mut);margin-left:3px}
.bchip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.bchip.on i{color:rgba(255,255,255,.75)}
@media(max-width:760px){
  .bfilt{gap:5px;margin:8px 0 12px}
  .bchip{font-size:12.5px;padding:5px 10px}
}

/* ── скелет, докато чакаме доставчиците ──────────────────────────────────
   Досега страницата стоеше празна 7–8 секунди: заглавието горе, нищо под
   него, и чак после „търся“. Сега картата с въртележката се рисува още от
   сървъра, а сивите редове показват къде ще излязат резултатите. */
.card.waiting{text-align:center;padding:34px 22px 26px}
.skrow{height:52px;border-radius:8px;margin-top:10px;
  background:linear-gradient(90deg,var(--surf2) 25%,var(--line2) 37%,var(--surf2) 63%);
  background-size:400% 100%;animation:skwave 1.4s ease-in-out infinite}
.skrow:nth-child(4){opacity:.75}
.skrow:nth-child(5){opacity:.5}
@keyframes skwave{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.skrow{animation:none}}
@media(max-width:760px){.card.waiting{padding:26px 16px 20px}.skrow{height:44px}}

/* ── страница на артикул на Ротингер ─────────────────────────────────────── */
.pimg.noimg{display:flex;align-items:center;justify-content:center;color:var(--mut);
  font-size:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf2)}
.fitline{font-size:15px;color:var(--ink2);background:var(--ok-soft);border:1px solid #cfe6d3;
  border-radius:8px;padding:10px 13px;margin:12px 0}
.tvars{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 14px}
.tvars .mut{font-size:13px;color:var(--mut)}
.dimtbl{width:100%;border-collapse:collapse;font-size:15px}
.dimtbl td{padding:9px 4px;border-bottom:1px solid var(--line2)}
.dimtbl tr:last-child td{border-bottom:0}
.dimtbl td:first-child{width:45%}
.carblk{border-top:1px solid var(--line2);padding:4px 0}
.carblk:first-of-type{border-top:0}
.carblk>summary{cursor:pointer;padding:11px 2px;font-size:15.5px;list-style:none}
.carblk>summary::-webkit-details-marker{display:none}
.carblk>summary::before{content:'▸';display:inline-block;width:16px;color:var(--mut);
  transition:transform .15s}
.carblk[open]>summary::before{transform:rotate(90deg)}
.carblk>summary i{font-style:normal;font-size:13px;color:var(--mut);font-weight:400;margin-left:6px}
.carlist{padding:2px 0 12px 16px}
.carrow{padding:8px 0;border-top:1px dashed var(--line2)}
.carrow:first-child{border-top:0}
.carmodel{font-weight:700;font-size:14.5px}
.carvars{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.cvar{font-size:12.5px;color:var(--ink2);background:var(--surf2);border:1px solid var(--line2);
  border-radius:14px;padding:2px 9px}
.crosswrap{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 12px 16px}
.crossnb{font-size:12.5px;background:var(--surf2);border:1px solid var(--line2);
  border-radius:6px;padding:3px 9px;font-family:ui-monospace,Menlo,monospace}
.crossnb i{font-style:normal;color:var(--mut);margin-right:5px;font-family:inherit}
@media(max-width:760px){
  .dimtbl{font-size:14.5px}
  .carlist,.crosswrap{padding-left:8px}
}
.tvars .tag{text-decoration:none}
.tvars a.tag:hover{border-color:var(--acc);color:var(--acc)}
.tvars .tag.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ── цена и избор на изпълнение (Ротингер) ───────────────────────────────
   Таблицата с редове беше суха и не показваше най-важното — че T1, T3, T5
   са различни на вид. Всяко изпълнение си има своя снимка във файла на
   Ротингер, затова тук се избира по картинка, както се избира цвят. */
.rprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:14px 0 2px}
.rprice b{font-size:31px;letter-spacing:-.6px;color:var(--ink)}
.rprice .mut{font-size:13px;color:var(--mut)}
.delline{font-size:14px;color:var(--ink2);margin:2px 0 14px}
.delline b{color:var(--ink)}

.vpick{margin:2px 0 18px}
.vpicklbl{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.6px;margin:0 0 9px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}
.vcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 9px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--surf);
  text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s}
.vcard:hover{border-color:var(--acc);transform:translateY(-1px)}
.vcard.on{border-color:var(--acc);border-width:2px;background:var(--acc-soft);padding:7.5px 5.5px 8.5px}
.vthumb{position:relative;width:100%;aspect-ratio:1;display:block;border-radius:7px;
  background:#fff;overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:contain;display:block}
.vtick{position:absolute;right:3px;bottom:3px;width:19px;height:19px;border-radius:50%;
  background:var(--acc);color:#fff;font-style:normal;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.vlab{font-size:13px;font-weight:700;margin-top:2px}
.vcard.on .vlab{color:var(--acc)}
.vsum{font-size:13.5px;font-weight:700;white-space:nowrap}
.vsum .mut{font-weight:400}
.vhere{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ok);
  background:var(--ok-soft);border-radius:9px;padding:1px 6px}
@media(max-width:760px){
  .rprice b{font-size:27px}
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
  .vlab{font-size:12.5px}.vsum{font-size:13px}
}

/* ── Ротингер по автомобил ───────────────────────────────────────────────── */
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mkchip{display:flex;flex-direction:column;gap:1px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;background:var(--surf);text-decoration:none;color:var(--ink)}
.mkchip:hover{border-color:var(--acc)}
.mkchip b{font-size:14.5px}
.mkchip i{font-style:normal;font-size:12px;color:var(--mut)}

.mdlist{display:flex;flex-direction:column}
.mdrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 4px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--ink)}
.mdrow:last-child{border-bottom:0}
.mdrow:hover .mdname{color:var(--acc)}
.mdname{font-size:15px;font-weight:600;min-width:0}
.mdn{font-size:12.5px;color:var(--mut);white-space:nowrap}

.cargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.carprod{display:flex;gap:11px;padding:10px;border:1px solid var(--line);border-radius:10px;
  background:var(--surf);text-decoration:none;color:var(--ink)}
.carprod:hover{border-color:var(--acc)}
.cpimg{flex:0 0 68px;width:68px;height:68px;border-radius:7px;background:#fff;overflow:hidden;
  display:block;border:1px solid var(--line2)}
.cpimg img{width:100%;height:100%;object-fit:contain;display:block}
.cpbody{min-width:0;display:flex;flex-direction:column;gap:2px}
.cpcode{font-size:15px;font-family:ui-monospace,Menlo,monospace}
.cpsize{font-size:13px;color:var(--ink2)}
.cpfits{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.cpfits i{font-style:normal;font-size:11px;color:var(--mut);background:var(--surf2);
  border:1px solid var(--line2);border-radius:9px;padding:1px 6px}
.cpfits i.more{color:var(--acc);border-color:var(--acc-soft)}
/* Цената идва наготово от базата — показва се веднага, без изчакване. */
.cpprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin-top:3px}
.cpprice b{font-size:16px}
.cpprice b.ask{font-size:13px;font-weight:600;color:var(--mut)}
.cpprice i{font-style:normal;font-size:11px;color:var(--mut)}
.cpprice em.ok{font-style:normal;font-size:11px;color:#1c8b4b;
  background:rgba(28,139,75,.12);border-radius:9px;padding:1px 6px}
@media(max-width:760px){
  .mkgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:7px}
  .cargrid{grid-template-columns:1fr}
}

/* ── Ротингер в общата страница по автомобил ───────────────────────────── */
.pfits{font-size:11.5px;color:#8b93a3;line-height:1.4;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rgh{margin:14px 0 8px;font-size:14px;font-weight:800;color:var(--mut);
  display:flex;align-items:center;gap:8px}
.rgh span{font-weight:700;font-size:12px;background:var(--surf2);border-radius:20px;padding:2px 9px}

/* ── Резултати от търсене: филтър встрани, ред-връзка ──────────────────── */
.withside.noside{grid-template-columns:1fr}
.withside.noside .side{display:none}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover{background:var(--surf2)}
.tbl td.nm a{color:inherit;text-decoration:none}
.tbl td.nm a:hover{text-decoration:underline}
.side .fgrp .flist{max-height:340px;overflow:auto}
.withside.noside .filtbar{display:none}

/* Ротингер е отделен раздел в лентата с марките — данните му идват от
   базата, не от каталожния файл, затова се появява със закъснение. */
.btab.rot{animation:rotin .25s ease-out}
@keyframes rotin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ── Снимките остават на бяло и при тъмна тема ──────────────────────────
   Телефоните с включена тъмна тема обръщат сайта сами (Chrome и Samsung
   Internet). Продуктовите снимки обаче са заснети на бял фон — щом рамката
   около тях почернее, стоката изглежда като залепена върху черна дъска.
   „color-scheme: only light“ казва на браузъра да не обръща точно тези
   кутии: страницата си остава тъмна, а стоката седи на бяло, както е в
   каталога на производителя. */
.pgal, .pgalmain, .pgalthumbs, .pgalt,
.dimg, .pimg, .thb, .htimg, .cpimg, .vthumb, .vcard,
.oimg, .hbimg, .hsimg, .gal, .gthumb, .thpop {
  color-scheme: only light;
}
/* Samsung Internet и по-старите версии на Chrome не слушат „color-scheme“,
   когато тъмнят страницата насила — обръщат всеки фонов ЦВЯТ. Фонова
   КАРТИНКА обаче не пипат. Затова бялото тук е нарисувано като мъничко svg,
   не зададено като цвят: така кутията остава бяла при всеки браузър. */
/* Бялото поле около стоката при тъмна тема.
   Самсунг и Chrome, когато тъмнят страницата насила, обръщат фоновия ЦВЯТ,
   а простата SVG рисунка я четат като графика и също я потъмняват. Затова
   бялото тук е мъничка JPEG снимка с едва доловим шум: за класификатора на
   браузъра това е ФОТОГРАФИЯ, а фотографиите не се пипат. Така рамката
   остава бяла и се слива с бялото на самата стока. */
.oimg, .thb.has, .pgalmain, .pgalt, .dimg, .pimg, .htimg, .cpimg,
.vthumb, .gthumb, .thpop {
  background-color: #fff;
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9TwTgk8CgDvk5oxg4NHT3xQAe/pSHPJzyKUHP1oI6fnQAgycc0uO/TJ7UmOOuaXocZoATHpgj3pRzx6etGO3Wg+pFAH//2Q==");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.chip.rotchip{border-color:var(--ok);color:#166534;background:#f0f9f2}
.chip.rotchip:hover{background:#e3f4e9}

/* ── Избор на двигател на страницата на колата (Ротингер) ──────────────── */
.engpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 6px}
.engpick .blabel{margin-right:4px}
.engpick a.bchip{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.engpick a.bchip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.engpick a.bchip.on i{color:rgba(255,255,255,.75)}
.rprice.waitp b{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* Технически чертеж от размерите в базата — диск, барабан, накладка.
   Виж api/_chertej.js защо се рисува, вместо да се взима отнякъде. */
.chertej{display:block;width:100%;max-width:560px;height:auto;margin:2px 0 16px}
@media (max-width:640px){ .chertej{max-width:100%} }
@media print{ .chertej{max-width:420px} }

/* Снимка и чертеж една до друга на страницата на Ротингер. */
.rgal{display:block}
.rgmain{position:relative}
.rgitem{display:none}
.rgitem.on{display:block}
.rgdraw{display:none;background:#fff;padding:6px 10px}
.rgdraw.on{display:flex;align-items:center;justify-content:center}
.rgdraw .chertej{margin:0;max-width:100%}
.rgthumbs{display:flex;gap:10px;margin-top:12px}
.rgt{width:76px;height:64px;padding:4px;border:1.5px solid #e3e7ee;border-radius:10px;
  background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;color:#5b6473;transition:border-color .15s,color .15s}
.rgt:hover{border-color:#c3cad4}
.rgt.on{border-color:#c0392b;color:#c0392b}
.rgt img{width:100%;height:100%;object-fit:contain}
.rgt svg{width:34px;height:26px}
.rgtx{font:600 10px Inter,system-ui,sans-serif;letter-spacing:.02em}

/* Общата карта: дребният ред под номера и чипчетата „става за…“.
   Класовете са свои (ocnote, ofits), защото .onote вече значи друго
   на продуктовата страница. */
.ocnote{font-size:.8rem;color:var(--mut);line-height:1.35;margin-top:1px}
.ofits{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ofits i{font-style:normal;font-size:.72rem;line-height:1.3;color:var(--ink2);
  background:var(--surf2);border-radius:6px;padding:3px 6px}
.ofits i.more{color:var(--acc);background:rgba(186,44,41,.07)}

/* Лентата „Филтър“ на страницата с части по автомобил. */
.fbar{position:relative;margin:10px 0 4px}
.fbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;
  border:1.5px solid var(--acc);background:var(--acc);color:#fff;cursor:pointer;
  font:600 .9rem Inter,system-ui,sans-serif;transition:filter .15s}
.fbtn:hover{filter:brightness(1.07)}
.fbtn.on{box-shadow:0 0 0 3px rgba(186,44,41,.18)}
.fnum{font-weight:500;opacity:.92}
.fpanel{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:250px;max-width:min(94vw,420px);
  background:var(--surf);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(17,21,28,.13);padding:12px}
.fptitle{font:600 .78rem Inter,system-ui,sans-serif;color:var(--mut);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.fplist{display:flex;flex-wrap:wrap;gap:6px;max-height:min(56vh,340px);overflow:auto}
.fp{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--surf2);color:var(--ink);cursor:pointer;
  font:500 .84rem Inter,system-ui,sans-serif}
.fp b{font-weight:600;color:var(--mut)}
.fp:hover{border-color:var(--acc)}
.fp.on{border-color:var(--acc);background:rgba(186,44,41,.08);color:var(--acc-d)}
.fp.on b{color:var(--acc)}

/* ---- „За кои коли става“ (приложението от kat_applications) ----
   Един артикул стига до 158 модела в 13 марки. Разгънато това е стена, която
   избутва всичко останало извън екрана — затова марките са сгъваеми и само
   първата стои отворена. */
.fitsec .lead.sm{margin:0 0 12px}
.fitmarki{display:flex;flex-direction:column;gap:0}
.fitm{border-top:1px solid var(--line2)}
.fitm:first-child{border-top:0}
.fitm > summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 2px;list-style:none;font-size:.97rem}
.fitm > summary::-webkit-details-marker{display:none}
.fitm > summary::before{content:'▸';color:var(--mut);font-size:.8rem;
  transition:transform .12s}
.fitm[open] > summary::before{transform:rotate(90deg)}
.fitm > summary i{font-style:normal;font-size:.76rem;color:var(--mut);
  background:var(--surf);border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;margin-left:auto}
.fitm ul{list-style:none;margin:0 0 10px;padding:0 0 0 18px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 16px}
.fitm li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;
  padding:4px 0;font-size:.9rem;line-height:1.35}
.fitm li span{color:var(--mut);font-size:.83rem}
.fitdisk{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.9rem}
.fitdisk span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;
  border:1px solid var(--line);border-radius:6px;padding:2px 8px;background:var(--surf)}
@media(max-width:560px){
  .fitm ul{grid-template-columns:1fr;padding-left:14px}
}

/* Марка от базата, за която двоичният файл няма свой цвят (Terra, Ротингер,
   складът). Неутрален вид — по-добре сив етикет, отколкото никакъв. */
.btag.b9{background:var(--surf2);border:1px solid var(--line);color:var(--ink2)}

/* ── таблицата вътре в папката „Подходящ за“ ──────────────────────────────
   Terra дава по осемдесет приложения на артикул; в една таблица това е
   километър, през който човек превърта покрай цената. Папката на марка е
   вече описана по-горе — тук е само съдържанието ѝ. */
.fitsum{color:var(--mut);font-size:14px;margin:-4px 0 14px}
.fittbl{max-height:420px;overflow:auto;margin:0 0 12px}
.fitm .hint{margin:0 0 12px}

/* ── марките отвъд двоичния файл (Terra и следващите) ─────────────────────
   Каталожният файл в браузъра е снимка на три марки, направена наръка.
   Останалото идва от базата и се показва тук — със същата плочка, за да
   не личи откъде е дошло. */
.btab.dop{animation:rotin .25s ease-out}
.chip.dopchip{border-color:#c9b8ea;color:#5b3fa0;background:#f5f1fc}
.chip.dopchip:hover{background:#ece4f9}
.dopwrap{margin-top:22px}
.dopgrp{margin-bottom:6px}
.dopcard.dopskrit,.dopcard.dopvun{display:none}
.dopn{font-weight:700;font-size:12px;background:var(--surf2);border-radius:20px;padding:2px 9px}

/* Блокът „Нямаш профил?“ под входа. Отчетлив, за да не се пропуска —
   дотук на негово място стоеше дребен сив линк и никой не го натискаше. */
.regbox h2{font-size:19px;margin:0 0 4px}
.regbox .muted{margin:0 0 4px}
.regbox .btn.ghost.wide{width:100%;padding:13px;font-size:16px;font-weight:700}

/* Редът „Става за …“ на страницата на артикула — виж kat_name_fix в базата.
   Отговаря на единствения въпрос, с който човек отваря страницата. */
.fitline{margin:8px 0 0;padding:9px 13px;border-radius:9px;font-size:14.5px;
  line-height:1.5;color:var(--ink2);background:var(--surf);
  border:1px solid var(--line);border-left:3px solid var(--acc)}

/* Изборът на кола за Terra — виж terFinder() в app.js. Резултатите падат
   под самия избирач, затова му трябва въздух и състояние „празно“. */
.terrez{margin-top:18px}
.terload{padding:22px 16px;text-align:center;color:var(--mut);font-size:15px}
.ternone{padding:20px 16px;text-align:center;color:var(--ink2);font-size:15px;
  background:var(--surf);border:1px dashed var(--line);border-radius:12px}
.ternone b{color:var(--ink)}

/* Броят в комплекта. Hardrace продават носачите по два, а в описанието това
   стоеше съкратено насред текста. Редът под заглавието го казва с думи, а
   под цената стои и цената на един брой — за да може човек да сравни. */
.kompl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;
  margin:10px 0 0;padding:9px 13px;border-radius:9px;font-size:14.5px;
  line-height:1.5;background:var(--acc-soft);border:1px solid #f0cfcd}
.kompl b{color:var(--acc-d);font-weight:800}
.kompl span{color:var(--ink2)}
.pkompl{margin:-8px 0 8px;font-size:13.5px;color:var(--ink2)}
.pkompl b{font-weight:700;color:var(--ink)}
.obroi{font-size:.78rem;color:var(--ink2);margin-top:2px;line-height:1.3}
.obroi b{font-weight:700;color:var(--acc-d)}

/* Име на нова оферта в прозорчето „Добави в оферта“.
   Дотук „+ Нова оферта“ създаваше оферта, без да пита нищо, и тя оставаше
   с датата за име — след няколко такива не се разбира коя за кого е. */
[hidden]{display:none !important}
.ofnewbox{margin:12px 0 2px;padding:12px 13px;border-radius:10px;
  background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--acc)}
.ofnewbox .fl{margin:0 0 6px}
.ofnewrow{display:flex;gap:8px;align-items:stretch}
.ofnewrow .search{flex:1;min-width:0}
.ofnewrow .btn.sm{flex:0 0 auto;white-space:nowrap;padding:0 18px;margin:0}
.ofhint{margin:7px 0 0;font-size:.8rem;color:var(--mut);line-height:1.4}
.ofstate{margin:12px 0 0;font-size:.9rem;color:var(--ink2);
  display:flex;align-items:center;gap:8px}
.ofstate.losho{color:var(--acc-d);font-weight:600}

/* Името на офертата и моливчето до него. Бутонът „Преименувай“ стоеше в
   другия край на картата — далеч от това, което променя. */
.ofhead{justify-content:flex-start;gap:8px}
.ofhead h2{cursor:pointer;border-radius:6px;padding:1px 4px;margin-left:-4px;
  transition:background .12s}
.ofhead h2:hover{background:var(--acc-soft)}
.ofpen{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--surf);color:var(--mut);cursor:pointer;transition:all .12s}
.ofpen:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.ofttlin{flex:1 1 320px;min-width:0;font-size:1.45rem;font-weight:800;color:var(--ink);
  font-family:inherit;padding:4px 10px;border:2px solid var(--acc);border-radius:8px;
  background:var(--surf2);outline:none}
.ofttlin:disabled{opacity:.6}

/* ═══ АРТИКУЛ КАТО РЕД ═══════════════════════════════════════════════════
   Плочката реже името на два реда: „PAKELO MULTISINT EVO 10W-40 –…“ не
   казва нито че е полусинтетично, нито за какво става, и човек трябва да
   влезе в страницата, за да разбере какво гледа. Редът има ширина —
   името се чете цяло, а вискозитетът, одобренията и броят в комплекта
   стоят до него. Клиентът го поиска точно така. */
.olist{background:var(--surf);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.orow{display:grid;grid-template-columns:58px minmax(0,1fr) 128px 186px;gap:13px;
  padding:10px 15px;border-bottom:1px solid var(--line2);align-items:center}
.orow:last-child{border-bottom:0}
.orow:hover{background:#fcfcfd}

.rimg{width:58px;height:58px;border:1px solid var(--line2);border-radius:8px;
  background:var(--surf2);display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto}
.rimg img{width:100%;height:100%;object-fit:contain}
.rnoimg{font-size:11px;color:var(--mut);text-align:center;padding:2px;line-height:1.25;
  font-weight:700;letter-spacing:.02em}

.rmain{min-width:0}
.rname{display:block;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.2px;
  color:var(--ink)}
.rname:hover{color:var(--acc)}
.rsub{font-size:12.5px;color:var(--mut);margin-top:3px}
.rsub .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.rnote{font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.35}
.rtags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.rtg{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:var(--surf2);border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.rtg.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.rtg.dpf{background:var(--ok-soft);color:var(--ok);border-color:#c9e5d3}
.rtg.oem{background:var(--acl-soft);border-color:#d6e2f4;color:var(--acl);font-weight:600}
.rtg.set{background:var(--acc-soft);border-color:#f0cfcd;color:var(--acc-d)}
.rtg.more{color:var(--mut);font-weight:600}
.rapps{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.45}
.rapps .k{color:var(--mut);font-weight:600}

.rstock{font-size:13px}
.rstock b{font-weight:700;font-size:13.5px;display:block}
.rstock .tag,.rstock .tag.ok{background:none;border:0;padding:0;font-size:13.5px}
.rstock .tag.ok{color:var(--ok)}
.rstock .rmut{color:var(--mut);font-weight:600;font-size:13px}

.rprice{text-align:right}
.rp b{font-size:20px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}
.rp b.ask{font-size:13.5px;font-weight:600;color:var(--mut);letter-spacing:0}
.rp .lhint{margin-left:0;font-size:10px;padding:0 4px}
.rperl{font-size:12px;color:var(--mut);margin-top:2px}
.rprice .acts{margin-top:6px}
.rprice .acts .ab{width:30px;height:30px;font-size:14px}

/* Превключвателят редове/плочки */
.vsw{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  flex:0 0 auto}
.vsw button{border:0;background:var(--surf);padding:6px 11px;font:600 13px inherit;
  font-family:inherit;color:var(--mut);cursor:pointer;display:flex;align-items:center;gap:5px;
  transition:background .12s,color .12s}
.vsw button:hover{color:var(--ink)}
.vsw button.on{background:var(--ink);color:#fff}
/* Докато скриптът не е казал друго, се показва каквото сървърът е дал.
   ВАЖНО: при връщане към плочките решетката трябва да си остане решетка.
   Общото „display:block“ редеше картите една под друга — всяка на цял
   екран — и под лентата с бутоните се виждаше само бяло. Затова всеки
   контейнер се връща към своя си display, а не към общ. */
.gridonly{display:none}
/* Класът се казва af-plochki, а не vgrid: „vgrid“ вече е зает от
   решетката с разфасовките на страницата на Ротингер и body-то ставаше
   grid контейнер — оттам списъкът се свиваше до 220 пиксела и под
   лентата се виждаше само бяло. */
body.af-plochki .olist{display:none}
body.af-plochki .ogrid{display:grid}
body.af-plochki .grid-p{display:grid}

@media(max-width:860px){
  .orow{grid-template-columns:56px minmax(0,1fr);row-gap:9px;padding:12px 13px}
  .rimg{width:56px;height:56px}
  .rstock{grid-column:2}
  .rprice{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:12px;
    flex-wrap:wrap;border-top:1px dashed var(--line2);padding-top:10px}
  .rperl{margin:0}
  .rprice .acts{margin:0 0 0 auto}
}

/* Подсказката под полето за ЕИК. Дилърът въвежда деветте цифри и вижда
   веднага дали регистърът е намерил фирмата — иначе не разбира защо
   наименованието не се е попълнило. */
.eikhint{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;min-height:17px;
  color:var(--mut)}
.eikhint.tarsi{color:var(--mut);font-style:italic}
.eikhint.ok{color:var(--ok);font-weight:650}
.eikhint.mut{color:var(--acc-d)}

/* ═══ ФОРМАТА ЗА ПОДПИСВАНЕ НА ДОГОВОРА ═════════════════════════════════
   Дотук нямаше свои стилове: етикетите са <label> без display, значи
   стояха НА ЕДИН РЕД с полето и всяко поле почваше от различно място —
   формата изглеждаше като разсипана. Тук всеки етикет застава над своето
   поле, а полетата са с еднаква ширина. */
.agform .fl{display:block;font-size:13px;font-weight:700;color:var(--ink2);
  margin:0 0 6px;letter-spacing:.01em}
.agform .search{width:100%;display:block;font-size:15.5px;padding:11px 14px}
.agform .frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0 0 16px;
  align-items:start}
.agform .frow2 > div{min-width:0}

/* Изборът фирма / ЕТ / физическо лице — на един ред, като чипове. */
.agform .radios{flex-direction:row;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.agform .radios label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:8px;padding:9px 14px;
  font-size:14.5px;font-weight:600;color:var(--ink2);transition:all .12s}
.agform .radios label:hover{border-color:var(--mut)}
.agform .radios label:has(input:checked){border-color:var(--acc);background:var(--acc-soft);
  color:var(--acc-d)}

.agform h2{margin:0 0 6px}
.agform > .muted{margin:0 0 20px}
.agform .sigbox{margin-top:6px}
.agform .savechk2{margin:16px 0 6px;align-items:flex-start;line-height:1.5}
.agform .savechk2 input{margin-top:3px;flex:0 0 auto}
.agform .btn.wide{margin-top:14px}

/* Подсказката под ЕИК не бива да мести полето отдолу, затова ѝ пазим ред. */
.agform .eikhint{min-height:18px}

@media(max-width:700px){
  .agform .frow2{grid-template-columns:1fr;gap:14px}
  .agform .radios{flex-direction:column}
  .agform .radios label{width:100%}
}
.agform .eikhint.razlika{color:var(--acc-d);font-weight:600}
.agform .eikhint .linkbtn{font-size:12.5px;font-weight:700;padding:0;color:var(--acc);
  background:none;border:0;cursor:pointer;text-decoration:underline;font-family:inherit}

/* Полето за ЕИК с лупата до него. Търсенето тръгва по команда — при
   писане регистърът се дърпаше посред въвеждането. */
.agform .eikrow{display:flex;gap:8px;align-items:stretch}
.agform .eikrow .search{flex:1;min-width:0}
.eikbtn{flex:0 0 auto;width:46px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--surf);color:var(--ink2);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .12s;font-family:inherit}
.eikbtn:hover:not(:disabled){border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.eikbtn:disabled{opacity:.45;cursor:default;color:var(--mut)}

/* ---------- цена от доставчик на продуктовата страница ------------------
   Артикул без отметка „качи в сайта“ няма публикувана цена. На мястото на
   числото стои покана, а под нея се сипва това, което складовете отговорят
   в момента. Нарочно не прилича на редовната цена — иначе човек ще реши,
   че е същото, и ще се учуди, като му я потвърдим по друго число. */
.pricebox .askprice{font-size:19px;font-weight:700;color:var(--ink2);letter-spacing:-.2px}

.supbox{margin:10px 0 0}
.supwait{margin:10px 0 0;padding:12px 14px;border:1px dashed var(--line);
  border-radius:var(--r);background:var(--surf2);color:var(--mut);font-size:14px}
.supwait.bad{border-color:var(--acc);background:var(--acc-soft);color:var(--acc-d)}
.supwait a{color:var(--acc);font-weight:600}

.suplist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:10px}
.suprow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line2);background:var(--surf)}
.suprow:last-child{border-bottom:0}
.suprow.ok{background:var(--ok-soft)}
.supnm{min-width:0}
.supnm b{display:block;font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supnm span{font-size:12px;color:var(--mut)}
.supdl{font-size:13px;color:var(--ink2);white-space:nowrap}
.suprow.ok .supdl{color:var(--ok);font-weight:600}
.supcn{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap}
.supnote{margin:8px 2px 0;font-size:12.5px;color:var(--mut);line-height:1.5}
.supnote a{color:var(--acc);font-weight:600}

@media (max-width:560px){
  .suprow{grid-template-columns:1fr auto;row-gap:4px}
  .supdl{grid-column:1;font-size:12px}
  .supcn{grid-column:2;grid-row:1/3;align-self:center}
}

/* ---------- „ориентировъчна“ до цената --------------------------------
   Етикетът се роди, когато цената в сайта идваше право от склада и
   нощният price-guard я мърдаше. Сега публикуваната цена е закована
   (kat_site_product.price_site) и стои, докато човек не я смени — значи
   отвън няма какво да се огражда, а оградата само буди съмнение.

   Вътре обаче остава: на гишето е полезно да се вижда, че артикулът се
   доръчва и че числото е от последната доставка. Затова се показва само
   когато има влязъл дилър (html.af-dealer). Обяснението под цената —
   „поръчката за него е заявка“ — не се пипа: то е честното изречение и
   го чете всеки. */
.cenahint{display:none}
html.af-dealer .cenahint{display:inline-block}

/* ---------- уголемена снимка ------------------------------------------
   Частта се избира по детайла — по резбата, по формата на ухото. Затова
   цъкане върху снимката я отваря на цял екран, върху тъмно, без нищо
   друго наоколо. Тъмното е нарочно: белият фон на снимките на частите се
   слива с бялата страница и ръбът на детайла се губи. */
.pgalmain{position:relative}
.pgalzoom{position:absolute;right:8px;bottom:8px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink2);
  box-shadow:0 1px 4px rgba(0,0,0,.18);pointer-events:none;transition:all .12s}
.pgalmain:hover .pgalzoom{background:var(--acc);color:#fff}

.zoombox{position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:44px 16px;
  background:rgba(12,14,18,.94);cursor:zoom-out;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.zoombox.on{display:flex;animation:zfade .13s ease-out}
@keyframes zfade{from{opacity:0}to{opacity:1}}
.zoombox img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:6px;background:#fff;cursor:default;
  box-shadow:0 8px 40px rgba(0,0,0,.5)}

.zclose{position:absolute;top:12px;right:14px;width:42px;height:42px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:19px;line-height:1;cursor:pointer;transition:background .12s}
.zclose:hover{background:rgba(255,255,255,.28)}

.znav{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:70px;border:0;border-radius:8px;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;
  cursor:pointer;transition:background .12s}
.znav:hover{background:rgba(255,255,255,.26)}
.zprev{left:10px} .znext{right:10px}

.zbroi{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.8);font-size:13px;letter-spacing:.3px;
  background:rgba(0,0,0,.35);padding:4px 12px;border-radius:20px}

@media (max-width:560px){
  .zoombox{padding:56px 8px}
  .znav{width:38px;height:56px;font-size:24px}
  .zclose{top:8px;right:8px}
}

/* ── Бележка за бисквитките ──────────────────────────────────────────────
   Дискретна е нарочно: тясна лента долу вляво, не през целия екран, без
   затъмняване и без да спира четенето. Казва новина, която е в полза на
   човека („няма бисквитки"), затова няма нужда да се натрапва. */
.bisknote{
  position:fixed;left:16px;bottom:16px;z-index:60;
  max-width:420px;display:flex;align-items:center;gap:12px;
  padding:13px 14px;background:var(--surf);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14);
  font-size:.9rem;line-height:1.45;
  opacity:0;transform:translateY(12px);
  transition:opacity .32s ease,transform .32s ease}
.bisknote.on{opacity:1;transform:translateY(0)}
.bisknote p{margin:0;color:var(--mut)}
.bisknote b{color:var(--ink);font-weight:650}
.bisknote a{color:var(--acc);text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap}
.biskok{flex:none;align-self:center;padding:7px 15px;border-radius:9px;
  border:1px solid var(--line);background:var(--surf2);color:var(--ink);
  font:inherit;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.biskok:hover{background:var(--acc-soft);border-color:var(--acc)}

@media (max-width:620px){
  .bisknote{left:10px;right:10px;bottom:10px;max-width:none;
    flex-direction:column;align-items:stretch;gap:10px;padding:14px}
  .biskok{width:100%;padding:10px}
}
/* Човек, който е казал на браузъра си да не анимира, я вижда направо. */
@media (prefers-reduced-motion:reduce){
  .bisknote{transition:none;opacity:1;transform:none}
}

/* ── Въвеждащо балонче към търсачката ────────────────────────────────────
   Показва се веднъж, само на началната страница, само на нов човек. Цялата
   задача е една: да каже, че в това поле се въвежда номер на част, защото
   иначе търсачката изглежда като всяка друга и хората пишат „накладки“.

   Защо с воал: първо беше тъмно балонче без воал и се сливаше с черната
   лента и с тъмния слайдер отдолу. Воалът гаси фона за няколко секунди,
   търсачката се вдига над него и остава единственото светло нещо — окото
   отива точно където трябва. Нищо не се блокира: воалът не лови щракания
   (pointer-events:none), страницата се ползва и при отворено балонче. */
.afvoal{position:fixed;inset:0;z-index:68;background:rgba(10,14,20,.42);
  pointer-events:none;opacity:0;transition:opacity .34s ease}
.afvoal.on{opacity:1}

/* Търсачката се вдига над воала за времето на показването. Класът пада
   заедно с балончето и редът на слоевете се връща както си е бил. */
.af-vav .sbox{position:relative;z-index:70}

.afintro{
  position:absolute;z-index:72;border-radius:13px;padding:14px 16px 13px;
  background:var(--surf);color:var(--mut);border:1px solid var(--line);
  border-top:3px solid var(--acc);
  box-shadow:0 18px 44px rgba(16,24,40,.30);
  font-size:.92rem;line-height:1.45;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease}
.afintro.on{opacity:1;transform:none}
/* стрелката нагоре — същото квадратче, завъртяно на 45° */
.afintro:before{content:'';position:absolute;top:-8px;left:38px;
  width:14px;height:14px;background:var(--acc);transform:rotate(45deg);
  border-radius:2px}
.afintro b{display:block;font-size:1rem;color:var(--ink);margin-bottom:3px}
.afintro p{margin:0}
.afintro .afrow{display:flex;align-items:center;gap:12px;margin-top:11px}
.afintro .afda{border:0;border-radius:8px;padding:7px 15px;font:inherit;
  font-weight:650;cursor:pointer;background:var(--acc);color:#fff}
.afintro .afne{background:none;border:0;padding:0;font:inherit;
  font-size:.86rem;color:var(--mut);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
/* пръстенът около самото поле — казва накъде сочи стрелката */
.afglow{position:absolute;z-index:69;border-radius:10px;pointer-events:none;
  opacity:0;transition:opacity .34s ease;
  box-shadow:0 0 0 3px rgba(186,44,41,.75), 0 0 0 10px rgba(186,44,41,.22)}
.afglow.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .afintro,.afvoal,.afglow{transition:none}
}

/* ── Етикет за текуща кампания ───────────────────────────────────────────
   Показва се и на невлязъл човек, включително при марките със скрити цени.
   Точно там е най-полезен: PAKELO не може да покаже число, но може да каже
   „тече −20% до 9 октомври“ — и заключената цена от спирачка се превръща в
   повод да се влезе. Затова лентата стои НАД поканата за вход. */
.promolenta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0 0;padding:10px 13px;border-radius:11px;
  background:var(--acc-soft);border:1px solid var(--acc);
  font-size:.92rem;line-height:1.4;color:var(--ink)}
.promolenta .ppct{
  flex:none;padding:3px 9px;border-radius:7px;
  background:var(--acc);color:#fff;font-weight:700;font-size:.95rem}
.promolenta .pdo{color:var(--mut)}

/* малкият бадж по редовете и плочките в списъците */
.promobadge{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  background:var(--acc);color:#fff;font-size:.74rem;font-weight:700;
  vertical-align:middle;letter-spacing:.01em}

/* ── Pakelo No Compromise Club ───────────────────────────────────────────
   Черно и едро, нарочно различно от останалия сайт. Останалият каталог е
   светъл и делови; клубът трябва да се усеща като друго място — затова
   собствен фон, собствена типография и един-единствен герой на екрана:
   процентът. Всичко останало е по-дребно от него, без изключение.

   Картата е направена да изглежда като карта в ръка: съотношение, близко
   до банковата, закръглени ъгли, матов черен фон и тънък златист кант.
   Съзнателно НЕ е таблица — таблицата се чете като справка, картата се
   чете като притежание. */
.klhero{padding:34px 0 10px}
.kleyebrow{margin:0 0 4px;font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);font-weight:700}
.klhero h1{margin:0 0 12px;font-size:clamp(2rem,6vw,3.1rem);line-height:1.04;
  letter-spacing:-.025em}
.kllead{max-width:62ch;margin:0;color:var(--mut);font-size:1.03rem;line-height:1.6}

.klsec{margin-top:18px}
.klsec h2{margin:0 0 12px;font-size:1.22rem;letter-spacing:-.01em}
.klfine{margin:10px 0 0;color:var(--mut);font-size:.9rem;line-height:1.55}

/* стълбицата — числото вляво, обяснението вдясно */
.klsteps{display:grid;gap:10px}
.klstep{display:flex;align-items:center;gap:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surf2)}
.klsnum{flex:none;min-width:84px;font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;color:var(--ink)}
.klstx{display:flex;flex-direction:column;gap:1px;line-height:1.35}
.klstx b{font-size:.98rem}
.klstx span{color:var(--mut);font-size:.88rem}
.klsmax{background:#11151c;border-color:#11151c}
.klsmax .klsnum{color:#e8c87a}
.klsmax .klstx b{color:#fff}
.klsmax .klstx span{color:#aab2bf}

/* нивата */
.kltiers{display:grid;gap:9px}
.kltier{display:flex;flex-direction:column;gap:3px;padding:13px 15px;
  border-radius:12px;border:1px solid var(--line);background:var(--surf2)}
.kltname{font-weight:800;letter-spacing:.09em;font-size:.86rem;
  text-transform:uppercase}
.kltdesc{color:var(--mut);font-size:.9rem;line-height:1.5}
.kltier1{background:#1b1f27;border-color:#1b1f27}
.kltier1 .kltname{color:#fff}
.kltier1 .kltdesc{color:#aab2bf}
.kltier2{background:#11151c;border-color:#2a3038}
.kltier2 .kltname{color:#e8c87a}
.kltier2 .kltdesc{color:#aab2bf}
.kltier3{background:#0a0d12;border-color:#3a3220}
.kltier3 .kltname{color:#e8c87a}
.kltier3 .kltdesc{color:#c3b9a4}

/* ── самата карта ─────────────────────────────────────────────────────── */
.klpub{max-width:560px;margin:30px auto;padding:0 2px}
.klcard-slot{margin:22px 0 4px;max-width:560px}
.klkarta{
  position:relative;border-radius:18px;padding:26px 24px 20px;
  background:linear-gradient(152deg,#15191f 0%,#0a0c10 58%,#13161c 100%);
  border:1px solid #2b3139;
  box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  color:#fff;overflow:hidden}
/* тънкият златист блясък по горния кант */
.klkarta:before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,200,122,.55),transparent)}
.klktop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-bottom:16px}
.klkmarka{font-weight:800;letter-spacing:.04em;font-size:1rem}
.klkklub{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:#8d94a1}

/* процентът — най-едрото нещо на екрана, без конкуренция */
.klkpct{display:flex;align-items:flex-start;gap:2px;line-height:.86;
  margin:4px 0 2px}
.klkpct b{font-size:clamp(4.2rem,17vw,6.6rem);font-weight:800;
  letter-spacing:-.045em;color:#fff}
.klkpct i{font-style:normal;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700;
  color:#e8c87a;margin-top:.35em}
.klkpodpis{margin:0;color:#8d94a1;font-size:.84rem;letter-spacing:.03em}

.klknivo{display:inline-block;margin-top:16px;padding:5px 13px;border-radius:7px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.klknivo-black{background:rgba(255,255,255,.1);color:#fff}
.klknivo-elite{background:rgba(232,200,122,.14);color:#e8c87a;
  border-color:rgba(232,200,122,.34)}
.klknivo-no-compromise{background:#e8c87a;color:#15191f;border-color:#e8c87a}

.klkbot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  margin-top:22px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09)}
.klkime{font-size:.92rem;letter-spacing:.03em;color:#dfe3e9}
/* Номерът не се пренася: разкъсан на два реда спира да прилича на номер
   от карта и става на счупен текст. На тесен екран се смалява вместо
   да се чупи, а дългото име до него отстъпва. */
.klknum{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92rem;letter-spacing:.11em;color:#8d94a1;white-space:nowrap;flex:none}
.klkime{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.klmrtva{background:#15171a;border-color:#33383f}
.klkspr{display:block;font-size:1.3rem;font-weight:700;color:#e2635f;
  margin:10px 0 4px;line-height:1.3}
.klkspr2{margin:0;color:#8d94a1;font-size:.9rem}

/* лентата на напредъка */
.klnapred{margin:16px 2px 0}
.klnlenta{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.klnlenta i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#b99a4e,#e8c87a);transition:width .5s ease}
.klntx{margin:9px 0 0;color:var(--mut);font-size:.92rem}
.klntx b{color:var(--ink)}
.klnmax{margin-top:14px}
.klkdata{margin-top:14px}
.klkdata a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.klpublink{margin:22px 0 0;text-align:center}
.klpublink a{color:var(--mut);font-size:.9rem}

/* покана за тези без карта */
.klpokana{margin:22px 0 4px;padding:22px;border-radius:16px;
  background:#11151c;color:#fff;border:1px solid #262c34}
.klpokana h2{margin:0 0 8px;color:#fff;font-size:1.2rem}
.klpokana p{margin:0 0 14px;color:#aab2bf;line-height:1.55;font-size:.95rem}
.klpokana .btn{background:#e8c87a;color:#15191f;border:0;font-weight:700}
.klpokana .btn:hover{background:#f2d48c}

@media (max-width:560px){
  .klkarta{padding:22px 19px 17px;border-radius:16px}
  .klknum{font-size:.78rem;letter-spacing:.07em}
  .klkime{font-size:.86rem}
  .klstep{gap:10px;padding:11px 12px}
  .klsnum{min-width:70px;font-size:1.3rem}
}
/* етикетът по продуктите — малък, до реда „твоята цена“ */
.klbadge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:5px;
  background:#15191f;color:#e8c87a;font-size:.72rem;font-weight:800;
  letter-spacing:.04em;vertical-align:middle;white-space:nowrap}