/* Concern Finder */

.hmt-find__picks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

/*
 * A <button>, so Woodmart's `:is(.btn,.button,button,[type=submit])` styles
 * it too (square, grey, 42px). `.hmt ` lifts these above it — see tokens.css.
 */
.hmt .hmt-find__pick {
  height: auto;
  min-height: 0;
  margin: 0;
  font-family: var(--hm-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 12px 22px;
  border: 1px solid var(--hm-hair);
  border-radius: var(--hm-pill);
  background: var(--hm-paper);
  color: var(--hm-ink);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hmt .hmt-find__pick:hover { border-color: var(--hm-ink); background: var(--hm-paper); color: var(--hm-ink); }
.hmt .hmt-find__pick[aria-pressed="true"] {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: #fff;
}

.hmt-find__panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
  padding: 36px;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  background: var(--hm-paper);
}
.hmt-find__panel[hidden] { display: none; }

.hmt-find__body h3 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 10px 0 12px; }
.hmt-find__desc { font-weight: 300; color: var(--hm-ink-soft); max-width: 56ch; }

.hmt-find__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 22px 0 0;
}
.hmt-find__meta dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-body);
}
.hmt-find__meta dd {
  margin: 4px 0 0;
  font-family: var(--hm-display);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--hm-ink);
}

@media (max-width: 900px) {
  .hmt-find__panel { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* Booking and treatment-page buttons, stacked beside the panel copy. */
.hmt-find__cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
@media (max-width: 900px) { .hmt-find__cta { flex-direction: row; flex-wrap: wrap; } }

/* Phones: one swipeable row of concerns instead of five stacked rows. */
@media (max-width: 600px) {
  .hmt-find__picks {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -20px;
    padding: 2px 20px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hmt-find__picks::-webkit-scrollbar { display: none; }
  .hmt .hmt-find__pick { flex: none; white-space: nowrap; scroll-snap-align: start; }
}