/* ============================================================
   Fadma — Addons Fix
   Orphan classes: .site-footer__col, .pagination__item,
   .home-categories, .page-banner--search
   Mobile-first, design-token-only.
   ============================================================ */

/* ----------------------------------------------------------
   .site-footer__col
   A single column inside the footer grid.
   ---------------------------------------------------------- */
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-3);
}

/* ----------------------------------------------------------
   .pagination__item
   A single list item wrapping a .pagination__link.
   ---------------------------------------------------------- */
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
   .home-categories
   Wrapper for the category strip on the home / blog-home
   templates. Sits above or below the hero; full-bleed
   horizontal scroll on small screens, wrapping row on large.
   ---------------------------------------------------------- */
.home-categories {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--t-space-4);
}

.home-categories::-webkit-scrollbar {
  display: none;
}

/* On wider viewports, let items wrap naturally */
@media (min-width: 768px) {
  .home-categories {
    overflow-x: visible;
  }
}

/* ----------------------------------------------------------
   .page-banner--search
   Modifier on .page-banner for the search results page.
   Keeps the same vertical rhythm but uses a subtler
   background so the results list reads as the hero.
   ---------------------------------------------------------- */
.page-banner--search {
  background-color: var(--t-surface-alt);
  border-bottom: 1px solid var(--t-border);
  padding-block: var(--t-space-8) var(--t-space-6);
}

.page-banner--search .page-banner__title {
  color: var(--t-text);
}

.page-banner--search .page-banner__desc {
  color: var(--t-text-secondary);
}

/* Tighten vertical padding on small screens */
@media (max-width: 639px) {
  .page-banner--search {
    padding-block: var(--t-space-6) var(--t-space-4);
  }
}