:root {
  --menu-icon-color: #ffffff;
  --menu-icon-color-hover: #df89b4;

  --menu-icon-color-mobile: #4d4d4d;
  --menu-icon-color-mobile-hover: #df89b4;

  --menu-icon-size: 24px;

  /* Animace */
  --menu-icon-anim-duration: 0.35s;
  --menu-icon-anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* lehký "bounce" */
}

/* =========================================================================
   MOBIL (do 767px) - tmavé ikony na bílém pozadí
   ========================================================================= */
@media (max-width: 767px) {

  /* základní vlastnosti ikon (společné pro všechny) */
  .menu-level-1 > li > a::before {
    content: '';
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    display: block;
    margin-right: 4px;

    /* místo background-image použijeme masku */
    background-image: none !important;
    background-color: var(--menu-icon-color-mobile);
    -webkit-mask-size: contain;            mask-size: contain;
    -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
    -webkit-mask-position: center;         mask-position: center;

    /* animace */
    transform: scale(1) translateY(0) rotate(0);
    transform-origin: center;
    transition:
      background-color var(--menu-icon-anim-duration) ease,
      transform var(--menu-icon-anim-duration) var(--menu-icon-anim-easing);
  }

  /* hover/aktivní/rozbalené submenu - změna barvy + animace */
  .menu-level-1 > li > a:hover::before,
  .menu-level-1 > li > a:focus::before,
  .menu-level-1 > li.active > a::before,
  .menu-level-1 > li.exp > a::before,
  .menu-level-1 > li.exp > a:hover::before {
    background-color: var(--menu-icon-color-mobile-hover);
    transform: scale(1.15) translateY(-2px) rotate(-4deg);
  }

  /* přiřazení konkrétních SVG k položkám menu */
  .menu-item-753 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/kolekce.svg");        mask-image: url("/user/documents/upload/menu-icons1/kolekce.svg"); }
  .menu-item-708 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/nausnice.svg");       mask-image: url("/user/documents/upload/menu-icons1/nausnice.svg"); }
  .menu-item-729 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/nahrdelniky.svg");    mask-image: url("/user/documents/upload/menu-icons1/nahrdelniky.svg"); }
  .menu-item-711 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/retizky.svg");        mask-image: url("/user/documents/upload/menu-icons1/retizky.svg"); }
  .menu-item-720 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/naramky.svg");        mask-image: url("/user/documents/upload/menu-icons1/naramky.svg"); }
  .menu-item-705 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/prsteny.svg");        mask-image: url("/user/documents/upload/menu-icons1/prsteny.svg"); }
  .menu-item-771 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/sperkovnice.svg");    mask-image: url("/user/documents/upload/menu-icons1/sperkovnice.svg"); }
  .menu-item-792 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/tipy-na-darky.svg");  mask-image: url("/user/documents/upload/menu-icons1/tipy-na-darky.svg"); }
  .menu-item-986 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/sety.svg");           mask-image: url("/user/documents/upload/menu-icons1/sety.svg"); }
  .menu-item-802 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/slevy.svg");          mask-image: url("/user/documents/upload/menu-icons1/slevy.svg"); }
  .menu-item-682 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/inspirace-rady.svg"); mask-image: url("/user/documents/upload/menu-icons1/inspirace-rady.svg"); }
}

/* =========================================================================
   DESKTOP (od 768px) - bílé ikony na vínovém pozadí
   ========================================================================= */
@media (min-width: 768px) {

  .navigation-in ul.menu-level-1 > li > a {
    padding: 0px 10px !important;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 32px;
  }
  .menu-level-1 > li.exp > a {
    padding: 0px 10px !important;
  }

  /* základní vlastnosti ikon */
  .menu-level-1 > li > a::before {
    content: '';
    display: inline-block;
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    margin-right: 4px;

    background-image: none !important;
    background-color: var(--menu-icon-color);
    -webkit-mask-size: contain;            mask-size: contain;
    -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
    -webkit-mask-position: center;         mask-position: center;

    /* animace */
    transform: scale(1) translateY(0) rotate(0);
    transform-origin: center;
    transition:
      background-color var(--menu-icon-anim-duration) ease,
      transform var(--menu-icon-anim-duration) var(--menu-icon-anim-easing);
  }

  .navigation-in>ul>li.ext.exp>a,
  .navigation-in>ul>li>a:hover {
    margin: 0 !important;
  }

  /* hover/aktivní/rozbalené submenu - změna barvy + animace */
  .menu-level-1 > li > a:hover::before,
  .menu-level-1 > li > a:focus::before,
  .menu-level-1 > li.active > a::before,
  .menu-level-1 > li.exp > a::before,
  .menu-level-1 > li.exp > a:hover::before {
    background-color: var(--menu-icon-color-hover);
    transform: scale(1.15) translateY(-2px) rotate(-4deg);
  }

  /* přiřazení SVG k existujícím položkám menu */
  .menu-item-753 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/kolekce.svg");        mask-image: url("/user/documents/upload/menu-icons1/kolekce.svg"); }
  .menu-item-708 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/nausnice.svg");       mask-image: url("/user/documents/upload/menu-icons1/nausnice.svg"); }
  .menu-item-729 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/nahrdelniky.svg");    mask-image: url("/user/documents/upload/menu-icons1/nahrdelniky.svg"); }
  .menu-item-711 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/retizky.svg");        mask-image: url("/user/documents/upload/menu-icons1/retizky.svg"); }
  .menu-item-720 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/naramky.svg");        mask-image: url("/user/documents/upload/menu-icons1/naramky.svg"); }
  .menu-item-705 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/prsteny.svg");        mask-image: url("/user/documents/upload/menu-icons1/prsteny.svg"); }
  .menu-item-771 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/sperkovnice.svg");    mask-image: url("/user/documents/upload/menu-icons1/sperkovnice.svg"); }
  .menu-item-792 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/tipy-na-darky.svg");  mask-image: url("/user/documents/upload/menu-icons1/tipy-na-darky.svg"); }
  .menu-item-986 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/sety.svg");           mask-image: url("/user/documents/upload/menu-icons1/sety.svg"); }
  .menu-item-802 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/slevy.svg");          mask-image: url("/user/documents/upload/menu-icons1/slevy.svg"); }
  .menu-item-682 > a::before { -webkit-mask-image: url("/user/documents/upload/menu-icons1/inspirace-rady.svg"); mask-image: url("/user/documents/upload/menu-icons1/inspirace-rady.svg"); }
}