/* =========================
   MOBILNÍ MENU KATEGORIÍ
   ========================= */

.pg-mobile-category-menu {
  display: none;
}

@media (max-width: 767px) {

  .pg-mobile-category-menu {
    display: block;
    margin: 0 0 20px;
    border: 1px solid #e6e6e6;
    background: #fff;
  }

  .pg-mobile-category-menu__toggle {
    position: relative;
    width: 100%;
    padding: 13px 44px 13px 15px;
    border: 0;
    background: #14b1ef;
    color: #fff;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .pg-mobile-category-menu__toggle:hover,
  .pg-mobile-category-menu__toggle:focus {
    background: #109ed7;
    color: #fff;
  }

  .pg-mobile-category-menu__toggle::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  .pg-mobile-category-menu.is-open
  .pg-mobile-category-menu__toggle::after {
    content: "−";
  }

  .pg-mobile-category-menu__content {
    display: none;
  }

  .pg-mobile-category-menu.is-open
  .pg-mobile-category-menu__content {
    display: block;
  }

  .pg-mobile-category-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pg-mobile-category-menu
  > .pg-mobile-category-menu__content
  > ul
  > li {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #eee;
  }

  .pg-mobile-category-menu
  > .pg-mobile-category-menu__content
  > ul
  > li:last-child {
    border-bottom: 0;
  }

  .pg-mobile-category-menu a {
    display: block;
    padding: 11px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
  }

  .pg-mobile-category-menu a:hover {
    color: #14b1ef;
  }

  .pg-mobile-category-menu .pg-has-submenu > a {
    padding-right: 48px;
  }

  .pg-mobile-category-menu .pg-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #14b1ef;
    font-size: 19px;
    cursor: pointer;
  }

  .pg-mobile-category-menu .pg-submenu {
    display: none;
    background: #f8f8f8;
    border-top: 1px solid #eee;
  }

  .pg-mobile-category-menu .pg-submenu.is-open {
    display: block;
  }

  .pg-mobile-category-menu .pg-submenu li {
    border-bottom: 1px solid #eee;
  }

  .pg-mobile-category-menu .pg-submenu li:last-child {
    border-bottom: 0;
  }

  .pg-mobile-category-menu .pg-submenu a {
    padding: 10px 15px 10px 28px;
    font-size: 13px;
  }

}


/* =========================
   DESKTOP SIDEBAR
   ========================= */

@media (min-width: 768px) {

  /* běžný hover hlavní položky */
  .box-categories #categories .categories > .topic:hover,
  .box-categories #categories .categories > .topic:hover > a,
  .box-categories #categories .categories > .topic:hover > a:link,
  .box-categories #categories .categories > .topic:hover > a:visited,
  .box-categories #categories .categories > .topic:hover > a:hover,
  .box-categories #categories .categories > .topic:hover > a:focus,
  .box-categories #categories .categories > .topic:hover > a span {
    background-color: #14b1ef !important;
    color: #fff !important;
  }

  /* aktivní hlavní kategorie */
  .box-categories #categories .categories.active > .topic,
  .box-categories #categories .categories.active > .topic > a,
  .box-categories #categories .categories.active > .topic > a:link,
  .box-categories #categories .categories.active > .topic > a:visited,
  .box-categories #categories .categories.active > .topic > a:hover,
  .box-categories #categories .categories.active > .topic > a:focus,
  .box-categories #categories .categories.active > .topic > a:active,
  .box-categories #categories .categories.active > .topic > a span,
  .box-categories #categories .categories.active > .topic > a:hover span,
  .box-categories #categories .categories.active > .topic > a:focus span {
    background-color: #14b1ef !important;
    color: #fff !important;
  }

  /* když je active přímo na .topic */
  .box-categories #categories .categories > .topic.active,
  .box-categories #categories .categories > .topic.active > a,
  .box-categories #categories .categories > .topic.active > a:link,
  .box-categories #categories .categories > .topic.active > a:visited,
  .box-categories #categories .categories > .topic.active > a:hover,
  .box-categories #categories .categories > .topic.active > a:focus,
  .box-categories #categories .categories > .topic.active > a:active,
  .box-categories #categories .categories > .topic.active > a span,
  .box-categories #categories .categories > .topic.active > a:hover span,
  .box-categories #categories .categories > .topic.active > a:focus span {
    background-color: #14b1ef !important;
    color: #fff !important;
  }

  /* ještě silnější pojistka pro aktivní modrý pruh */
  .box-categories #categories .categories.active > .topic:hover,
  .box-categories #categories .categories.active > .topic:hover > a,
  .box-categories #categories .categories.active > .topic:hover > a *,
  .box-categories #categories .topic.active:hover,
  .box-categories #categories .topic.active:hover > a,
  .box-categories #categories .topic.active:hover > a * {
    background-color: #14b1ef !important;
    color: #fff !important;
  }

  /* plus / minus */
  .box-categories #categories .topic:hover .cat-trigger,
  .box-categories #categories .topic.active .cat-trigger,
  .box-categories #categories .topic.active:hover .cat-trigger,
  .box-categories #categories .categories.active .cat-trigger,
  .box-categories #categories .categories.active:hover .cat-trigger {
    color: #fff !important;
  }

  /* podkategorie */
  .box-categories #categories .categories > ul > li > a {
    color: #333 !important;
    background: transparent !important;
  }

  /* hover podkategorií */
  .box-categories #categories .categories > ul > li > a:hover,
  .box-categories #categories .categories > ul > li > a:focus {
    color: #14b1ef !important;
    background: transparent !important;
  }

}
