body{margin:0;font-family:'Source Sans 3',system-ui,sans-serif;color:#0A2557;background:#F4F8FD}
a{color:#0B5ED7;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #0B5ED7;outline-offset:2px}
.catbar{scrollbar-width:thin}
@media (min-width:1025px){.catbar{flex-wrap:wrap;overflow:visible !important}}
@media (max-width:640px){#akce > div:last-child{grid-template-columns:repeat(2,minmax(0,1fr)) !important}#sortiment article ul{display:none !important}#sortiment article{padding:14px 16px !important;gap:10px !important}}
.hide-sm{display:flex}
@media (max-width:760px){.hide-sm{display:none}}

/* ============================================================
   HLAVNI MENU (mega menu)
   - na desktopu se panel otevira najetim mysi
   - na dotykovych zarizenich prvnim tapnutim
   - pod 900 px se meni na rozbalovaci seznam
   ============================================================ */

:root {
  /* --- přímo z loga --- */
  --znacka:        #50ADE5;   /* akcent na tmavém pozadí          */
  --znacka-seda:   #A7A5A6;   /* jen dekorace, ne text            */

  /* --- modrá řada, stejný odstín 203° --- */
  --modra:         #1A75AD;   /* tlačítka, odkazy       5,01:1    */
  --modra-tmava:   #12557C;   /* hover, aktivní         8,03:1    */
  --modra-svetla:  #EAF5FC;   /* světlá plocha                    */
  --navy:          #0D3C59;   /* lišta menu, patička   11,62:1    */

  /* --- text a linky --- */
  --inkoust:       #0B3047;   /* hlavní text           13,74:1    */
  --text-2:        #5A6B78;   /* vedlejší text          5,51:1    */
  --linka:         #D8E3EB;   /* rámečky, oddělovače              */
  --plocha:        #FFFFFF;   /* karty, pozadí obsahu             */
  --plocha-2:      #F6FAFD;   /* podbarvené pozadí stránky        */

  /* --- stavy --- */
  --zelena:        #157F43;   /* skladem                5,06:1    */
  --jantar:        #9A6200;   /* na dotaz               5,10:1    */
  --cervena:       #C4262C;   /* sleva, chyba           5,74:1    */

  /* --- stíny --- */
  --stin:          0 2px 10px rgba(11, 48, 71, .07);
  --stin-v:        0 12px 32px rgba(11, 48, 71, .16);
}
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--inkoust);
  background: #f4f7fa;
  -webkit-font-smoothing: antialiased;
}

/* ---------- lista ---------- */

.hl-menu {
  position: relative;          /* panel se pozicuje proti lliste */
  background: var(--modra);
  z-index: 100;
}

.hl-radek {
  display: flex;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 1280px;
}

.hl-polozka { 
position: static; 
flex: 1 1 auto;
}   /* panel pak zabere celou sirku listy */

.hl-tlacitko {
  display: block;
  width: 100%;
  height: 100%;
  padding: 11px 8px 13px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease;
}

.hl-polozka:first-child .hl-tlacitko { border-left: 1px solid rgba(255, 255, 255, .22); }

.hl-tlacitko:hover,
.hl-tlacitko:focus-visible { background: var(--modra-tmava); }

.hl-tlacitko[aria-expanded="true"] {
  background: var(--plocha);
  color: var(--modra-tmava);
}

.hl-tlacitko[aria-expanded="true"] .hl-popis { color: var(--text-2); }

.hl-tlacitko:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.hl-nazev {
  display: block;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
}

.hl-popis {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .82);
  transition: color .15s ease;
}

/* ---------- vysouvaci panel ---------- */

.hl-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--plocha);
  border-top: 3px solid var(--modra-tmava);
  box-shadow: var(--stin);
}

.hl-panel[hidden] { display: none; }

.hl-panel-obsah {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 28px;
}

.hl-dlazdice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}

.hl-dlazdice:hover,
.hl-dlazdice:focus-visible { background: var(--modra-svetla); }

.hl-dlazdice:focus-visible { outline: 2px solid var(--modra); outline-offset: 1px; }

/* obrazek kategorie — sem patri <img src="..." alt=""> */
.hl-ikona {
  flex: none;
  width: 58px;
  height: 46px;
  border: 1px solid var(--linka);
  border-radius: 6px;
  background: #f7fafd;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hl-ikona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hl-dlazdice strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--modra-tmava);
  line-height: 1.3;
}

.hl-dlazdice:hover strong { text-decoration: underline; }

.hl-dlazdice span.hl-text {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}

/* ---------- prepinac pro mobil ---------- */

.hl-prepinac {
  display: none;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: var(--modra);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.hl-prepinac span {
  float: right;
  transition: transform .2s ease;
}

.hl-prepinac[aria-expanded="true"] span { transform: rotate(180deg); }

/* ---------- mobil ---------- */

@media (max-width: 900px) {
  .hl-prepinac { display: block; }

  .hl-radek {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }

  .hl-menu.otevreno .hl-radek {
    max-height: 3000px;
    overflow: auto;
  }

  .hl-tlacitko {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    padding: 13px 18px;
  }

  .hl-polozka:first-child .hl-tlacitko { border-left: 0; }

  .hl-panel {
    position: static;
    border-top: 0;
    box-shadow: none;
  }

  .hl-panel-obsah {
    grid-template-columns: 1fr;
    padding: 8px 10px 14px;
    gap: 0;
  }

  .hl-dlazdice { padding: 10px; }
}

/* ---------- ukazka stranky kolem ---------- */

.ukazka {
  max-width: 1280px;
  margin: 40px auto;
  padding: 0 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.hd-radek {
  max-width: 1280px; margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 28px;
}

.hd-logo    { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.hd-hledani { display: flex; min-width: 0; flex: 1 1 320px; }

.hd-kosik {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px;
  box-sizing: border-box;
  background: #0B5ED7; color: #fff;
  text-decoration: none; font-weight: 700; font-size: 15px;
  border-radius: 0;
  white-space: nowrap;
  margin-left: auto;
  transition: background .15s ease;
}
.hd-kosik:hover,
.hd-kosik:focus-visible { background: #0A4AA8; color: #fff; }
.hd-kosik svg { flex: none; stroke: currentColor; }
.hd-kosik-text span { font-weight: 400; }

.hd-kosik-ikona { position: relative; display: flex; }
.hd-kosik-pocet { display: none; }

@media (max-width: 720px) {
  .hd-kosik-pocet {
    display: block;
    position: absolute; top: -7px; right: -7px;
    min-width: 19px; height: 19px; padding: 0 5px;
    box-sizing: border-box; border-radius: 10px;
    background: #fff; color: #0B5ED7;
    font-size: 11.5px; font-weight: 700; line-height: 19px;
    text-align: center; box-shadow: 0 0 0 2px #0B5ED7;
  }

  .hd-logo       { flex: 0 1 auto; min-width: 0; }
  .hd-logo img   { height: 40px; }
  .hd-kosik      { order: 2; flex: 0 0 auto; padding: 0 14px; gap: 0; }
  .hd-kosik-text { display: none; }
  .hd-hledani    { order: 3; flex: 1 1 100%; }
  .hd-telefon    { order: 4; }
}

@media (max-width: 420px) {
  .hd-telefon span span:first-child { display: none; }
  .hd-telefon span span:last-child  { font-size: 16px; }
}