.mobile-catalog-overlay{
    position: absolute;
    inset: 0;
    background: #80808094;
    z-index: 100;
    backdrop-filter: blur(5px);
    display:none;
    opacity:0;
    transitional:opacity 0.3s ease-in-out;

   &.active{
	display:block;
	opacity:1;
    }	
}    


.mobile-catalog {
      position: fixed;
      width: 100%;
      transform: translateY(-100%);
      transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
      opacity: 0;
      background-color: var(--color-secondary);
      color: var(--color-primary);
      
      

      &.active {
        transform: translateY(0%);
        opacity: 1;
        transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
        z-index: 1005;
        padding-bottom:20px;

        &::before{
              content: '';
              position: absolute;
              width: 100%;
              left: 0;
              right: 0;
              bottom: 0;
              height: 20px;
              background-color: var(--color-secondary);
        }
      }

      & .mobile-catalog__summary {
        list-style: none;
        cursor: pointer;
        display:flex;
        padding: 10px;
        position: relative;
        background: var(--color-3);
      }


      & .mobile-catalog__item .catalog-list {
        list-style: none;
      }

      & .mobile-catalog__item summary::-webkit-details-marker {
        display: none;
      }

      & .mobile-catalog__item summary::after {
        content: '▶';
        position: absolute;
        right: 10px;
        transition: transform 0.2s;
      }

      & .mobile-catalog__item[open] summary::after {
        content: '▼';
      }

      & .catalog-link{
        width: 100%;
        display:flex;
        padding:5px 15px;
        border-top: 1px solid var(--color-5);
        border-bottom: 1px solid var(--color-5);
        background: var(--color-secondary);

        &:active{
          filter:invert(1);
        }
      }
    }