/* ============================================================
   PartsPro — dizaino sistema (Megastore v2)
   Mėlyna + amber. Dvi temos: šviesi ir tamsi.

   KAIP VEIKIA TEMOS. Visos spalvos eina per kintamuosius, ir tik jie perrašomi tamsiai
   temai — nė vienas komponentas apie temą nežino ir žinoti neprivalo. Būsenos yra TRYS:

     1. <html> be data-tema  — žmogus nepasirinko, imam sistemos nustatymą
     2. data-tema="s"        — pasirinko šviesią, ir ji laimi net jei sistema tamsi
     3. data-tema="t"        — pasirinko tamsią, ir ji laimi net jei sistema šviesi

   Todėl tamsios reikšmės aprašytos DU kartus: prefers-color-scheme bloke (su apsauga
   :not([data-tema="s"]), kad rankinis pasirinkimas nugalėtų sistemą) ir data-tema="t"
   bloke. Kitaip nustatytum tamsią temą šviesioje sistemoje ir niekas nepasikeistų.

   Pasirinkimas laikomas slapuke pp.tema ir įrašomas į <html> serveryje (žr. _Layout),
   kad įkeliant nebliksėtų baltas ekranas.
   ============================================================ */
:root{
  --bg:#E9EDF2; --page:#F3F5F8; --surface:#FFFFFF; --line:#E1E6EE; --line-2:#CBD3DE;
  --ink:#0F1A2B; --ink-2:#4A5668; --ink-3:#5D6B7E;
  --blue:#0B63C4; --blue-h:#0A56AB; --blue-d:#084A93; --blue-tint:#E8F1FC; --blue-tint-2:#D3E4F8; --sky:#18AAE9;
  --amber:#F5A800; --amber-h:#E29A00; --amber-ink:#1B1300; --amber-tint:#FFF4D6;
  --green:#178A4C; --green-tint:#E4F5EA; --red:#C8362B; --red-tint:#FCE8E6;

  /* Rašalai ant atspalvių. Tamsioje temoje atspalvis tampa tamsus, tad rašalas prašvinta. */
  --amber-ink-1:#5C3D00; --amber-ink-2:#8A5B00; --amber-ink-3:#9A6400; --amber-line:#F3D89A;
  --green-ink:#0F5A30; --green-str:#12864A; --green-line:#BFE5CC;
  --red-ink:#7A1F17; --red-line:#F1B8B2; --sky-ink:#0A6E97;

  /* Prekių nuotraukos iš TecDoc ir tiekėjų yra BALTAME fone. Tamsiame puslapyje jos
     švytėtų kaip lemputės, todėl jų plytelės lieka šviesios abiejose temose. */
  --img-bg:#FFFFFF; --img-bg-2:#F3F5F8; --icon-bg:#FFFFFF; --icon-fx:none; --logo-inv:brightness(1);
  /* Paviršiai, kurie tamsūs VISADA: poraštė, pagalbos kortelė, skaitiklio burbulas. */
  --invert:#0F1A2B;
  --hdr-bg:rgba(255,255,255,.96);

  --r1:6px; --r2:10px; --r3:14px;
  --sh1:0 1px 2px rgba(15,26,43,.05),0 2px 8px rgba(15,26,43,.05);
  --sh2:0 2px 4px rgba(15,26,43,.06),0 12px 28px -6px rgba(15,26,43,.14);
  --sh3:0 4px 8px rgba(15,26,43,.06),0 28px 56px -16px rgba(15,26,43,.22);

  /* Švytėjimas. Šviesioje temoje jo nėra — „none" čia yra pilnavertė reikšmė, todėl
     taisyklės gali jį naudoti besąlygiškai ir nereikia dubliuoti selektorių. */
  --glow-blue:none; --glow-amber:none;
  --amb-1:transparent; --amb-2:transparent;
  --hdr-line:transparent;

  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"Sora","Plus Jakarta Sans",system-ui,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- TAMSI TEMA ----------
   Tamsiai mėlyna bazė, o ne juoda: firminė spalva yra mėlyna, ir fonas tai turi kartoti.
   Neutralios spalvos paslinktos į mėlyną (#0C1322, #131C2E), akcentai nesikeičia.

   Oranžinė paryškinta (#FF9F1C vietoj #F5A800): tamsiame fone senasis amber atrodo purvinas.
   Mėlyna irgi prašviesinta — #0B63C4 tamsiame fone nebeperskaitomas.
   Tikrintas kontrastas: tekstas ≥ 7:1, antriniai ≥ 4.5:1. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="s"]){
    --bg:#070C17; --page:#0C1322; --surface:#131C2E; --line:#22304A; --line-2:#33455F;
    --ink:#E8EDF6; --ink-2:#A5B2C8; --ink-3:#8595AE;
    --blue:#3D8FE8; --blue-h:#5BA5F2; --blue-d:#7FBCFF; --blue-tint:#10203A; --blue-tint-2:#1C3A5C; --sky:#35C0F5;
    --amber:#FF9F1C; --amber-h:#FFB547; --amber-ink:#1B1300; --amber-tint:#241905;
    --green:#2BAE6A; --green-tint:#0C2418; --red:#E8574C; --red-tint:#2A1210;
    --amber-ink-1:#FFD489; --amber-ink-2:#FFBE5C; --amber-ink-3:#F0A93F; --amber-line:#4A3410;
    --green-ink:#6FD3A0; --green-str:#3FCE8B; --green-line:#1D4B34;
    --red-ink:#FF9A92; --red-line:#5A2420; --sky-ink:#5CC8F0;
    --img-bg:#E8ECF2; --img-bg-2:#D8DFE8; --icon-bg:rgba(232,238,248,.16); --icon-fx:brightness(2.2) contrast(.82); --logo-inv:invert(1) brightness(1.1); --invert:#131C2E; --hdr-bg:rgba(12,19,34,.92);
    --sh1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
    --sh2:0 2px 4px rgba(0,0,0,.45),0 12px 28px -6px rgba(0,0,0,.55);
    --sh3:0 4px 8px rgba(0,0,0,.5),0 28px 56px -16px rgba(0,0,0,.7);
    --glow-blue:0 0 0 1px rgba(61,143,232,.35),0 6px 22px -6px rgba(61,143,232,.55);
    --glow-amber:0 0 0 1px rgba(255,159,28,.35),0 6px 22px -6px rgba(255,159,28,.5);
    --amb-1:rgba(61,143,232,.16); --amb-2:rgba(255,159,28,.10);
    --hdr-line:linear-gradient(90deg,transparent,rgba(61,143,232,.55) 30%,rgba(255,159,28,.45) 70%,transparent);
    color-scheme:dark;
  }
}
:root[data-tema="t"]{
  --bg:#070C17; --page:#0C1322; --surface:#131C2E; --line:#22304A; --line-2:#33455F;
  --ink:#E8EDF6; --ink-2:#A5B2C8; --ink-3:#8595AE;
  --blue:#3D8FE8; --blue-h:#5BA5F2; --blue-d:#7FBCFF; --blue-tint:#10203A; --blue-tint-2:#1C3A5C; --sky:#35C0F5;
  --amber:#FF9F1C; --amber-h:#FFB547; --amber-ink:#1B1300; --amber-tint:#241905;
  --green:#2BAE6A; --green-tint:#0C2418; --red:#E8574C; --red-tint:#2A1210;
  --amber-ink-1:#FFD489; --amber-ink-2:#FFBE5C; --amber-ink-3:#F0A93F; --amber-line:#4A3410;
  --green-ink:#6FD3A0; --green-str:#3FCE8B; --green-line:#1D4B34;
  --red-ink:#FF9A92; --red-line:#5A2420; --sky-ink:#5CC8F0;
  --img-bg:#E8ECF2; --img-bg-2:#D8DFE8; --icon-bg:rgba(232,238,248,.16); --icon-fx:brightness(2.2) contrast(.82); --logo-inv:invert(1) brightness(1.1); --invert:#131C2E; --hdr-bg:rgba(12,19,34,.92);
  --sh1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --sh2:0 2px 4px rgba(0,0,0,.45),0 12px 28px -6px rgba(0,0,0,.55);
  --sh3:0 4px 8px rgba(0,0,0,.5),0 28px 56px -16px rgba(0,0,0,.7);
  --glow-blue:0 0 0 1px rgba(61,143,232,.35),0 6px 22px -6px rgba(61,143,232,.55);
  --glow-amber:0 0 0 1px rgba(255,159,28,.35),0 6px 22px -6px rgba(255,159,28,.5);
  --amb-1:rgba(61,143,232,.16); --amb-2:rgba(255,159,28,.10);
  --hdr-line:linear-gradient(90deg,transparent,rgba(61,143,232,.55) 30%,rgba(255,159,28,.45) 70%,transparent);
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
/* overflow-x:clip ir ant html: iOS Safari „hidden" ant body vieno neužtenka — puslapis vis tiek
   leidžiasi tampomas į šoną, jei kas nors išlenda už rėmo. „clip" skirtingai nei „hidden"
   nesukuria slinkimo konteinerio, todėl nesugadina position:sticky antraštės. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
select,input{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);line-height:1.12;letter-spacing:-.01em}
p{margin:0} ul{margin:0;padding:0;list-style:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sheet{max-width:1440px;margin:0 auto;background:var(--page);box-shadow:-32px 0 64px -40px rgba(15,26,43,.18),32px 0 64px -40px rgba(15,26,43,.18),0 0 0 1px var(--line);position:relative;min-height:100vh;display:flex;flex-direction:column}
.sheet>main{flex:1}
.wrap{max-width:1360px;margin:0 auto;padding:0 24px;width:100%}
.section{padding:36px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{font-size:24px;font-weight:700}
.sec-head .sub{color:var(--ink-3);margin-top:4px;font-size:13px}
.sec-head .more{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:13px;white-space:nowrap}
.sec-head .more .ico{width:14px;height:14px;transition:transform .25s var(--ease)}
.sec-head .more:hover .ico{transform:translateX(3px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r1);font-weight:700;font-size:14px;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 16px -6px rgba(245,168,0,.6)}
.btn-amber:hover{background:var(--amber-h)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-h)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{height:34px;padding:0 12px;font-size:13px}

/* ============ utility bar ============ */
.util{background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
/* overflow:hidden — nesutilpęs turinys turi būti nukirptas juostoje, o ne stumti viso puslapio
   už ekrano ribų (taip buvo: telefone nukirsta antraštė ir dingę kalbų mygtukai) */
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:36px;gap:16px;overflow:hidden}
.util ul{display:flex;align-items:center;gap:20px;min-width:0}
.util ul.left{overflow:hidden}
/* Telefono numeris nesitraukia ir nenukerpamas niekada — juo skambina, tad jis svarbesnis
   už viską kitą juostoje. Trūkstant vietos trumpėja dešinė pusė, o ne jis. */
.util ul.left li:first-child{flex:none}
.util ul.right{flex:none}
.util .u-narrow{display:none}
.util li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.util .ico{width:14px;height:14px;color:var(--blue)}
.util b{color:var(--ink);font-weight:600}
.util .lang{display:flex;gap:2px;margin-left:4px}
.util .lang a{padding:2px 6px;border-radius:4px;font-weight:600}
.util .lang a.on{background:var(--blue-tint);color:var(--blue)}
.util .b2blink{color:var(--blue);font-weight:600}

/* ============ header ============ */
.hdr{position:sticky;top:0;z-index:30;background:var(--hdr-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 8px 24px -20px rgba(15,26,43,.25)}
/* Vidurinis stulpelis (paieška) privalo galėti trauktis — su „1fr“ jis laikėsi savo
   minimalaus pločio ir išstumdavo dešinę pusę už juostos ribų. */
.hdr>.wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:36px;height:84px}
/* Logotipas — ženklas SVG, užrašas gyvu tekstu: liks aštrus bet kokiame ekrane ir
   nesiskirs nuo likusio puslapio šrifto. */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo .lmk{width:29px;height:29px;flex:none;display:block}
.logo .lwm{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.022em;line-height:1;color:var(--ink);white-space:nowrap}
.logo .lwm i{font-style:normal;color:var(--amber)}
.logo.dark .lwm{color:#fff}
.logo img{height:38px;width:auto}
.search{position:relative;display:flex;align-items:center;height:52px;max-width:720px;width:100%;background:var(--page);border:1.5px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s,background .2s}
.search:focus-within{background:var(--surface);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.search>.ico{position:absolute;left:18px;width:20px;height:20px;color:var(--ink-3);pointer-events:none}
.search input{flex:1;height:100%;border:0;outline:none;background:transparent;padding:0 16px 0 50px;min-width:0;font-size:15px;font-family:var(--mono);font-weight:500}
.search input::placeholder{font-family:var(--font);font-weight:400;color:var(--ink-3)}
.search button{height:42px;margin:4px;padding:0 22px;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;transition:background .2s}
.search button:hover{background:var(--blue-h)}
.search button .ico{width:17px;height:17px}
.hact{display:flex;align-items:center;gap:6px;min-width:0;justify-self:end}

/* ---- kalbų mygtukas (tik siaurame ekrane) ---- */
.hlang{display:none;position:relative}
.hlang>.hbtn{gap:7px;padding:0 12px;cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.hlang>.hbtn b{font-size:13px;font-weight:700;letter-spacing:.04em}
.hlang>.hbtn[aria-expanded="true"]{background:var(--page)}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:186px;margin:0;padding:6px;
  list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(15,26,43,.28)}
.langmenu li{display:block}
.langmenu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--ink);font-size:14px}
.langmenu a b{min-width:26px;font-weight:700;color:var(--ink-2);font-size:12.5px;letter-spacing:.04em}
.langmenu a:hover{background:var(--page)}
.langmenu a.on{background:rgba(11,99,196,.08);color:var(--blue)}
.langmenu a.on b{color:var(--blue)}
.hbtn{display:flex;align-items:center;gap:11px;height:52px;padding:0 14px;border-radius:12px;white-space:nowrap;transition:background .2s,border-color .2s}
.hbtn:hover{background:var(--page)}
.hbtn .ico{width:22px;height:22px;color:var(--ink)}
.hbtn .t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.hbtn .t small{font-size:11px;color:var(--ink-3);font-weight:500}
/* Garažo užrašas būna labai ilgas („TOYOTA 4 RUNNER I (_N5_, _N6_, _N7_) 2.4 4WD
   (RN50, RN55, RN60)“), o .hbtn draudžia kėlimą. Be pločio ribos jis ištempdavo visą
   dešinę juostos pusę, ir krepšelis su suma atsidurdavo UŽ puslapio krašto. */
.hbtn .t b{font-size:13.5px;font-weight:700;display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbtn.cart .t b{max-width:none}
.garage{border:1.5px solid var(--blue-tint-2);background:var(--blue-tint);margin:0 4px}
.garage:hover{background:var(--blue-tint-2)}
.garage .ico{color:var(--blue)}
.garage .t b{color:var(--blue-d)}
.cart{position:relative}
.cart .cnt{position:absolute;top:6px;left:28px;background:var(--amber);color:var(--amber-ink);font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 0 2px var(--surface)}

/* ============ hero ============ */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;padding-top:16px;height:460px}
/* min-width:0 — tinklelio langelis pagal numatytą elgseną nesitraukia siauriau už savo turinį,
   o slaideryje guli 1600 px nuotrauka. Be šito siaurame ekrane visas titulinis tampa platesnis
   už telefoną ir dešinysis kraštas nukerpamas. */
.hero>*{min-width:0}
.slider{position:relative;border-radius:var(--r2);overflow:hidden;background:#101826;box-shadow:var(--sh1);border:1px solid var(--line);isolation:isolate}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);will-change:opacity}
.slide.on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.04);transition:transform 7s linear}
.slide.on img{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,24,.80) 0%,rgba(6,12,24,.50) 42%,rgba(6,12,24,0) 74%),linear-gradient(0deg,rgba(6,12,24,.5) 0%,rgba(6,12,24,0) 40%)}
.cap{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:40px 44px 64px;max-width:62%;color:#fff}
.cap>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.on .cap>*{opacity:1;transform:none}
.slide.on .cap>:nth-child(1){transition-delay:.15s}.slide.on .cap>:nth-child(2){transition-delay:.25s}.slide.on .cap>:nth-child(3){transition-delay:.35s}.slide.on .cap>:nth-child(4){transition-delay:.45s}
.cap .kick{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:rgba(245,168,0,.12);border:1px solid rgba(245,168,0,.35);padding:5px 10px;border-radius:4px}
.cap h1,.cap h2{font-size:36px;font-weight:800;line-height:1.1;margin:14px 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.cap p{font-size:15px;color:rgba(255,255,255,.84);max-width:36ch;line-height:1.5}
.cap .btn{margin-top:22px;align-self:flex-start}

/* ---- akcijų skaidrės: pieštos, be nuotraukų ----------------------------
   Nuotrauka akcijoje blaško — automobilis traukia žvilgsnį nuo nuolaidos ir kodo.
   Todėl fonas piešiamas CSS: jokių licencijų, tekstas gyvas, tekstą ar datą
   pakeitus gaunama kita akcija be perpiešimo. */
.slide.art{background:var(--art)}
.slide.art::after{background:linear-gradient(90deg,rgba(6,12,24,.55) 0%,rgba(6,12,24,.18) 55%,rgba(6,12,24,0) 80%)}
.slide.art .art-bg{position:absolute;inset:0;overflow:hidden}
/* įstriža juosta — nuoroda į greitį, bet be paveikslėlio */
.slide.art .art-bg::before{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:160%;transform:rotate(12deg);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));border-radius:40px}
.slide.art .art-bg::after{content:"";position:absolute;right:-14%;top:50%;transform:translateY(-50%);width:44vw;max-width:620px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,168,0,.30) 0%,rgba(245,168,0,0) 62%)}
/* didelis ženklas skaidrės gale — dekoras, ne turinys */
.slide.art .art-mark{position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:1;
  font-size:clamp(140px,19vw,280px);font-weight:800;line-height:.8;letter-spacing:-.05em;
  color:rgba(255,255,255,.09);user-select:none;pointer-events:none}

