/* ==========================================================================
   Kedn Hub — shared styles for the guided-quiz finders (Gift/Fragrance/
   Watch Finder): single-question-per-screen quiz UI + a match-% badge on
   result cards. Reuses .product-card / .product-grid / .plp-empty from
   shop.css and .btn / .eyebrow from style.css.
   ========================================================================== */

/* margin-inline:auto so this single-column quiz flow centers itself
   in the page instead of hugging the left edge with a large empty
   gutter once the container is much wider than the 40rem cap. */
.finder-hero {
  padding-block: var(--space-6) var(--space-7);
  max-width: 40rem;
  margin-inline: auto;
}

.finder-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
}

.finder-hero p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.finder-quiz {
  max-width: 40rem;
  margin-inline: auto;
  padding-bottom: var(--space-9);
}

.finder-quiz h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin-top: var(--space-3);
}

.finder-subtitle {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.finder-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.finder-progress__bar {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  display: block;
}

.finder-progress__bar span {
  display: block;
  height: 100%;
  background: var(--color-accent-strong);
  transition: width var(--duration-standard) var(--ease-standard);
}

.finder-progress__label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.finder-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.finder-option {
  border: 1px solid var(--color-hairline);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.finder-option:hover {
  border-color: var(--color-accent-strong);
}

.finder-option.is-selected {
  border-color: var(--color-accent-strong);
  background: var(--color-warm-neutral-soft);
}

.finder-option__label {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
}

.finder-option__hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.finder-nav {
  margin-top: var(--space-6);
}

.finder-nav:empty {
  display: none;
}

/* ---- Results ---- */
.finder-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-6);
}

.finder-results-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
}

.finder-results-head p {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.finder-results {
  padding-bottom: var(--space-9);
}

.finder-results[hidden] {
  display: none;
}

.finder-quiz[hidden] {
  display: none;
}

/* ---- Match badge on result cards ---- */
.match-badge {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  background: var(--color-black);
  color: var(--color-gold-tint);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  padding: 3px var(--space-2);
}

@media (min-width: 640px) {
  .finder-options {
    grid-template-columns: repeat(3, 1fr);
  }
}