/* PAGE FAMILY: search-by-color checkbox finder (C5) - SKIN tier - from site-wikioo-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(--wk-ink-2, #6e6c68); 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(--wk-line, #e6e6e6); padding: 14px 0; }

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

.color-search-page .filter-row-description { margin-top: 6px; font-size: 0.95em; line-height: 1.5; color: var(--wk-ink-2, #6e6c68); 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(--wk-ink-2, #6e6c68); 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(--wk-band, #f5f5f5); border: 1px solid var(--wk-line-2, #d6d6d6); border-radius: 4px; transition: border-color var(--ease, .12s ease); }

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

.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(--wk-accent, #1c1c1c); }

.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(--wk-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(--wk-line-2, #d6d6d6); vertical-align: middle; flex-shrink: 0; }

.color-search-page .repruct_content_collapse button.accordion-button,.color-search-page .repruct_content_collapse button.accordion-button:not(.collapsed) {
  background: var(--accent-tint, #f2f2f2) !important;
  color: var(--ink, #1c1c1c) !important;
  font-family: var(--font-body, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.color-search-page .repruct_content_collapse button.accordion-button:focus {
  border-color: var(--line, #e6e6e6) !important;
  box-shadow: none !important;
  outline: none !important;
}

.color-search-page .repruct_content_collapse button.accordion-button::after {
  filter: grayscale(1) brightness(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(--wk-accent, #1c1c1c); }

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

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

}

/* ── search submit button — WK brand values (measured from the git-HEAD
   reference render; the brand's legacy .addToCart override died with A1z) ── */
.color-search-page .color-search-submit-button {
  background-color: transparent;
  color: rgb(28, 28, 28);
  font-weight: 600;
  letter-spacing: 1.4px;
  border: 1px solid rgb(28, 28, 28);
}