* {
  box-sizing: border-box;
}

/* ============================================
   APP LAYOUT (nezmenené)
============================================ */
.app {
  display: grid;
  min-height: 100vh;
  --row-gap: 0rem;
  grid-template-rows: minmax(4rem, auto) auto minmax(4rem, auto);
  grid-template-areas: "header" "main" "footer";
  row-gap: var(--row-gap);
  background-color: var(--app-bg);
}

@media screen and (min-width: 1024px) {
  .app {
    --app-width: 1500px;
    grid-template-rows: 4rem minmax(auto, 1fr) minmax(2rem, auto);
  }

  .main {
    --side-panel-width: 20rem;
    display: grid;
    grid-template-areas: "info info" "side-panel items";
    grid-template-rows: auto minmax(auto, 1fr);
    grid-template-columns: var(--side-panel-width) 1fr;
    column-gap: 2rem;
    max-width: var(--app-width);
    margin: 0 auto;
  }

  .main .info-panel {
    grid-area: info;
    justify-content: space-between;
  }

  .main .info-panel .counts {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
  }

  .main .info-panel .counts strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
  }

  /*  .main .info-panel .filter-btn */
  .main .info-panel .filter-btn,
  .main .filter-btn {
    display: none;
  }

  .main .info-panel .sort-btn {
    align-self: flex-end;
  }
}