@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/chivo-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/chivo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/chivo-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/chivo-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/chivo-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/chivo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:900;src:url(fonts/chivo-latin-ext-900-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:normal;font-display:swap;font-weight:900;src:url(fonts/chivo-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/chivo-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/chivo-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/chivo-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/chivo-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: technický list oleja — hlavička s pásom viskozitných tried, súhrn limitov SAE J300, hustá tabuľka s mierkami v bunkách; na mobile karty */
:root{
  --bg:#edf0f1;--surface:#ffffff;--ink:#14191c;--muted:#5d686e;--line:#d5dbde;
  --amber:#b56a00;--amber-soft:#f6e3c4;--warn:#b3261e;--ok:#2f6b3a;--bar:#e3c18a;--twin:#2d5f8a;
  --f-ui:"Chivo","Helvetica Neue",Arial,sans-serif;
  --f-num:"Chivo Mono","SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1214;--surface:#171c1f;--ink:#e6eaec;--muted:#93a0a6;--line:#2a3236;--amber:#f0a73a;--amber-soft:#3a2a12;--warn:#ff8a80;--ok:#8fd19e;--bar:#6b4c1d;--twin:#8ab8e0;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1214;--surface:#171c1f;--ink:#e6eaec;--muted:#93a0a6;--line:#2a3236;--amber:#f0a73a;--amber-soft:#3a2a12;--warn:#ff8a80;--ok:#8fd19e;--bar:#6b4c1d;--twin:#8ab8e0;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* hlavička */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;gap:18px;padding-block:12px 8px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:-.01em;text-decoration:none}
.drop{width:22px;height:28px;flex:none}
.logo span{color:var(--amber)}
.top .total{font-size:13px;color:var(--muted)}
.top .lang{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted)}
.top .lang b{color:var(--ink)}
.groups{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-top:4px}
.groups::-webkit-scrollbar{display:none}
.groups a{display:grid;gap:1px;padding:8px 16px 10px;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.groups a b{font-size:15px;font-weight:700}
.groups a span{font-size:11.5px}
.groups a:hover{color:var(--ink)}
.groups a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--amber)}
.groups a[aria-current="true"] span{color:var(--muted)}
.tabs-box{overflow-x:auto;scrollbar-width:none}
.tabs-box::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:6px;padding-block:10px;width:max-content}
.tgroup{display:flex;gap:4px;align-items:center}
.tgroup > span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px;white-space:nowrap}
.tabs a{font-size:14px;font-weight:500;text-decoration:none;padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;display:inline-flex;gap:6px;align-items:baseline}
.tabs a small{font-family:var(--f-num);font-size:11px;opacity:.7}
.tabs a:hover{background:var(--bg);color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* hero */
.hero{padding-block:30px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.hero h1{font-size:clamp(34px,5vw,58px);font-weight:900;letter-spacing:-.025em;line-height:1}
.hero h1 b{color:var(--amber);font-weight:900}
.hero p{max-width:64ch;color:var(--muted);margin:14px 0 0}
.hero .updated{font-size:12.5px;margin-top:10px}
.specs{display:flex;border:1px solid var(--line);background:var(--surface);border-radius:6px;overflow:hidden}
.specs div{padding:12px 18px;border-right:1px solid var(--line);min-width:0}
.specs div:last-child{border-right:0}
.specs b{display:block;font-family:var(--f-num);font-size:21px;font-weight:500;white-space:nowrap}
.specs span{font-size:11.5px;color:var(--muted)}
@media(max-width:880px){.hero{grid-template-columns:1fr}.specs{flex-wrap:wrap}.specs div{flex:1 1 40%;border-bottom:1px solid var(--line)}}

/* nástroje */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px 6px 0 0}
.search{flex:1 1 240px;min-width:0;position:relative}
.search input{width:100%;font:inherit;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);max-width:100%}
.chip{font:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);cursor:pointer}
.chip:hover{color:var(--ink);border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--amber-soft);border-color:var(--amber);color:var(--ink)}
.count{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}

