/* Tools Page Styles - complements base.css without duplicating utilities */
.page-hero {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-dark) 100%);
  padding: var(--space-16) 0 var(--space-10);
}
.page-hero p { max-width: 70ch; }

.section { padding: var(--space-12) 0; }
.section.bg-alt { background: var(--color-surface); }
.section-header { margin-bottom: var(--space-6); }
.section-header p { margin-top: var(--space-2); }

.inpage-nav { margin-top: var(--space-6); }
.inpage-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.inpage-nav-list a { padding: .4rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-sm); background: var(--color-white); }
.inpage-nav-list a:hover { background: var(--color-surface); }

.tools-grid .card-img-top { aspect-ratio: 16/10; object-fit: cover; }
.price { color: var(--color-primary); }
.rating { color: var(--color-accent-dark); }

.spec-table-wrapper { overflow-x: auto; }
.spec-table-wrapper table { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.spec-table-wrapper th, .spec-table-wrapper td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--color-border-light); }
.spec-table-wrapper thead th { background: var(--color-surface); font-weight: var(--font-weight-semibold); }

.brand-badges { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.tips-list { display: grid; gap: var(--space-3); }
.tips-list li { padding-left: 1.25rem; position: relative; }
.tips-list li::before { content: ""; width: .5rem; height: .5rem; background: var(--color-accent); border-radius: 50%; position: absolute; left: 0; top: .6rem; }

/* Compare panel */
.compare-panel { position: sticky; bottom: 0; background: var(--color-secondary); color: var(--color-text-inverse); padding: .75rem 0; box-shadow: var(--shadow-lg); }
.compare-panel[hidden] { display: none; }
.compare-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.selected-list { display: flex; gap: .5rem; flex-wrap: wrap; }
.selected-list .tag { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); padding: .25rem .5rem; border-radius: var(--radius-full); font-size: var(--font-size-sm); }

.comparison-result table { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.comparison-result th, .comparison-result td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--color-border-light); }
.comparison-result thead th { background: var(--color-surface); }

@media (max-width: 768px) {
  .page-hero { padding: var(--space-10) 0 var(--space-8); }
}