/* =========================================================================
HSQ Stone Finder — scoped styles (.hsq-stone-finder) v2
Quiet luxury 70% + friendly beginner guide 30%.
Mobile-first. Palette + type aligned to hobbystonequartz-custom.css.
v2 adds: option icons, helper line, hero pills, result type badge,
stone image cards (with text-row fallback), CTA camera/DM icon.
- All selectors namespaced under .hsq-stone-finder (no global side effects).
- No !important, no position:fixed, no large box-shadows.
- Pairs with stone-finder.js v2 (icon / image / note data). Falls back
gracefully to text rows when an option has no icon / a link has no image.
- Fonts (Noto Serif/Sans Thai, Cormorant Garamond) provided by the theme.
========================================================================= */
.hsq-stone-finder {
--sf-bg: #ffffff;
--sf-bg-warm: #fffdfa; /* slightly warm white for option cards */
--sf-surface: #fbf8f2; /* question + result card */
--sf-surface-2: #f3eee4; /* selected / soft fill */
--sf-sand: #efe7d6; /* CTA panel / icon badge */
--sf-pill: #f1ebdf;
--sf-border: #e6ddcb;
--sf-hairline: #ece4d4;
--sf-text: #2a2620;
--sf-text-soft: #6f6757;
--sf-text-mute: #9a917f;
--sf-accent: #5a4a6e; /* plum */
--sf-accent-soft: #9a8ba0;
--sf-taupe: #7c6f5d;
--sf-radius: 14px;
--sf-ff-serif: "Noto Serif Thai", "Cormorant Garamond", Georgia, serif;
--sf-ff-eyebrow: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
--sf-ff-sans: "Noto Sans Thai", "Inter", system-ui, sans-serif;
box-sizing: border-box;
max-width: 720px;
margin: clamp(1rem, 3vw, 2rem) auto clamp(2rem, 6vw, 3rem);
font-family: var(--sf-ff-sans);
color: var(--sf-text);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
.hsq-stone-finder *,
.hsq-stone-finder *::before,
.hsq-stone-finder *::after { box-sizing: border-box; }
/* ---- Hero / lead (page body) ------------------------------------------- */
.hsq-stone-finder .hsq-sf-eyebrow {
display: block;
font-family: var(--sf-ff-eyebrow);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--sf-accent-soft);
margin: 0 0 0.6em;
}
.hsq-stone-finder .hsq-sf-lead {
font-size: 1rem;
color: var(--sf-text-soft);
margin: 0 0 0.85em;
}
/* Friendly pills — replaces the old note card.
Markup: ……
*/
.hsq-stone-finder .hsq-sf-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 1.1em;
padding: 0;
list-style: none;
}
.hsq-stone-finder .hsq-sf-pills span,
.hsq-stone-finder .hsq-sf-pills li {
display: inline-flex;
align-items: center;
background: var(--sf-pill);
border: 1px solid #e4dac7;
color: var(--sf-text-mute);
font-size: 0.78rem;
border-radius: 999px;
padding: 5px 12px;
}
/* Disclaimer note — placed at the FOOTER (below the tool). Small & muted so it
doesn't dominate the first view. */
.hsq-stone-finder .hsq-sf-note {
display: block;
background: var(--sf-surface-2);
border-radius: 10px;
padding: 0.8em 1.05em;
font-size: 0.8rem;
line-height: 1.6;
color: var(--sf-text-mute);
margin: 1.3em 0 0;
}
/* ---- Intro hero (eyebrow / H1 / lead / pills) -------------------------- */
.hsq-stone-finder .hsq-sf-intro {
margin: 0 0 1.4em;
padding-bottom: 1.3em;
border-bottom: 1px solid var(--sf-hairline);
}
.hsq-stone-finder .hsq-sf-h1 {
font-family: var(--sf-ff-serif);
font-size: clamp(1.5rem, 5vw, 2rem);
font-weight: 500;
line-height: 1.3;
color: var(--sf-text);
margin: 0.15em 0 0.4em;
padding: 0;
}
/* Heading-interference guard: these UI headings must NEVER inherit SWELL's
.post_content h1/h2/h3/h4 bar / underline / left-border decorations.
(JS renders the dynamic ones as role="heading" divs; this also protects the
real