/* tabuľka */
.table-box{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;max-height:156vh}
table{border-collapse:collapse;width:100%}
#main-table{min-width:1100px}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
#main-table th:first-child,#main-table td:first-child{text-align:center;width:40px;padding-right:0}
#main-table th:nth-child(2),#main-table td:nth-child(2){text-align:left}
thead th{position:sticky;top:0;z-index:2;background:var(--surface);font-weight:500;font-size:12.5px;line-height:1.25;color:var(--muted);vertical-align:bottom;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line)}
thead th button{all:unset;cursor:pointer;display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px}
#main-table thead th:nth-child(2) button{align-items:flex-start}
thead th button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
thead th .u{font-family:var(--f-num);font-size:11px;opacity:.8}
thead th .arr{font-size:10px;color:var(--amber);min-height:12px}
thead th[aria-sort]{color:var(--ink)}
tbody tr:hover{background:color-mix(in srgb,var(--amber-soft) 40%,transparent)}
tbody tr.sel{background:var(--amber-soft)}
td.name{font-weight:500;min-width:260px;max-width:380px}
td.name small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.spec{display:inline-block;font-family:var(--f-num);font-size:11px;padding:1px 6px;border:1px solid var(--line);border-radius:3px;margin:3px 4px 0 0;color:var(--muted);font-weight:400}
.appr{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:4px;line-height:1.4;white-space:normal}
.appr b{font-weight:500;color:var(--ink)}
.src{display:inline-block;font-size:12px;font-weight:500;color:var(--amber);margin:4px 10px 0 0;text-decoration:none;white-space:nowrap}
.src:hover{text-decoration:underline}
.note{display:block;font-size:11.5px;font-weight:400;color:var(--muted);font-style:italic;margin-top:2px}
.alert{display:flex;gap:12px;align-items:flex-start;background:var(--amber-soft);border:1px solid var(--amber);border-radius:6px;padding:12px 16px;margin-bottom:14px;font-size:14px}
.alert b{font-weight:700}
.twin{display:inline-block;font-size:11px;font-weight:500;padding:1px 7px;border-radius:999px;margin:3px 0 0;color:var(--twin);border:1px solid currentColor;cursor:help}
.cell{display:grid;gap:4px;justify-items:end}
.cell .v{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.cell .meter{width:64px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.cell .meter i{display:block;height:100%;background:var(--bar)}
.cell.top .v{color:var(--amber);font-weight:500}
.cell.top .meter i{background:var(--amber)}
.na{color:var(--muted);font-size:12px;font-family:var(--f-ui)}
.flag{display:inline-block;margin-left:5px;width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;background:var(--warn);color:var(--surface);font-size:10.5px;font-weight:700;font-family:var(--f-ui);vertical-align:1px;cursor:help}
.flag.info{background:var(--muted)}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--amber);cursor:pointer}

/* karty pre mobil */
.cards{display:none}
@media(max-width:760px){
  .table-box{display:none}
  .cards{display:grid;gap:10px;margin-top:10px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px}
  .card.sel{border-color:var(--amber);background:var(--amber-soft)}
  .card-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
  .card-head b{font-weight:500;line-height:1.3}
  .card-head small{display:block;color:var(--muted);font-size:12px}
  .card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin:14px 0 0}
  .card dt{font-size:11px;color:var(--muted);line-height:1.25}
  .card dd{margin:2px 0 0;font-family:var(--f-num);font-size:14px}
  .tools{border-radius:6px}
}

