body {
  overflow-x: hidden;
  overscroll-behavior-x: none;

  .top-bar {
    z-index: 0;
  }

  .main-content {
    .choice-exercises-page {
      position: relative;
      margin-top: 65px;
      padding-bottom: 100px;

      .category-back {
        position: absolute;
        top: -40px;
        left: 10px;

        img {
          width: 24px;
          height: 24px;
        }
      }

      .category-img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -135px;
        width: 200px;
        opacity: 0.3;
        z-index: 0;
      }

      .slide-pill {
        position: fixed;
        right: 0;
        top: 65px;
        z-index: 5;
        width: 320px;
        height: 40px;
        padding: 10px;
        display: flex;
        align-items: center;
        color: #282828;
        border: 1px solid #9e9e9e;
        border-right: none;
        border-radius: 10px 0 0 10px;
        transform: translateX(0);
        transition: transform 0.8s ease;
        backdrop-filter: blur(4px);

        .slide-pill__grab {
          padding: 0 10px 0 0;
          color: #34D17B;
          background: transparent;
          border: none;
        }

        .slide-pill__text {
          margin: 0;
          font-size: 13px;
        }

        .slide-pill__close {
          border: 0;
          color: #34D17B;
          background: transparent;
        }
      }

      .slide-pill.is-closed {
        transform: translateX(calc(100% - 35px));
      }

      .category-list {
        .title {
          margin-bottom: 10px;
          display: block;
          text-align: center;
          position: relative;
          z-index: 2;
        }

        .search {
          position: relative;
          display: flex;
          align-items: center;
          gap: 10px;
          background: #FFFFFF;
          border-radius: 10px;
          padding: 8px 12px;
          box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
          margin-bottom: 10px;
          border: 1px solid #dadada;

          input {
            font-family: "Unbounded", sans-serif;
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            font-size: 12px;
            padding: 2px;

            &::placeholder {
              font-family: "Unbounded", sans-serif;
              font-weight: lighter;
              font-size: 12px;
              color: #9e9e9e;
            }
          }
        }

        .exercises-list {
          list-style: none;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin: 0;

          .card {
            background: #ffffff;
            border-radius: 14px;
            box-shadow: 0 6px 22px rgba(0, 0, 0, .06);
            position: relative;

            .card-link {
              display: grid;
              grid-template-columns: 56px 1fr;
              align-items: center;
              gap: 12px;
              padding: 12px 54px 12px 12px;
              text-decoration: none;
              color: inherit;

              .thumb-wrap {
                width: 56px;
                height: 56px;
                display: grid;
                place-items: center;
                border: 1px solid #34D17B;
                border-radius: 12px;

                .thumb {
                  width: 42px;
                  height: 42px;
                  object-fit: contain;
                }
              }

              .main {
                display: flex;
                flex-direction: column;
                gap: 4px;

                .main-title {
                  font-weight: 400;
                }
              }
            }

            .check-wrap {
              position: absolute;
              right: 12px;
              top: 50%;
              transform: translateY(-50%);
              display: inline-block;

              .check {
                position: absolute;
                opacity: 0;
                pointer-events: none;
              }

              .check-visual {
                width: 26px;
                height: 26px;
                border-radius: 8px;
                border: 1px solid #34D17B;
                background: #ffffff;
                display: inline-block;
                position: relative;
                transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
              }

              .check:checked + .check-visual::after {
                content: "";
                position: absolute;
                left: 8px;
                top: 2px;
                width: 8px;
                height: 14px;
                border-right: 3px solid #323232;
                border-bottom: 3px solid #323232;
                transform: rotate(45deg);
              }
            }
          }
        }
      }
    }
  }
}

/* Тач-эффекты */