/* PAGE FAMILY: search-by-color checkbox finder (C5) - SKIN tier - from site-allpaintingsstore-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(--aps-ink-2, #4A4641); 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(--aps-rule, #DCD7CB); padding: 14px 0;
}

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

.color-search-page .filter-row-description {
  margin-top: 6px; font-size: 0.95em; line-height: 1.5;
  color: var(--aps-ink-2, #4A4641); 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(--aps-ink-2, #4A4641); 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(--aps-bg, #F6F4EF); border: 1px solid var(--aps-rule, #DCD7CB); border-radius: 4px;
  transition: border-color .15s, background .15s;
}

.color-search-page .main-color-list li:hover {
  border-color: var(--aps-burgundy, #5B1622); background: var(--aps-bg-2, #ECE9E1);
}

.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(--aps-burgundy, #5B1622);
}

.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(--aps-rule-2, #C8C2B3); 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(--aps-rule-2, #C8C2B3); vertical-align: middle; flex-shrink: 0;
}

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

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

.color-search-page input[type="checkbox"] { accent-color: var(--aps-burgundy, #5B1622); }

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

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

}