/* ---- akcijų skaidrė su nuotrauka --------------------------------------
   Nuotrauka + firminis spalvinis sluoksnis: motyvas matomas, bet nuolaida ir
   kodas lieka pirmame plane. --scrim valdo kairės pusės tamsumą — ne visos
   nuotraukos ten vienodai tamsios, o tekstas turi likti įskaitomas. */
.slide.art.shot{background:#0B1220;--scrim:.88}
.slide.art.shot img{object-position:70% 50%;filter:grayscale(.42) saturate(.9) contrast(1.06)}
.slide.art.shot .tint{position:absolute;inset:0;background:var(--art);opacity:.62;mix-blend-mode:multiply}
.slide.art.shot .art-bg{mix-blend-mode:screen}
.slide.art.shot::after{background:
  linear-gradient(90deg,rgba(6,12,24,var(--scrim)) 0%,rgba(6,12,24,calc(var(--scrim) * .74)) 38%,rgba(6,12,24,.16) 72%,rgba(6,12,24,0) 100%),
  linear-gradient(0deg,rgba(6,12,24,.55) 0%,rgba(6,12,24,0) 42%)}
.cap .until b{color:var(--amber);font-weight:700;font-variant-numeric:tabular-nums}
.slide.on .cap>:nth-child(5){transition-delay:.55s}

/* ---- Bosch akcija: paruoštas maketas -----------------------------------
   Anksčiau juosta buvo surinkta iš atskirų iškarpų CSS priemonėmis. Dabar tai viena
   dizainerio nuotrauka, todėl gyvi lieka tik du dalykai: visos skaidrės nuoroda ir
   nematomas mygtukas virš nuolaidos kodo. */
.slide.brandpromo{background:#0C1626;overflow:hidden}
.slide.brandpromo::after{content:none}
.brandpromo .promo-link{position:absolute;inset:0;display:block}
.brandpromo picture,.brandpromo img{display:block;width:100%;height:100%}
.brandpromo img{object-fit:cover;object-position:center;transform:none}

/* Kodo sritis nuotraukoje. Vietos nurodytos procentais nuo skaidrės, todėl mygtukas
   lieka ant kodo bet kokiame plotyje. Matomas tik patvirtinimas — pati nuotrauka jau
   rodo, kad tai kodas, o antras rėmelis tik trukdytų. */
.brandpromo .promo-code{position:absolute;left:4.2%;top:61.5%;width:14.5%;height:9.5%;
  border-radius:10px;cursor:pointer;z-index:3;background:transparent;transition:background .18s}
.brandpromo .promo-code:hover{background:rgba(255,255,255,.08)}
.brandpromo .promo-code:focus-visible{outline:2px solid #fff;outline-offset:2px}
.brandpromo .promo-code span{display:none;position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  white-space:nowrap;background:var(--green);color:#fff;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:8px}
.brandpromo .promo-code.ok span{display:block}

/* ---- akcijų skaidrė baltame fone --------------------------------------
   Prekės nuotrauka dešinėje, tekstas kairėje. Baltas fonas parodo pačią dalį
   taip, kaip ji atrodo kataloge, ir nereikia tamsinti nuotraukos po tekstu. */
.slide.light{background:linear-gradient(105deg,var(--surface) 0%,var(--surface) 52%,var(--page) 100%)}
.slide.light::after{content:none}
.slide.light .cap{color:var(--ink);max-width:56%}
.slide.light .cap h2,.slide.light .cap .deal span{color:var(--ink);text-shadow:none}
.slide.light .cap p{color:var(--ink-2)}
.slide.light .cap .kick{color:var(--amber-ink-2);background:var(--amber-tint);border-color:rgba(245,168,0,.5)}
.slide.light .cap .code{color:var(--ink);background:var(--surface);border:1.5px dashed var(--line-2, #D6DEEA)}
.slide.light .cap .until{color:var(--ink-3)}
/* Prekės nuotrauka. Katalogo nuotraukos yra JPG su savo baltu fonu, todėl ant spalvoto
   fono matytųsi stačiakampio kraštas — dedam ją į sąmoningą baltą kortelę su šešėliu. */
.promo-part{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:1;
  width:min(34%,300px);aspect-ratio:1;display:grid;place-items:center;padding:22px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 26px 48px -22px rgba(15,26,43,.28)}
.promo-part img{width:100%;height:100%;object-fit:contain}
/* šviesioje skaidrėje valdikliai turi būti tamsūs — baltų ant balto nesimato */
.slider.on-light .dot{background:rgba(15,26,43,.16)}
.slider.on-light .arrow{background:rgba(15,26,43,.06);border-color:var(--line);color:var(--ink-2)}
.slider.on-light .arrow:hover{background:rgba(15,26,43,.12)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tags span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px}

.cap .deal{display:flex;align-items:center;gap:16px;align-self:flex-start;margin:12px 0 4px}
.cap .deal b{flex:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:var(--amber);color:var(--amber-ink);font-size:24px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 8px 26px rgba(245,168,0,.38)}
.cap .deal span{font-size:34px;font-weight:800;line-height:1.06;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.cap .promo{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.cap .code{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:6px;
  font:700 15px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.14em;color:#fff;
  background:rgba(255,255,255,.10);border:1.5px dashed rgba(255,255,255,.55)}
.cap .code small{font:600 11px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cap .until{font-size:13.5px;color:rgba(255,255,255,.78)}
.sctl{position:absolute;left:44px;right:44px;bottom:20px;z-index:3;display:flex;align-items:center;justify-content:space-between}
.dots{display:flex;gap:8px}
.dot{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.dot i{position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left;display:block}
.arrows{display:flex;gap:8px}
.arrow{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s,transform .2s var(--ease)}
.arrow:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.arrow .ico{width:16px;height:16px}
.hchip{position:absolute;z-index:3;right:24px;bottom:22px;display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(12px);font-size:13px;color:#fff}
.hchip i{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.92);color:var(--invert);display:grid;place-items:center}
.hchip i .ico{width:16px;height:16px}
.hchip small{display:block;font-size:10.5px;color:rgba(255,255,255,.72);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.hchip b{font-weight:600}
.js .hchip{animation:floaty 4s ease-in-out 1s infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.hcol{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px}
/* tas pats, kas ir .hero: be min-width:0 langelis nesitraukia siauriau uz turini (kodu ženkliukai
   yra nowrap), ir dešinysis stulpelis išplečia visą titulinį už telefono ekrano ribų */
.hcol>*{min-width:0}
.tile{position:relative;border-radius:var(--r2);border:1px solid var(--line);box-shadow:var(--sh1);padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.tile.srch{background:linear-gradient(160deg,var(--surface) 0%,var(--blue-tint) 100%)}
.tile.garage-t{background:linear-gradient(160deg,var(--surface) 0%,var(--amber-tint) 100%)}
.thead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.thead .ttl{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-d)}
.tile.garage-t .thead .ttl{color:var(--amber-ink-2)}
.thead .ttl .ico{width:16px;height:16px}
.thead .tag{font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);padding:3px 8px;border-radius:6px}
.thead .lnk{font-size:12.5px;font-weight:700;color:var(--blue)}
.sform{display:flex;gap:8px}
.field{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:var(--r1);background:var(--surface);border:1.5px solid var(--line-2);transition:box-shadow .2s,border-color .2s}
.field:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.field .ico{width:16px;height:16px;color:var(--ink-3)}
.field input{flex:1;border:0;outline:none;background:none;font-family:var(--mono);font-size:13.5px;min-width:0}
.field input::placeholder{font-family:var(--font);color:var(--ink-3)}
.sform .btn{height:44px}
.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.chip-code{font-family:var(--mono);font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:background .2s,transform .2s var(--ease),border-color .2s}
.chip-code:hover{background:var(--surface);border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.sel2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fld{position:relative}
.fld label{position:absolute;left:12px;top:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);pointer-events:none}
.fld select{appearance:none;-webkit-appearance:none;width:100%;height:46px;border:1.5px solid var(--line-2);border-radius:var(--r1);background:var(--surface);padding:14px 34px 0 12px;font-weight:600;font-size:14px;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.fld select:hover{border-color:var(--blue)}
.fld select:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.fld select:disabled{color:var(--ink-3);background:var(--page);cursor:not-allowed}
.fld .ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--ink-3);pointer-events:none}
.tile .btn{width:100%;height:46px;margin-top:auto}

/* ============ greita paieška ============ */
.quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.quick>*{min-width:0}
.qcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh1);padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px 16px;align-items:center;overflow:hidden;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.qcard:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.qcard .qh{grid-column:1;display:flex;align-items:center;gap:10px}
.qcard .qh .ic{width:34px;height:34px;border-radius:8px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;flex:none}
.qcard .qh .ic .ico{width:18px;height:18px}
.qcard .qh b{display:block;font-family:var(--display);font-size:15px;font-weight:700;line-height:1.15}
.qcard .qh small{font-size:12px;color:var(--ink-3)}
.qcard .qim{grid-column:2;grid-row:1/3;height:112px;display:grid;place-items:center;overflow:hidden;background:var(--icon-bg);padding:8px 10px}
.qcard .qim img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(15,26,43,.16));transition:transform .5s var(--ease)}
.qcard:hover .qim img{transform:translateY(-3px) scale(1.04)}
.qcard form{grid-column:1;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px;align-items:end}
.qcard .fld select{height:44px;font-size:13px}
.qcard .fld label{font-size:9.5px;top:5px}
.qcard .btn{height:44px;padding:0 16px}
.qcard .btn .ico{width:16px;height:16px}
.usp{display:flex;gap:12px;margin-top:16px}
.usp>div,.usp>a{flex:1;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:12px 14px;font-size:13px;box-shadow:var(--sh1)}
.usp .ico{width:24px;height:24px;color:var(--blue);flex:none}
.usp b{display:block;font-weight:700;font-size:13px}
.usp span{color:var(--ink-3);font-size:12px}
/* Siuntimo į užsienį plytelė yra nuoroda į skaičiuoklę — atrodo lygiai kaip kitos,
   tik rodo, kad spaudžiama. */
.usp>a.usp-i{color:inherit;text-decoration:none}
.usp>a.usp-i:hover{border-color:var(--blue)}

/* ============ kategorijos ============ */
.cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ctile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:8px 10px 8px 8px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh1);min-height:58px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.ctile:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--blue-tint-2)}
.ctile .im{width:42px;height:42px;flex:none;border-radius:6px;background:var(--icon-bg);display:grid;place-items:center;overflow:hidden;padding:2px}
.ctile .im img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s var(--ease)}
.ctile:hover .im img{transform:scale(1.1)}
.ctile b{font-size:12.5px;font-weight:600;line-height:1.25;display:block;color:var(--ink)}
.ctile .ico{width:14px;height:14px;margin-left:auto;color:var(--ink-3);flex:none;transition:transform .2s var(--ease),color .2s}
.ctile:hover .ico{transform:translateX(2px);color:var(--blue)}

/* ============ prekių kortelės ============ */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh1);position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:var(--blue-tint-2)}
.pcard .pim{aspect-ratio:1;background:var(--img-bg);border-radius:var(--r1);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid var(--page)}
.pcard .pim img{max-width:100%;max-height:100%;mix-blend-mode:multiply;transition:transform .35s var(--ease)}
.pcard .pbrand{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.pcard .name{font-size:13.5px;font-weight:600;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .nr{font-size:11.5px;color:var(--ink-3)}
.stock{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--green-tint)}
.stock.low{color:var(--amber-ink-3)}.stock.low::before{box-shadow:0 0 0 3px var(--amber-tint)}
.stock.none{color:var(--ink-3)}.stock.none::before{box-shadow:0 0 0 3px var(--line)}

/* Musu sandelio zenklas. Tasko pries tekstas cia nereikia — zenklas pats uz ji stipresnis,
   o du signalai greta pradeda konkuruoti tarpusavyje.
   Vardas — STOCK: tiekejo pavadinimas klientui nerodomas niekada. */
.stock.stock-now::before{display:none}
.stock.stock-now{color:var(--green);gap:7px}
.stk-zenklas{display:inline-flex;align-items:center;letter-spacing:.08em;font-size:10px;font-weight:800;
             padding:2px 7px;border-radius:5px;color:#fff;background:var(--green);
             box-shadow:0 1px 2px rgba(23,138,76,.28)}

/* Dalys is tiekeju, kurie likuciu neteikia: terminas yra planas, o ne pazadas.
   Ramus gelsvas tonas, ne raudonas — tai ne klaida ir ne ispejimas apie bloga dali,
   o sqziningas pasakymas, kada butent paaiskes, ar gausime. */
.pagal-uzsak{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:10px 12px;
             background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:var(--r2);
             font-size:12.5px;line-height:1.45;color:var(--amber-ink-1)}
.pagal-uzsak .ico{width:16px;height:16px;flex:none;margin-top:1px}
/* Trumpas priedas prie termino saraso eilutese ir krepselyje — vietos ten maza. */
.pu{color:var(--amber-ink-3);font-weight:600}

/* "Yra sandelyje" — pulsuojantis zalias tasktukas. Tai vienintelis dalykas, kuris skiria
   ta pacia dali, isvaziuojancia siandien, nuo laukiamos is gamintojo dvi savaites,
   todel jis turi buti pastebimas nezvelgiant. Judesio nenorintiems — issijungia pats. */
.stock.in-stock{color:var(--green-str);font-size:13.5px;font-weight:800;justify-content:flex-end}
.stock.in-stock::before{display:none}
.stock.in-stock .dot{width:9px;height:9px;border-radius:50%;background:var(--green-str);box-shadow:0 0 0 0 rgba(18,161,80,.6);animation:stockPulse 1.8s ease-out infinite;flex:none}
@keyframes stockPulse{
  0%{box-shadow:0 0 0 0 rgba(18,161,80,.55)}
  70%{box-shadow:0 0 0 8px rgba(18,161,80,0)}
  100%{box-shadow:0 0 0 0 rgba(18,161,80,0)}
}
@media (prefers-reduced-motion:reduce){.stock.in-stock .dot{animation:none}}
.pcard .pr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.pcard .vat{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.01em}
.pcard .net{font-size:11.5px;color:var(--ink-3);text-align:right;line-height:1.2}
.pcard .add{height:36px;border-radius:var(--r1);background:var(--blue-tint);color:var(--blue-d);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,color .2s}
.pcard .add .ico{width:16px;height:16px}
.pcard:hover .add{background:var(--blue);color:#fff}

/* ============ markės ============ */
.brands{display:grid;grid-template-columns:repeat(9,1fr);gap:12px}
.brand{background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);height:74px;display:grid;place-items:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.brand img{width:44px;height:44px;object-fit:contain;filter:grayscale(1) var(--logo-flip,brightness(1));opacity:.85;transition:filter .3s,opacity .3s,transform .3s var(--ease)}
.brand:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--blue-tint-2)}
.brand:hover img{filter:var(--logo-flip,brightness(1));opacity:1;transform:scale(1.08)}

/* Tamsūs logotipai.

   Dauguma markių logotipų nupiešti šviesia spalva ir ant juodo skaitosi puikiai, bet keli —
   tamsia, ir tokie ant juodo fono tiesiog dingsta. Šie septyni IŠMATUOTI, o ne parinkti iš
   akies: dekodavus PNG suskaičiuotas nepermatomų taškelių vidutinis šviesumas, ir į sąrašą
   pateko visi, kurių jis mažesnis nei 90 iš 255 — Lexus 0, BMW Moto 33, OEM 36, Škoda 47,
   Subaru 50, Mitsubishi 50, Kia 66.

   --logo-inv šviesioje temoje yra brightness(1), t. y. nieko nedaro. Todėl šis sąrašas
   šviesiam puslapiui įtakos neturi, ir selektorių dubliuoti temoms nereikia. */
.brand img[src$="/skoda.png"], .brand img[src$="/mitsubishi.png"], .brand img[src$="/kia.png"],
.brand img[src$="/lexus.png"], .brand img[src$="/bmwmoto.png"], .brand img[src$="/subaru2.png"],
.brand img[src$="/oem3.png"]{ --logo-flip:var(--logo-inv) }

/* ============ B2B ============ */
.b2b{margin-top:36px;background:linear-gradient(120deg,var(--surface) 0%,var(--blue-tint) 100%);border:1px solid var(--blue-tint-2);border-radius:var(--r3);display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:36px 40px;position:relative;overflow:hidden;box-shadow:var(--sh1)}
.b2b::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(24,170,233,.18),rgba(24,170,233,0))}
.b2b .kick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.b2b h2{font-size:28px;font-weight:800;margin-bottom:12px}
.b2b p{color:var(--ink-2);font-size:14.5px;max-width:52ch}
.b2b ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:20px 0 24px}
.b2b li{display:flex;gap:10px;font-size:13.5px;font-weight:500;align-items:flex-start}
.b2b li .ico{width:18px;height:18px;color:var(--green);margin-top:1px}
.b2b .acts{display:flex;gap:10px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:center;position:relative;z-index:1}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:20px 22px;box-shadow:var(--sh1)}
.stat .v{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--blue-d);display:flex;align-items:baseline;gap:4px}
.stat .v small{font-size:16px;font-weight:700;color:var(--blue)}
.stat .l{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:500}

