/* Category — one category's full catalog, pushed from Home's "Show all".
   Back arrow + the category's name on one line, then the same 2-column card grid the
   Home screen used to hold. */

.screen-category {
  background: var(--bg);
}

.screen-category .category-header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  padding: var(--s-sm) var(--s-lg);
  flex-shrink: 0;
}
.screen-category .category-title {
  margin: 0;
  text-align: center;
  color: var(--text);
}
.screen-category .category-back {
  position: relative;
  margin-left: -8px;
}
/* 44px tap target around the 36px button. */
.screen-category .category-back::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}

.screen-category .scroll {
  padding: 0 var(--s-lg);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
}
.category-grid .tpl-card {
  width: 100%;
}