/* =============================================================================
   Categories Page Styles — ZapchShoPL
   Keep lightweight, leverage base.css utility/grid/card components
   ============================================================================= */

.page-hero { padding: var(--space-8) 0 var(--space-6); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.hero-inner { gap: var(--space-8); }
.hero-copy p { max-width: 60ch; }
.hero-search { margin-top: var(--space-4); }

.breadcrumb { margin-top: var(--space-4); }
.breadcrumb-list { display: flex; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.breadcrumb-list li+li::before { content: "/"; margin: 0 var(--space-2); color: var(--color-text-muted); }

.section-categories { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.category-card .card-body { display: flex; flex-direction: column; gap: var(--space-3); }
.category-card .card-title { margin-bottom: 0; }

.info-section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.info-section .list-benefits { list-style: none; margin-top: var(--space-3); }
.info-section .list-benefits li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.info-section .list-benefits li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-accent); }

.trust-section { padding-top: var(--space-6); padding-bottom: var(--space-8); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .page-hero { padding: var(--space-6) 0; }
}