/* ============ footer ============ */
.foot{margin-top:56px;background:var(--invert);color:rgba(255,255,255,.78)}
.foot .top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px;padding:44px 0 36px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot .flogo .logo{margin-bottom:16px}
.foot .flogo .logo .lmk{width:32px;height:32px}
.foot .flogo .logo .lwm{font-size:25px}
.foot .flogo p{font-size:13px;line-height:1.6;max-width:32ch;color:rgba(255,255,255,.62)}
.foot h4{font-family:var(--font);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.foot li a{display:block;padding:4px 0;font-size:13.5px;transition:color .15s,transform .2s var(--ease)}
.foot li a:hover{color:#fff;transform:translateX(3px)}
.foot .ct li{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:13.5px}
.foot .ct .ico{width:16px;height:16px;color:var(--sky);margin-top:2px}
.foot .ct b{color:#fff;font-weight:600}
.pays{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:22px 0}
.pays span{font-size:12px;color:rgba(255,255,255,.5);margin-right:6px;font-weight:600}
.pays .pay{background:var(--img-bg);border-radius:6px;height:36px;padding:0 12px;display:grid;place-items:center}
.pays .pay img{height:18px;width:auto;max-width:90px;object-fit:contain}
.pays .pay.card img{height:26px}
.foot .bot{display:flex;justify-content:space-between;align-items:center;gap:12px 26px;padding:16px 0 22px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.5);flex-wrap:wrap}
.foot .bot a:hover{color:#fff}

/* ============ paieškos rezultatai ============ */
.crumbs{display:flex;gap:8px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap;padding:18px 0 14px}
.crumbs a:hover{color:var(--blue)}
.rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.rhead h1{font-size:24px;font-weight:800}
.rhead h1 .q{font-family:var(--mono);color:var(--blue);font-weight:600}
.rhead .cnt{color:var(--ink-3);font-size:13px;margin-top:4px}
.results{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:16px;position:sticky;top:100px;box-shadow:var(--sh1)}
.rail .grp+.grp{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.rail .t{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.chk{display:flex;align-items:center;gap:9px;padding:4px 0;cursor:pointer;font-size:13px}
.chk input{width:15px;height:15px;accent-color:var(--blue)}
.chk .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:3px;gap:2px}
.seg button{padding:6px 12px;border-radius:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:96px minmax(0,1fr) 160px 180px;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r1);padding:12px 14px;box-shadow:var(--sh1);transition:box-shadow .2s,border-color .2s}
.row:hover{box-shadow:var(--sh2)}
.row.fits{border-left-color:var(--green)}
.row.oem{border-left-color:var(--blue)}
.row.noprice{opacity:.75}
.row .im{height:82px;display:grid;place-items:center;background:var(--img-bg);border:1px solid var(--page);border-radius:var(--r1);padding:6px;overflow:hidden}
.row .im img{max-height:70px;max-width:100%;mix-blend-mode:multiply}
.row .im .ph{width:34px;height:34px;color:var(--line-2)}
.row .t1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.row .mfr{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--blue)}
.row .name{font-size:14.5px;font-weight:600}
.row .tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid var(--line);color:var(--ink-3)}
.row .tag.oe{color:var(--blue-d);border-color:var(--blue-tint-2);background:var(--blue-tint)}
.row .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--ink-3)}
.row .meta b{font-family:var(--mono);font-weight:500;color:var(--ink-2)}
.row .fit{margin-top:6px;font-size:11.5px;color:var(--green);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.row .fit .ico{width:12px;height:12px}
.row .deliv{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.row .buy{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.row .price{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1}
.row .price small{display:block;font-family:var(--font);font-size:11px;font-weight:400;color:var(--ink-3);margin-top:3px;letter-spacing:0}
.row .price .old{text-decoration:line-through;color:var(--ink-3);font-size:13px;font-weight:500;margin-right:6px}
.row .noprice-t{font-size:12.5px;color:var(--ink-3);text-align:right}
.buyline{display:flex;align-items:center;gap:8px}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r1);overflow:hidden;background:var(--surface)}
.qty button{width:28px;height:34px;color:var(--ink-2);font-size:15px}
.qty button:hover{background:var(--page)}
.qty input{width:36px;height:34px;text-align:center;border:0;background:transparent;font-family:var(--mono);font-size:13px;outline:none}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none}
.empty{padding:40px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r2);color:var(--ink-3);background:var(--surface)}

