/* ==========================================================================
   SNUSLAB — Snus Finder page
   Answer cards follow the product-card style; progress reuses the cart
   track from sl-cart.css; results use the shared .sl-grid / .sl-card.
   ========================================================================== */

.sl-finder-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 36px 20px 60px;
}

.sl-fp-card {
  background: #ffffff;
  border: 1px solid #e4e6e8;
  border-radius: 16px;
  padding: 20px 18px 24px;
  scroll-margin-top: 80px;
}

/* ---------- progress ---------- */
.sl-fp-progress { margin-bottom: 22px; }
.sl-fp-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 22px;
}
.sl-fp-count { font-size: 12.5px; font-weight: 700; color: #0a0a0a; }
.sl-fp-back,
.sl-fp-back:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  cursor: pointer;
}
.sl-fp-back:hover { color: #0a0a0a !important; }
.sl-fp-back[hidden] { display: none !important; }
.sl-fp-card .sl-cart-track i { transition: width .4s cubic-bezier(.4,0,.2,1); }

/* ---------- question ---------- */
.sl-fp-step { display: none; }
.sl-fp-step.is-active { display: block; animation: slFpIn .25s ease; }
@keyframes slFpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sl-fp-q {
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 800;
  line-height: 1.15;
  color: #0a0a0a;
  margin: 0 0 16px;
}

/* ---------- answer cards ---------- */
.sl-fp-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sl-fo,
.sl-fo:focus {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 0 !important;
  margin: 0;
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid #e4e6e8 !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.sl-fo:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #9aa0a6 !important;
  transform: translateY(-2px);
}

.sl-fo-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #f4f5f6;
  color: #0a0a0a;
  transition: background .15s, color .15s;
}
.sl-fo-media .sl-ic { width: 30px; height: 30px; stroke-width: 1.5; }

.sl-fo-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px 13px;
}
.sl-fo-body b { font-size: 14px; font-weight: 700; color: #0a0a0a; line-height: 1.25; }
.sl-fo-body small { font-size: 11.5px; color: #6b7280; line-height: 1.35; }

/* selected */
.sl-fo.is-selected,
.sl-fo.is-selected:hover { border-color: #0a0a0a !important; }
.sl-fo.is-selected .sl-fo-media { background: #0a0a0a; color: #ffffff; }

/* ---------- results ---------- */
.sl-fp-result[hidden] { display: none !important; }
.sl-fp-result { animation: slFpIn .25s ease; }
.sl-fp-result-head { margin-bottom: 16px; }
.sl-fp-result-head .sl-fp-q { margin-bottom: 10px; }
.sl-fp-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-fp-picks:empty { display: none; }

.sl-fp-empty {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
  padding: 8px 0;
}
.sl-fp-empty a { color: #0a0a0a; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.sl-fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.sl-fp-more,
.sl-fp-restart,
.sl-fp-more:focus,
.sl-fp-restart:focus,
a.sl-fp-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .2px;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
.sl-fp-more,
.sl-fp-more:focus { background: #0a0a0a !important; color: #ffffff !important; border: 1px solid #0a0a0a !important; }
.sl-fp-more:hover { background: #2c2f33 !important; }
.sl-fp-more[hidden] { display: none !important; }
.sl-fp-restart,
.sl-fp-restart:focus,
a.sl-fp-all { background: #ffffff !important; color: #0a0a0a !important; border: 1px solid #e4e6e8 !important; }
.sl-fp-restart:hover,
a.sl-fp-all:hover { border-color: #0a0a0a !important; color: #0a0a0a !important; }

@media (min-width: 720px) {
  .sl-fp-card { padding: 28px 28px 32px; }
  .sl-fp-options { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .sl-fp-options--3 { grid-template-columns: repeat(3, 1fr); }
}