/* ================================================================
   GUIDED PICKER — "What should I smoke?"
   ================================================================ */
.pk-modal { max-width: 680px; }

/* ── PROGRESS ───────────────────────────────────────────────────── */
.pk-progress {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 22px;
  padding-right: 46px;   /* clear the close button */
}
.pk-dot {
  width: 26px; height: 3px; border-radius: 999px;
  background: rgba(201,168,76,0.14);
  transition: var(--transition);
}
.pk-dot.done   { background: var(--gold-dark); }
.pk-dot.active { background: var(--gold); box-shadow: 0 0 10px rgba(201,168,76,0.5); }
.pk-step-label {
  margin-left: auto; font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-muted);
}

.pk-q {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 400; line-height: 1.22;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.pk-sub {
  font-size: 13.5px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 22px; max-width: 52ch;
}

/* ── OPTIONS ────────────────────────────────────────────────────── */
.pk-options { display: flex; flex-direction: column; gap: 9px; }
.pk-options.many { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.pk-opt {
  display: flex; align-items: center; gap: 14px;
  text-align: left; padding: 15px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
}
.pk-opt:hover {
  border-color: var(--border-h);
  background: var(--bg-card-h);
  transform: translateX(3px);
}
.pk-opt.on {
  border-color: var(--gold);
  background: var(--gold-glow);
  transform: none;
}
.pk-opt-icon { font-size: 24px; line-height: 1; flex-shrink: 0; width: 30px; text-align: center; }
.pk-opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pk-opt-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.pk-opt.on .pk-opt-title { color: var(--gold-light); }
.pk-opt-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.pk-check {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 11px; font-weight: 800;
  border: 1px solid var(--border);
  color: transparent;
  transition: var(--transition);
}
.pk-opt.on .pk-check {
  background: var(--gold); color: var(--bg-deep); border-color: var(--gold);
}

/* ── NAV ────────────────────────────────────────────────────────── */
.pk-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 26px;
}
.pk-back {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 10px 16px; border-radius: 999px;
  transition: var(--transition);
}
.pk-back:hover { color: var(--gold-light); background: var(--gold-glow); }
.pk-next {
  padding: 12px 30px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--bg-deep); font-size: 14px; font-weight: 700;
  transition: var(--transition);
}
.pk-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(201,168,76,0.35); }
.pk-next:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── RESULTS ────────────────────────────────────────────────────── */
.pk-results-head { text-align: center; margin-bottom: 20px; }
.pk-kicker {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  padding: 4px 12px; border-radius: 999px;
  background: var(--gold-glow); border: 1px solid var(--border-h);
  margin-bottom: 12px;
}
.pk-results-head h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 400; line-height: 1.18;
  color: var(--text-primary);
}
.pk-top-brand {
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 6px;
}

.pk-hero {
  display: flex; align-items: center; gap: 20px;
  width: 100%; padding: 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  transition: var(--transition);
}
.pk-hero:hover { border-color: var(--border-h); background: var(--bg-card-h); }
.pk-hero img, .pk-hero-noimg {
  width: 84px; height: 84px; flex-shrink: 0;
  object-fit: contain; border-radius: var(--radius-md);
}
.pk-hero-noimg { display: grid; place-items: center; font-size: 34px; background: var(--bg-card); }
.pk-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; flex: 1; text-align: center;
}
.pk-hero-stats b {
  display: block; font-family: var(--font-serif);
  font-size: 19px; font-weight: 400; color: var(--gold-light);
  line-height: 1.15;
}
.pk-hero-stats i {
  font-style: normal; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}

.pk-why, .pk-firsttimer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 16px;
}
.pk-firsttimer {
  background: rgba(224,123,58,0.05);
  border-color: rgba(224,123,58,0.22);
}
.pk-why-label {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.pk-firsttimer .pk-why-label { color: #e07b3a; }
.pk-why ul, .pk-firsttimer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pk-why li, .pk-firsttimer li {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 20px; position: relative;
}
.pk-why li::before, .pk-firsttimer li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}
.pk-firsttimer li::before { background: #e07b3a; }
.pk-firsttimer strong { color: var(--text-primary); }

/* ── ALTERNATES ─────────────────────────────────────────────────── */
.pk-alts { margin-bottom: 20px; }
.pk-alt {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left; padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: var(--transition);
}
.pk-alt:hover { border-color: var(--border-h); background: var(--bg-card-h); transform: translateX(3px); }
.pk-alt img, .pk-alt-noimg {
  width: 44px; height: 44px; flex-shrink: 0;
  object-fit: contain; border-radius: var(--radius-sm);
}
.pk-alt-noimg { display: grid; place-items: center; font-size: 20px; background: var(--bg-deep); }
.pk-alt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pk-alt-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.pk-alt-meta { font-size: 11px; color: var(--text-muted); }
.pk-alt-why { font-size: 11px; color: var(--gold); }
.pk-alt-rating {
  font-family: var(--font-serif);
  font-size: 20px; color: var(--gold-light); flex-shrink: 0;
}

.pk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-restart, .pk-browse {
  padding: 11px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: var(--transition);
}
.pk-restart { border: 1px solid var(--border); color: var(--text-muted); }
.pk-restart:hover { color: var(--gold-light); border-color: var(--gold); background: var(--gold-glow); }
.pk-browse {
  background: var(--gold-glow);
  border: 1px solid var(--border-h);
  color: var(--gold-light);
}
.pk-browse:hover { background: rgba(201,168,76,0.2); border-color: var(--gold); }

.pk-none { text-align: center; padding: 40px 20px; }
.pk-none-icon { font-size: 38px; margin-bottom: 12px; opacity: 0.6; }
.pk-none h3 {
  font-family: var(--font-serif); font-size: 22px;
  font-weight: 400; color: var(--gold-light); margin-bottom: 10px;
}
.pk-none p {
  font-size: 13.5px; color: var(--text-muted);
  line-height: 1.6; max-width: 400px; margin: 0 auto 20px;
}

@media (max-width: 600px) {
  .pk-hero { flex-direction: column; gap: 14px; }
  .pk-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pk-options.many { grid-template-columns: 1fr; }
  .pk-opt { padding: 13px; gap: 11px; }
  .pk-opt-icon { font-size: 21px; width: 26px; }
  .pk-opt-title { font-size: 14px; }
}