/* ============ motion ============ */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .slide img{transform:none}
}

/* ============ responsive ============ */
@media (max-width:1280px){
  .hero{grid-template-columns:1fr 360px}
  .cap h1,.cap h2{font-size:32px}
  .pgrid{grid-template-columns:repeat(5,1fr)}
  .cgrid{grid-template-columns:repeat(5,1fr)}
  .brands{grid-template-columns:repeat(7,1fr)}
}
@media (max-width:1100px){
  .hdr>.wrap{gap:20px}
  .hbtn:not(.garage) .t{display:none}
  .hero{grid-template-columns:1fr;height:auto}
  .slider{min-height:400px}
  .hcol{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .quick{grid-template-columns:1fr}
  .cgrid{grid-template-columns:repeat(4,1fr)}
  .b2b{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(4,1fr)}
  .foot .top{grid-template-columns:1fr 1fr 1fr}
  .foot .flogo{grid-column:1/-1}
  .results{grid-template-columns:1fr}
  .rail{position:static}
}
@media (max-width:860px){
  /* siaurame ekrane tekstas užima visą plotį, tad tamsinti reikia visą kadrą */
  .slide.art.shot{--scrim:.92}
  .slide.art.shot::after{background:
    linear-gradient(90deg,rgba(6,12,24,.92) 0%,rgba(6,12,24,.82) 55%,rgba(6,12,24,.64) 100%),
    linear-gradient(0deg,rgba(6,12,24,.62) 0%,rgba(6,12,24,0) 45%)}
  .slide.art.shot img{object-position:60% 50%}
  .cap .deal b{width:62px;height:62px;font-size:20px}
  .cap .deal span{font-size:26px}
  .util ul.left li:nth-child(2){display:none}
  /* kalbos keliauja į antraštės mygtuką — viršutinėje juostoje jos netelpa ir išplečia puslapį */
  .util .lang{display:none}
  .hlang{display:block}

  /* Akcijos juosta telefone. Plačiame ekrane turinys telpa, siaurame — ne: tekstas išaugdavo
     už skaidrės ribų, todėl nuolaidos ženklas būdavo nukirstas, o ženkliukai išsidėstydavo
     po vieną eilutėje. Todėl čia: tekstas nuo viršaus, nuotrauka maža kampe, ženkliukų mažiau. */
  .slide.light .cap{max-width:100%;justify-content:flex-start;padding:18px 18px 52px}
  .slide.light .cap .deal{margin:10px 0 2px;gap:12px}
  .slide.light .cap .deal b{width:54px;height:54px;font-size:17px}
  .slide.light .cap .deal span{font-size:22px}
  .slide.light .cap p{font-size:13.5px;max-width:none}
  .slide.light .tags{gap:6px;margin-top:10px}
  .slide.light .tags span{font-size:11.5px;padding:5px 9px}
  .slide.light .tags span:nth-child(n+4){display:none}
  .slide.light .promo{margin-top:12px}
  .slide.light .cap .btn{margin-top:14px}
  .promo-part{width:112px;right:14px;top:16px;bottom:auto;transform:none;padding:10px;border-radius:14px}
  .hdr>.wrap{grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:auto;padding-top:12px;padding-bottom:12px;gap:12px 16px}
  .search{grid-column:1/-1;max-width:none}
  .hact{justify-self:end}
  .hcol{grid-template-columns:1fr}
  .slider{min-height:380px}
  .qcard{grid-template-columns:1fr}
  .qcard .qim{display:none}
  .qcard form{grid-template-columns:1fr 1fr}
  .qcard .btn{grid-column:1/-1}
  .cap{max-width:80%;padding:28px 28px 60px}
  .cap h1,.cap h2{font-size:28px}
  .sctl{left:28px;right:28px}
  .usp{display:grid;grid-template-columns:1fr 1fr}
  .cgrid{grid-template-columns:repeat(3,1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .brands{grid-template-columns:repeat(5,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .b2b{padding:28px 24px}
  .b2b ul{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .row{grid-template-columns:72px minmax(0,1fr)}
  .row .st,.row .buy{grid-column:1/-1}
  .row .buy{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (max-width:560px){
  /* dar siauriau: nuotraukai vietos nebelieka — svarbiau, kad tekstas ir kodas būtų skaitomi.
     Slaideris kiek aukštesnis: akcijos turinys šiame plotyje netilpdavo ir mygtuko kraštas būdavo nukirstas. */
  .slider{min-height:492px}
  .promo-part{display:none}
  /* pilnas sakinys apie pristatymą čia nebetelpa šalia telefono — rodom trumpinį */
  .util .u-wide{display:none}
  .util .u-narrow{display:flex}
  .slide.light .cap{padding:18px 18px 50px}
  .slide.light .tags{margin-top:8px}
  .slide.light .cap .btn{margin-top:12px}
  .slide.light .cap .deal span{font-size:24px}
  .slide.light .tags span:nth-child(n+4){display:inline-flex}
  .wrap{padding:0 16px}
  .util ul.left li:nth-child(3){display:none}
  .util .b2blink{display:none}
  .search button span{display:none}
  .search button{padding:0 14px}
  .garage .t{display:none}
  .hbtn{padding:0 10px}
  .slider{min-height:400px}
  .sel2{grid-template-columns:1fr}
  .cap{max-width:100%;padding:24px 20px 64px}
  .cap h1,.cap h2{font-size:26px}
  .cap p{font-size:14px}
  .sctl{left:20px;right:20px}
  .usp{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr 1fr}
  .ctile b{font-size:12px}
  .pgrid{grid-template-columns:1fr 1fr}
  .brands{grid-template-columns:repeat(4,1fr)}
  .stat .v{font-size:28px}
  .b2b h2{font-size:24px}
  .foot .top{grid-template-columns:1fr 1fr}
}

/* TecAlliance TecDoc Inside — sutartinis ženklas ir autorių teisių pastaba */
.tdin{display:flex;align-items:center;gap:16px;padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.1)}
.tdin .signet{display:inline-flex;flex-direction:column;line-height:1.05;padding:8px 12px;border-radius:8px;background:var(--surface);color:var(--ink);flex:none;border-left:5px solid #E2001A}
.tdin .signet b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#E2001A;font-weight:800}
.tdin .signet i{font-style:normal;font-family:var(--display);font-weight:800;font-size:15px}
.tdin small{font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.5;max-width:80ch}
.sitemsg{background:var(--amber);color:var(--amber-ink);font-size:13.5px;font-weight:600}
.sitemsg .wrap{display:flex;align-items:center;gap:10px;min-height:36px;padding-top:6px;padding-bottom:6px}
.sitemsg .ico{width:16px;height:16px;flex:none}

@media (max-width:700px){
  /* Telefonui atskira vertikali nuotrauka, todėl skaidrės aukštis sekamas iš jos proporcijų —
     taip niekas nenukerpama nei viršuje, nei apačioje, kad ir koks būtų telefono plotis. */
  .slider{min-height:0;aspect-ratio:1024/1536}
  .brandpromo .promo-code{left:5.5%;top:43.2%;width:25%;height:4.6%}
}

/* ---- „Svetainių kūrimas“ — užklausa poraštėje ------------------------------
   Mygtukas poraštėje atidaro langą su trumpa forma. Langas įkeliamas su puslapiu,
   bet paslėptas, todėl nereikia nei papildomos užklausos, nei laukimo paspaudus. */
.wsol-open{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;opacity:.62;transition:opacity .18s;white-space:nowrap}
.wsol-open:hover{opacity:1}
.wsol-open i{width:8px;height:8px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 32%, #FFD27A, var(--amber) 62%, #C98600);
  box-shadow:0 0 0 3px rgba(245,168,0,.16)}
.wsol{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(9,16,28,.62);backdrop-filter:blur(3px);animation:wsolIn .2s var(--ease)}
@keyframes wsolIn{from{opacity:0}to{opacity:1}}
.wsol-card{position:relative;width:min(100%,540px);max-height:92vh;overflow:auto;background:var(--surface);
  border-radius:var(--r3);box-shadow:var(--sh3);padding:30px 30px 26px}
.wsol-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-3);transition:background .18s,color .18s}
.wsol-x:hover{background:var(--page);color:var(--ink)}
.wsol-card .kick{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-tint);border-radius:999px;padding:5px 11px}
.wsol-card h3{font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.02em;margin:12px 0 8px}
.wsol-card>p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.wsol-list{display:flex;flex-direction:column;gap:8px;margin:16px 0 20px}
.wsol-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.wsol-list .ico{width:17px;height:17px;color:var(--green);flex:none}
.wsol form{display:flex;flex-direction:column;gap:10px}
.wsol-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.wsol input,.wsol textarea{width:100%;border:1.5px solid var(--line-2);border-radius:var(--r2);padding:12px 14px;
  font-size:14.5px;background:var(--surface);color:var(--ink);transition:border-color .18s,box-shadow .18s}
.wsol input:focus,.wsol textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.wsol textarea{resize:vertical;min-height:64px;font-family:inherit}
.wsol form .btn{align-self:flex-start;margin-top:2px}
.wsol-msg{font-size:13.5px;font-weight:600;margin-top:2px}
.wsol-msg.ok{color:var(--green)} .wsol-msg.bad{color:var(--red)}
@media (max-width:560px){
  .wsol-card{padding:24px 20px 20px}
  .wsol-card h3{font-size:22px}
  .wsol-row{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  /* Telefone titulinis darėsi per ilgas: automobilio parinkiklis garaže ir markių logotipai
     jau veda į tą patį katalogą, o ši tekstinė markių juosta tik verčia slinkti. Google jos
     neprarandama — /dalys ir /dalys/{markė} lieka svetainės žemėlapyje ir poraštėje. */
  .vmakes-sec{display:none}
}

/* ---- Prekės nuotraukos peržiūra ---------------------------------------
   Sąraše žymeklis rodo didinamąjį stiklą; paspaudus nuotrauka atsiveria per visą ekraną. */
.imgv{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:32px;
  background:rgba(9,16,28,.82);animation:imgvIn .18s var(--ease);cursor:zoom-out}
@keyframes imgvIn{from{opacity:0}to{opacity:1}}
.imgv img{max-width:min(92vw,1000px);max-height:88vh;width:auto;height:auto;object-fit:contain;
  background:var(--surface);border-radius:var(--r2);box-shadow:0 24px 80px rgba(0,0,0,.5);padding:12px;cursor:default}
.imgv-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;transition:background .18s}
.imgv-x:hover{background:rgba(255,255,255,.24)}
.imgv-x .ico{width:22px;height:22px}
@media(max-width:560px){
  .imgv{padding:16px}
  .imgv img{max-width:94vw;max-height:80vh;padding:8px}
  .imgv-x{top:10px;right:10px;width:40px;height:40px}
}

/* ---- Visa rezultato eilutė — nuoroda į prekę ---------------------------
   Anksčiau prekę atidarydavo tik mažas pavadinimo tekstas, ir to nebuvo iš ko suprasti.
   Pavadinimo nuoroda ištempiama per visą kortelę, o mygtukai ir nuotrauka pakeliami virš jos,
   kad kiekis, „Į krepšelį“ ir nuotraukos peržiūra veiktų kaip anksčiau. */
.row{position:relative}
.row .name::after{content:"";position:absolute;inset:0;z-index:0}
.row:hover{border-color:var(--line-2);box-shadow:var(--sh2)}
.row .im,.row .qty,.row .btn,.row form,.row .stock,.row .deliv,.row .price{position:relative;z-index:1}
.row .im{cursor:zoom-in}
.row [data-ask]{position:relative;z-index:1}

/* ---- Užklausa apie dalį, kurios tiekėjas neturi ------------------------
   62 % tiekėjo kainoraščio eilučių likutis yra nulis. Tokių į krepšelį nededam,
   bet ir neslepiam: kaina matosi, o vietoj „Į krepšelį“ — „Užklausti“.
   Mygtukas tylus (ne oranžinis): jis nėra pirkimas, o klausimas. */
.ask{white-space:nowrap}
.ask-lnk{display:inline-block;color:var(--blue);font-weight:600;cursor:pointer;background:none;border:0;padding:0}
.ask-lnk:hover{text-decoration:underline}

.uzkl{border:0;padding:0;border-radius:var(--r3);box-shadow:var(--sh3);max-width:560px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)}
.uzkl::backdrop{background:rgba(15,26,43,.5);backdrop-filter:blur(2px)}
.uzkl-in{padding:22px 24px 24px}
.uzkl header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.uzkl h2{font-size:19px;font-weight:800;letter-spacing:-.015em}
.uzkl .x{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.uzkl .x:hover{background:var(--page);color:var(--ink)}

.uzkl-preke{background:var(--page);border:1px solid var(--line);border-radius:var(--r2);padding:11px 13px;margin-bottom:16px}
.uzkl-preke b{display:block;font-size:14px;margin-bottom:3px}
.uzkl-preke span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}

.uzkl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.uzkl-grid .wide{grid-column:1/-1}
.uzkl-act{display:flex;gap:10px;margin-top:18px}
.uzkl-act .btn{flex:1;height:46px}
.uzkl-note{display:block;margin-top:10px;font-size:11.5px;color:var(--ink-3);text-align:center}

/* Patvirtinimas po persikrovimo — trumpam, apačioje, nekliudo toliau naršyti. */
.uzkl-ok{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
         display:flex;align-items:center;gap:9px;max-width:min(560px,calc(100% - 24px));
         background:var(--green);color:#fff;font-size:13.5px;font-weight:600;line-height:1.45;
         padding:12px 18px;border-radius:999px;box-shadow:var(--sh3)}
.uzkl-ok.bad{background:var(--red)}
.uzkl-ok .ico{width:17px;height:17px;flex:none}

@media (max-width:560px){ .uzkl-grid{grid-template-columns:1fr} }

/* ============================================================
   TEMOS EFEKTAI IR JUNGIKLIS

   Visos taisyklės čia naudoja kintamuosius, kurių šviesioje temoje reikšmė yra „none"
   arba „transparent". Todėl selektorių dubliuoti nereikia: šviesiame puslapyje jos tiesiog
   nieko nenupiešia, o tamsiame įsijungia pačios.
   ============================================================ */

/* Foninė šviesa: mėlyna iš kairės, oranžinė iš dešinės, puslapio viršuje.

   Piešiama kaip paties body fono paveikslėlis, o ne atskiru ::before sluoksniu. Taip
   sąmoningai: sluoksnis reikalautų position:relative visiems body vaikams, o tai pakeistų
   konteinerį kiekvienam absoliučiai pozicionuotam elementui puslapyje — ir dalis jų nušoktų
   ne ten. Fonas tokios rizikos neturi visai.

   Šviesioje temoje --amb-* yra permatomi, tad nenupiešiama nieko. */
body{
  background-image:
    radial-gradient(760px 420px at 12% 0%, var(--amb-1), transparent 62%),
    radial-gradient(680px 380px at 92% 0%, var(--amb-2), transparent 60%);
  background-repeat:no-repeat;
}

/* Antraštės apačioje — plona mėlyna→oranžinė linija. Tamsiame fone ji atskiria antraštę
   nuo turinio geriau nei bet koks šešėlis. Antraštė jau yra position:sticky, o sticky
   veikia ir kaip relative, tad pozicionavimo čia nekeičiam — kitaip sulipdytum ją. */
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hdr-line);pointer-events:none}

/* Mygtukų švytėjimas. Šviesioje temoje --glow-* yra „none", tad box-shadow tiesiog dingsta. */
.btn-blue{box-shadow:var(--glow-blue)}
.btn-blue:hover{box-shadow:var(--glow-blue),0 8px 26px -8px rgba(61,143,232,.6)}
.btn-amber{box-shadow:var(--glow-amber),0 1px 0 rgba(0,0,0,.06)}
.search:focus-within{box-shadow:0 0 0 4px var(--blue-tint),var(--glow-blue)}

/* Temos jungiklis antraštėje. Saulė matoma šviesioje temoje, mėnulis — tamsioje. */
.htema{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r2);
       border:1px solid var(--line);background:var(--surface);color:var(--ink-2);flex:none;
       transition:color .2s,border-color .2s,box-shadow .2s,background .2s}
.htema:hover{color:var(--amber);border-color:var(--amber);box-shadow:var(--glow-amber)}
.htema .ico{width:20px;height:20px}
.htema .t-men{display:none}
:root[data-tema="t"] .htema .t-sau{display:none}
:root[data-tema="t"] .htema .t-men{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="s"]) .htema .t-sau{display:none}
  :root:not([data-tema="s"]) .htema .t-men{display:block}
}