/* panely */
.below{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;padding-block:34px 120px}
.col{display:grid;gap:24px;align-content:start;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px;min-width:0}
.panel h2{font-size:20px;font-weight:700;margin:6px 0 14px}
.panel > p{color:var(--muted);margin:0 0 14px;font-size:14px}
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:0}
.gloss dt{font-weight:700;font-size:14px}
.gloss dd{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:14px}
.list li .flag{margin:2px 0 0}
.list b{font-weight:500}
.list span.t{color:var(--muted)}
.twins li{grid-template-columns:1fr;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.twins li:last-child{border-bottom:0;padding-bottom:0}
.twins .names{display:flex;flex-wrap:wrap;gap:4px 8px}
.twins .names span{font-weight:500}
.twins .names span:not(:last-child)::after{content:" ="; color:var(--twin);font-weight:700}
.twins small{color:var(--muted);font-size:12.5px}
.empty{color:var(--muted);font-size:14px}
@media(max-width:960px){.below{grid-template-columns:1fr}.gloss{grid-template-columns:1fr}}

/* lišta porovnania */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--ink);color:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px)}
.tray .wrap{display:flex;gap:12px;align-items:center;padding-block:12px;flex-wrap:wrap}
.tray .picked{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.tray .pill{font-size:12.5px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 14%,transparent);display:inline-flex;gap:6px;align-items:center;max-width:100%}
.tray .pill em{font-style:normal;opacity:.6;font-family:var(--f-num);font-size:11px}
.tray .pill button{all:unset;cursor:pointer;opacity:.7}
.btn{font:inherit;font-weight:700;font-size:14px;padding:10px 18px;border-radius:4px;border:0;background:var(--amber);color:#1a1205;cursor:pointer}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.ghost{font:inherit;font-size:13px;background:none;border:0;color:inherit;opacity:.75;cursor:pointer;text-decoration:underline}

/* porovnanie */
.cmp{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--ink) 55%,transparent);display:grid;align-items:end}
.cmp-sheet{background:var(--surface);max-height:88vh;overflow:auto;border-radius:12px 12px 0 0;padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px))}
.cmp-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.cmp-head h2{font-size:22px;font-weight:900}
.cmp-box{overflow-x:auto}
.cmp table{min-width:560px}
.cmp th,.cmp td{text-align:left}
.cmp tbody th{font-weight:500;font-size:13px;color:var(--muted);white-space:nowrap}
.cmp thead th{font-size:13.5px;color:var(--ink);white-space:normal;min-width:150px;position:static;box-shadow:none}
.cmp thead th small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.cmp td .v{font-family:var(--f-num);font-size:15px}
.cmp td .v em{font-style:normal;font-size:11px;color:var(--muted)}
.cmp td.best .v{color:var(--ok);font-weight:500}
.cmp td.best .v::after{content:" ▲";font-size:10px}
.cmp td .meter{width:100%;max-width:160px;height:4px;background:var(--line);border-radius:2px;margin-top:5px;overflow:hidden}
.cmp td .meter i{display:block;height:100%;background:var(--bar)}
.cmp td.best .meter i{background:var(--ok)}
.cmp .hint{font-size:12.5px;color:var(--muted);margin-top:14px}
.close{font:inherit;font-size:14px;padding:8px 14px;border:1px solid var(--line);border-radius:4px;background:none;color:var(--ink);cursor:pointer}
footer{color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}
footer .wrap{padding-block:20px 90px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.top a.lang{text-decoration:none}.top a.lang:hover{color:var(--ink)}.top .lang a{color:inherit}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;padding-block:40px 80px;align-items:start}
.contact h1{font-size:clamp(34px,5vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1}
.contact .intro p{color:var(--muted);max-width:46ch}
.form{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:24px;display:grid;gap:16px;min-width:0}
.form label{display:grid;gap:6px;font-size:13.5px;font-weight:500}
.form label span small{font-weight:400;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);width:100%}
.form textarea{min-height:160px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .gdpr{font-size:12.5px;color:var(--muted);margin:0}
.msg{padding:12px 14px;border-radius:4px;font-size:14px}
.msg.ok{background:color-mix(in srgb,var(--ok) 15%,var(--surface));color:var(--ink);border:1px solid var(--ok)}
.msg.err{background:color-mix(in srgb,var(--warn) 12%,var(--surface));color:var(--ink);border:1px solid var(--warn)}
footer a{color:inherit}
@media(max-width:820px){.contact{grid-template-columns:1fr}.form .row2{grid-template-columns:1fr}}