/* ============================================================
   start-selling.css  —  Swopsmart START-SELLING page sections
   Page-specific layout only. The shared section-header system
   (.section-head, .section-eyebrow, .section-title, .section-subtext,
   .section--dark), the .reveal animation, and the "Trusted by sellers"
   trust-section styles all live in main.css.
   ============================================================ */

/* ---- Categories block ---- */
.categories {
  padding: var(--section-py) 28px;
  background: #f2efe8;
  border-top: none;
  border-bottom: none;
}
.categories-inner { max-width: 1240px; margin: 0 auto; }
@media (max-width: 640px) {
  .categories { padding-left: 24px; padding-right: 24px; }
}

/* The device-search input system (.search-wrap, .search-form,
   .search-icon-left, .sell-search, .clear-btn) now lives in main.css
   so it can be shared with the brand-selection pages. Quick-links
   below remain page-specific to Start Selling. */

.quick-links { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.quick-links-label {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  font-family: var(--font-mono);
}
@media (max-width: 640px) {
  .quick-links-label { flex-basis: 100%; text-align: center; }
}
.quick-link {
  padding: 8px 16px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.quick-link:hover { background: var(--forest); color: #f2efe8; border-color: var(--forest); }

/* Card styles removed (they duplicated an older prototype snapshot and,
   loading after home.css, overrode it — 4-across, no alignment fixes).
   home.css owns ALL .card-grid/.sell-card rules now; this sheet keeps
   only page-specific bits (section head, .no-results). */


.no-results {
  text-align: center; padding: 60px 20px;
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
}
.no-results h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.no-results p { color: var(--ink-2); font-size: 14px; }

/* ---- Header parity with the collection pages ----
   Same top offset (36px/22px, like .brands/.series/.products) and the
   same centered-head pattern as brands-head/products-head. */
.categories {
  padding-top: 36px;
}
@media (max-width: 768px) {
  .categories { padding-top: 22px; }
}
.sell-page-head { text-align: center; margin-bottom: 48px; }
.sell-page-head .section-title { max-width: 100%; margin-left: auto; margin-right: auto; }
.sell-page-head .section-subtext { margin-top: 8px; }