/* =========================
   MOBILE CATS (Catalog pills)
   - показываем ТОЛЬКО на мобилке
   ========================= */

/* PC: скрыть */
.mcatBar--catalog{ display:none; }

@media (max-width:900px){
  .mcatBar--catalog{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;

    position: sticky;
    top: 72px;
    z-index: 39;

    padding: 10px 8px 8px;
    margin: 10px 0 12px;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width:none;

    background: rgba(230,235,242,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.46);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(11,18,32,.08);

    transition:
      top .35s ease,
      background .25s ease,
      box-shadow .25s ease;
  }

  .mcatBar--catalog::-webkit-scrollbar{ height:0; }

  /* когда хедер спрятался вверх — плашка поднимается выше */
  .header.header--hidden ~ main .mcatBar--catalog{
    top: 8px;
  }

  .mcatBar--catalog .mcatPill{
    flex:0 0 auto;
    scroll-snap-align:start;

    height: 40px;
    padding: 0 14px;
    border-radius: 14px;

    border: 1px solid rgba(11,18,32,.12);
    background: rgba(255,255,255,.90);
    color: rgba(11,18,32,.88);

    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;

    cursor:pointer;
    transition: .14s ease;

    box-shadow: 0 10px 22px rgba(11,18,32,.08);
  }

  .mcatBar--catalog .mcatPill:hover{
    transform: translateY(-1px);
  }

  .mcatBar--catalog .mcatPill:active{
    transform: translateY(0);
    filter: brightness(.98);
  }

  .mcatBar--catalog .mcatPill.is-active{
    border-color: rgba(255,138,26,.55);
    background: rgba(255,138,26,.14);
    color: rgba(11,18,32,.92);
  }
}