/* Perjungiant temą neanimuojam nieko: 200 skirtingų elementų vienu metu keičiančių spalvą
   atrodo kaip gedimas, o ne kaip efektas. Vietoj to — trumpas, vienas bendras perėjimas. */
.tema-keiciam *{transition:background-color .18s linear,color .18s linear,border-color .18s linear!important}
@media (prefers-reduced-motion: reduce){ .tema-keiciam *{transition:none!important} }

@media (max-width:900px){ .htema{width:40px;height:40px} }

/* Mūsų pačių kategorijų piešiniai.

   Skirtingai nei TecDoc dalių nuotraukos, šitie yra permatomi PNG, tad baltos plokštelės
   jiems nereikia. Bet jie vaizduoja tamsias metalines detales (išmatuotas šviesumas
   44–172 iš 255, dauguma apie 100), todėl tamsiame fone be pagalbos jų nesimato.

   Sprendimas dvigubas: vos matoma vientisa plokštelė ir prašviesinimas. contrast(.82)
   reikalingas kartu su brightness — vien prašviesinus šviesiausios vietos peršviestų
   ir detalė atrodytų perdegusi.

   Plokštelė VIENTISA, o ne apvalus švytėjimas. Švytėjimas buvo pabandytas ir atmestas:
   42 pikselių plytelėje apskritimas nespėja išnykti iki krašto, todėl vietoj tvarkingos
   plytelės gaunasi pilka dėmė, o jų tinklelis atrodo purvinai.

   Šviesioje temoje --icon-bg yra baltas, o --icon-fx yra none, tad niekas nesikeičia. */
.ctile .im img, .qcard .qim img, .ccard .cim img, .tree .tn img{ filter:var(--icon-fx) }

/* Administravimo nuoroda antraštėje. Mėlyna, kad nesusilietų su kliento mygtukais ir
   iš karto matytųsi, jog tai kitos paskirties — tą mygtuką mato tik administratorius. */
.hbtn.hadmin{background:var(--blue);color:#fff}
.hbtn.hadmin:hover{background:var(--blue-h)}
.hbtn.hadmin small{color:rgba(255,255,255,.72)}
.hbtn.hadmin .ico{stroke:#fff}
@media (max-width:1100px){ .hbtn.hadmin .t{display:none} .hbtn.hadmin{padding:0 12px} }