/* PAGE FAMILY: search-by-color checkbox finder (C5) - SKIN tier - from site-buypopart-V2.0.css, original order. Migrated 2026-07-06. */

.color-search-page .search-form { margin-top: 24px; }

.color-search-page .color-search-intro { font-size: 1.05em; color: var(--bpa-ink-2, #555555); line-height: 1.65; max-width: 52em; }

.color-search-page .filter-row { display: flex; gap: 18px; align-items: flex-start; border-bottom: 1px solid var(--bpa-line, #e6e6e6); padding: 14px 0; }

.color-search-page .filter-row-label { min-width: 280px; font-weight: 600; color: var(--bpa-ink, #161616); }

.color-search-page .filter-row-description { margin-top: 6px; font-size: 0.95em; line-height: 1.5; color: var(--bpa-ink-2, #555555); font-weight: 400; max-width: 360px; }

.color-search-page .filter-row-options { display: flex; flex-wrap: wrap; gap: 10px 18px; flex: 1; }

.color-search-page .filter-row-options-stacked { display: block; }

.color-search-page .filter-option { display: inline-flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--bpa-ink-2, #555555); max-width: 100%; }

.color-search-page .filter-option span { white-space: normal; word-break: break-word; line-height: 1.35; }

.color-search-page .main-color-list { list-style: none; padding: 0; margin: 0; display: block; }

.color-search-page .main-color-list li { margin-bottom: 8px; padding: 6px 10px; background: var(--bpa-band, #f5f5f5); border: 1px solid var(--bpa-line-2, #d6d6d6); border-radius: 4px; }

.color-search-page .main-color-list label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; width: 100%; }

.color-search-page .main-color-list input[type="checkbox"] { position: static; opacity: 1; width: 1.1em; height: 1.1em; flex-shrink: 0; margin: 0; cursor: pointer; accent-color: var(--bpa-accent, #D4004C); }

.color-search-page .hue-gradient-list { list-style: none; padding: 0; margin: 0; }

.color-search-page .hue-gradient-list li { margin-bottom: 8px; }

.color-search-page .hue-gradient-list label { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; }

.color-search-page .hue-gradient-swatch { display: inline-block; flex-shrink: 0; width: 56px; height: 18px; border-radius: 4px; border: 1px solid var(--bpa-line-2, #d6d6d6); vertical-align: middle; margin-right: 4px; }

.color-search-page .color-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--bpa-line-2, #d6d6d6); vertical-align: middle; flex-shrink: 0; }

.color-search-page .filter-actions { margin-top: 24px; }

.color-search-page #artworks-results { margin-top: 40px; }

@media (max-width: 768px) {
  .color-search-page .filter-row { flex-direction: column; gap: 8px; }

  .color-search-page .filter-row-label { min-width: auto; }

}
.color-search-page input[type="checkbox"] { accent-color: var(--bpa-accent, #D4004C); }

.color-search-page .main-color-list li:hover { border-color: var(--bpa-accent, #D4004C); }