/* ============================================================================
   StoneMandi — Global Design System
   Source of truth: .claude/skills/stonemandi-design/SKILL.md

   The only stylesheet the site loads. The legacy style.css was retired in
   Hour 4 once the last templates depending on it were redirected away.

   Everything is namespaced `sm-`.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Colour — exactly the approved palette, no additions */
  --charcoal:      #141414;
  --stone-bg:      #F4F1EB;
  --white:         #FFFFFF;
  --graphite:      #32312F;
  /* Brand value is #77736D. It measures 4.18:1 on --stone-bg, just under
     WCAG AA (4.5:1) for the small text it is used for — breadcrumbs, meta,
     hints. Darkened by ~3% luminance to 4.77:1; visually near-identical.
     Revert to #77736D if the brand value must be exact. */
  --muted:         #6E6A64;
  --earth-accent:  #B9683C;
  --border:        #DEDAD3;

  /* Derived surfaces (opacity of the above only — no new hues) */
  --stone-bg-deep: #EDE9E1;
  --charcoal-08:   rgba(20, 20, 20, .08);
  --charcoal-56:   rgba(20, 20, 20, .56);
  --on-dark:       rgba(244, 241, 235, .72);
  --on-dark-soft:  rgba(244, 241, 235, .48);

  /* Type */
  --font-ui:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --t-xs:   0.75rem;    /* 12 — labels, eyebrows */
  --t-sm:   0.8125rem;  /* 13 — meta */
  --t-base: 1rem;       /* 16 — body */
  --t-md:   1.0625rem;  /* 17 — lead body */
  --t-lg:   1.375rem;   /* 22 — h3 */
  --t-xl:   1.75rem;    /* 28 — h2 mobile */
  --t-2xl:  2.25rem;    /* 36 — h2 desktop */
  --t-3xl:  2.75rem;    /* 44 — h1 mobile */
  --t-4xl:  4rem;       /* 64 — h1 desktop */

  /* Spacing — 4px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Section rhythm — whitespace is a design element */
  --sec-y:    clamp(56px, 9vw, 112px);
  --sec-y-sm: clamp(40px, 6vw, 72px);

  /* Containers */
  --container: 1200px;
  --gutter:    clamp(20px, 5vw, 40px);

  /* Borders & radii — restrained, no random radii */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --hairline: 1px solid var(--border);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .22s;

  /* Layout */
  --header-h: 64px;
}

@media (min-width: 900px) { :root { --header-h: 76px; } }

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.sm {
  margin: 0;
  background: var(--stone-bg);
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.sm) :where(h1, h2, h3, h4) {
  margin: 0;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}
:where(.sm) :where(p)  { margin: 0; }
:where(.sm) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.sm) :where(a)  { color: inherit; text-decoration: none; }
:where(.sm) :where(ul) { margin: 0; padding: 0; list-style: none; }

/* Editorial serif — hero and important editorial headings ONLY */
.sm-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-style: normal;
}

/* Focus: one visible, consistent ring everywhere */
.sm :focus-visible {
  outline: 2px solid var(--earth-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.sm .sm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--charcoal); color: var(--stone-bg);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) 0;
}
.sm .sm-skip:focus { left: 0; }

.sm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------ */
.sm-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sm-sec    { padding-block: var(--sec-y); }
.sm-sec-sm { padding-block: var(--sec-y-sm); }
.sm-sec-line { border-top: var(--hairline); }
.sm-dark { background: var(--charcoal); color: var(--stone-bg); }
.sm-dark h2, .sm-dark h3 { color: var(--stone-bg); }

/* Section heading block */
.sm-eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.sm-dark .sm-eyebrow { color: var(--on-dark-soft); }

.sm-h2 { font-size: var(--t-xl); }
@media (min-width: 900px) { .sm-h2 { font-size: var(--t-2xl); } }

.sm-lead {
  font-size: var(--t-md);
  color: var(--graphite);
  max-width: 56ch;
  margin-top: var(--s-4);
}
.sm-dark .sm-lead { color: var(--on-dark); }

.sm-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}

/* ---------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------ */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                 /* touch target */
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.sm-btn:active { transform: translateY(1px); }

.sm .sm-btn-primary { background: var(--charcoal); color: var(--stone-bg); }
.sm .sm-btn-primary:hover { background: var(--graphite); }

.sm .sm-btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.sm .sm-btn-secondary:hover { background: var(--charcoal); color: var(--stone-bg); }

.sm .sm-btn-quiet {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--border);
}
.sm .sm-btn-quiet:hover { border-color: var(--charcoal); }

.sm-dark .sm-btn-primary { background: var(--stone-bg); color: var(--charcoal); }
.sm-dark .sm-btn-primary:hover { background: var(--white); }
.sm-dark .sm-btn-secondary { color: var(--stone-bg); border-color: rgba(244,241,235,.4); }
.sm-dark .sm-btn-secondary:hover { background: var(--stone-bg); color: var(--charcoal); border-color: var(--stone-bg); }

.sm-btn-sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }

/* Text link with accent underline — the accent's main job */
.sm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--earth-accent);
  transition: gap var(--dur) var(--ease);
}
.sm-link:hover { gap: var(--s-3); }
.sm-link svg { flex: none; }

/* ---------------------------------------------------------------------------
   5. FORM CONTROLS
   ------------------------------------------------------------------------ */
.sm-field {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  color: var(--charcoal);
  border: var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sm-field::placeholder { color: var(--muted); }
.sm-field:hover { border-color: #CFC9C0; }
.sm-field:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px var(--charcoal-08);
}

/* ---------------------------------------------------------------------------
   6. HEADER  —  [mark] StoneMandi   nav   secondary   CTA
   ------------------------------------------------------------------------ */
.sm-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--stone-bg);
  border-bottom: var(--hairline);
}
.sm-header-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

/* Logo lockup: mark left, live text wordmark immediately right */
.sm-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  margin-right: auto;
}
.sm-logo-mark {
  width: 34px; height: 34px;      /* inside a 64px header — height unchanged */
  object-fit: contain;
  flex: none;
}
.sm-logo-word {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  color: var(--charcoal);
}
@media (min-width: 900px) {
  .sm-logo-mark { width: 40px; height: 40px; }   /* inside a 76px header */
  .sm-logo-word { font-size: 1.1875rem; }
}

/* Desktop navigation */
.sm-nav { display: none; }
.sm-nav-list { display: flex; align-items: center; gap: var(--s-8); }
.sm-nav-list a {
  position: relative;
  font-size: 0.9375rem;
  color: var(--graphite);
  padding-block: var(--s-2);
  transition: color var(--dur) var(--ease);
}
.sm-nav-list a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--earth-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.sm-nav-list a:hover { color: var(--charcoal); }
.sm-nav-list a:hover::after,
.sm-nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.sm-header-actions { display: none; align-items: center; gap: var(--s-5); }
.sm .sm-header-secondary { font-size: 0.9375rem; color: var(--muted); }
.sm .sm-header-secondary:hover { color: var(--charcoal); }

/* Mobile: burger + full-height drawer (not a squeezed desktop menu) */
.sm-burger {
  width: 48px; height: 48px;
  margin-right: calc(var(--s-3) * -1);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
}
.sm-burger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--charcoal); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.sm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.sm-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 89;
  background: var(--stone-bg);
  padding: var(--s-8) var(--gutter) calc(var(--s-10) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.sm-drawer[data-open="true"] { visibility: visible; opacity: 1; transform: none; }
@media (min-width: 980px) { .sm-drawer { display: none; } }

.sm-drawer-link {
  display: flex;
  align-items: center;
  min-height: 56px;                 /* generous touch target */
  padding-block: var(--s-2);
  font-size: 1.25rem;
  font-weight: 500;
  border-bottom: var(--hairline);
}
.sm-drawer-sub {
  min-height: 48px;
  font-size: var(--t-base);
  font-weight: 400;
  color: var(--muted);
  border-bottom: 0;
}
.sm-drawer .sm-btn { margin-top: var(--s-6); width: 100%; }

body[data-nav-open="true"] { overflow: hidden; }

/* Desktop switch — declared after the mobile rules so it wins the cascade */
@media (min-width: 980px) {
  .sm-nav { display: block; }
  .sm-header-actions { display: flex; }
  .sm-burger { display: none; }
}

/* ---------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------ */
.sm-hero { padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px); }
.sm-hero-grid {
  display: grid;
  gap: 40px;                       /* action block → stone visual, on mobile */
  align-items: center;
}
@media (min-width: 900px) {
  .sm-hero-grid { gap: clamp(48px, 6vw, 72px); }
}
@media (min-width: 900px) {
  .sm-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.sm-hero h1 {
  font-size: var(--t-3xl);
  line-height: 1.06;
  max-width: 15ch;
}
@media (min-width: 900px) { .sm-hero h1 { font-size: var(--t-4xl); } }

/* Instrument Serif ships a single weight; don't let the h1 rule fake-bold it. */
.sm-hero h1.sm-serif { font-weight: 400; letter-spacing: -0.02em; }

.sm-hero-sub {
  margin-top: var(--s-6);
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--graphite);
  max-width: 46ch;
}
.sm-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}
@media (max-width: 420px) {
  .sm-hero-cta { display: grid; grid-template-columns: 1fr; }
}

/* --- The stone visual: two planes open and reveal the source ------------- */
.sm-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--stone-bg-deep);
  border: var(--hairline);
}

/* The revealed source sits behind the planes */
.sm-stage-source {
  position: absolute; inset: 0;
  display: grid;
  place-items: end stretch;
  background: linear-gradient(170deg, #EDE9E1 0%, #E3DED4 52%, #D8D2C6 100%);
}
/* <picture> wraps the photo; the wrapper must fill the stage too. */
.sm-stage-source picture {
  position: absolute; inset: 0;
  display: block;
}
.sm-stage-source img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mobile: crop tight on the foreground slab so it still reads at ~350px. */
  object-position: 58% center;
}
@media (min-width: 900px) {
  /* Desktop: pull left to keep the receding row of slabs in frame — it is
     what says "warehouse of real stock" rather than "one stone texture". */
  .sm-stage-source img { object-position: 45% center; }
}
/* Earth-accent floor — the "path to the source" from the mark */
.sm-stage-floor {
  position: relative;
  height: 12%;
  background: var(--earth-accent);
  clip-path: polygon(0 100%, 100% 62%, 100% 100%);
}

/* Two charcoal planes, closed at rest, opening on load */
.sm-plane {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.4%;
  background: var(--charcoal);
  transform-origin: center left;
  will-change: transform;
  backface-visibility: hidden;
}
/* Resting state is OPEN. The entrance animates *from* closed, so if the
   animation never runs — old browser, reduced motion, CSS partially applied —
   the stone is visible rather than sealed behind two dark slabs. */
.sm-plane-l {
  left: 0;
  transform-origin: center left;
  transform: perspective(1100px) rotateY(-90deg);
}
.sm-plane-r {
  right: 0;
  transform-origin: center right;
  transform: perspective(1100px) rotateY(90deg);
  background: var(--graphite);
}

/* Hairline highlight along the opening edge — mirrors the mark's lit edge */
.sm-plane-l::after,
.sm-plane-r::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(244, 241, 235, .16);
}
.sm-plane-l::after { right: 0; }
.sm-plane-r::after { left: 0; }

/* ---------------------------------------------------------------------------
   8. HERO MOTION  (~1.2s total, CSS only, never blocks interaction)
   ------------------------------------------------------------------------ */
@keyframes sm-open-left  { from { transform: none; } }
@keyframes sm-open-right { from { transform: none; } }
@keyframes sm-rise       { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sm-fade       { from { opacity: 0; } to { opacity: 1; } }

/* `backwards` holds the closed state through the delay, then opens to the
   element's own resting transform. Total entrance: ~1.1s. */
.sm-plane-l { animation: sm-open-left  .95s var(--ease) .15s backwards; }
.sm-plane-r { animation: sm-open-right .95s var(--ease) .15s backwards; }
.sm-stage-source { animation: sm-fade .7s var(--ease) .35s both; }

.sm-anim-1 { animation: sm-rise .6s var(--ease) .1s both; }
.sm-anim-2 { animation: sm-rise .6s var(--ease) .22s both; }
.sm-anim-3 { animation: sm-rise .6s var(--ease) .34s both; }

/* Mobile: much lighter — a flat slide, no 3-D plane rotation at all */
@keyframes sm-slide-left  { from { transform: none; } }
@keyframes sm-slide-right { from { transform: none; } }

@media (max-width: 899px) {
  .sm-plane-l { transform: translateX(-101%); animation: sm-slide-left  .6s ease-out .1s backwards; }
  .sm-plane-r { transform: translateX(101%);  animation: sm-slide-right .6s ease-out .1s backwards; }
  .sm-anim-2 { animation-delay: .18s; }
  .sm-anim-3 { animation-delay: .26s; }
}

/* Reduced motion: final state, immediately */
/* Reduced motion: no entrance at all — the open resting state is already correct. */
@media (prefers-reduced-motion: reduce) {
  .sm-plane-l, .sm-plane-r,
  .sm-stage-source, .sm-anim-1, .sm-anim-2, .sm-anim-3 { animation: none; }
  .sm-stage-source, .sm-anim-1, .sm-anim-2, .sm-anim-3 { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   9. SEARCH
   ------------------------------------------------------------------------ */
.sm-search-band { background: var(--white); border-block: var(--hairline); }
.sm-search { padding-block: var(--s-10); }
.sm-search-form {
  display: flex;
  gap: var(--s-3);
  max-width: 760px;
  margin-inline: auto;
}
.sm-search-input-wrap { position: relative; flex: 1; }
.sm-search-input-wrap svg {
  position: absolute;
  left: var(--s-4); top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.sm-search-field { padding-left: 44px; }
.sm-search-form .sm-btn { flex: none; }
@media (max-width: 560px) {
  .sm-search-form { flex-direction: column; }
  .sm-search-form .sm-btn { width: 100%; }
}
.sm-search-hint {
  max-width: 760px;
  margin-inline: auto;
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: center;
}
.sm-search-hint a {
  border-bottom: 1px solid var(--border);
  padding: var(--s-2) 0;              /* comfortable to hit on mobile */
}
.sm-search-hint a:hover { border-color: var(--earth-accent); }

/* ---------------------------------------------------------------------------
   10. STONE LISTINGS
   Two columns from the smallest phone up, so a buyer sees several stones at
   once. The stone is the dominant element; everything else is quiet.
   ------------------------------------------------------------------------ */
.sm-stone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 22px;
}
@media (min-width: 600px)  { .sm-stone-grid { column-gap: 20px; row-gap: 32px; } }
@media (min-width: 900px)  { .sm-stone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sm-stone-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; } }

.sm-stone { display: flex; flex-direction: column; min-width: 0; }

/* Image: one consistent 4:3 crop, never stretched. */
.sm-stone-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--stone-bg-deep);
  border: var(--hairline);
}
.sm-stone-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s var(--ease);
}
.sm-stone:hover .sm-stone-media img { transform: scale(1.03); }
.sm-stone-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(165deg, #EDE9E1, #DDD7CB);
  color: var(--muted);
  font-size: var(--t-xs);
  text-align: center;
  padding: var(--s-3);
}

.sm-stone-body { padding-top: var(--s-3); flex: 1; min-width: 0; }

.sm-stone-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  /* Two lines max keeps every card in a row the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-stone-name a { display: block; }
.sm-stone-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sm-stone-spec {
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-stone-price {
  margin-top: var(--s-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--charcoal);
}
.sm-stone-seller {
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--muted);
  display: flex; align-items: baseline; gap: var(--s-1);
  min-width: 0;
}
.sm-stone-seller-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-tick { color: var(--earth-accent); font-size: .8em; flex: none; }

/* Actions: a subtle divider, then a quiet row. No boxed buttons. */
.sm-stone-actions {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.sm .sm-stone-cta {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--charcoal);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--earth-accent);
  transition: gap var(--dur) var(--ease);
}
.sm-stone:hover .sm-stone-cta { gap: var(--s-2); }
.sm .sm-stone-enquire {
  font-size: var(--t-xs);
  color: var(--muted);
  padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
}
.sm .sm-stone-enquire:hover { color: var(--charcoal); border-bottom-color: var(--border); }
.sm .sm-stone-enquire.is-unavailable { opacity: .4; }

/* Responsive label: "Send Requirement" is too wide to sit beside "View
   Stone" in a ~155px column, so narrow screens show "Enquire" instead. Both
   are in the markup; the accessible name stays "Send Requirement". This
   keeps ONE 44px action row rather than two stacked rows, which is worth
   roughly 45px of height on every card. */
.sm-label-short { display: none; }
@media (max-width: 520px) {
  .sm-label-full  { display: none; }
  .sm-label-short { display: inline; }
  .sm-stone-actions { gap: var(--s-3); }
  .sm .sm-stone-cta { font-size: 0.78125rem; }
}

.sm-results-bar {
  margin-top: var(--s-8);
  margin-bottom: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  align-items: baseline; justify-content: space-between;
}
.sm-results-count { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.sm-results-note { font-size: var(--t-xs); color: var(--muted); }

.sm-empty {
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: clamp(32px, 6vw, 56px);
  text-align: center;
  background: var(--white);
}
.sm-empty p { color: var(--muted); margin-top: var(--s-3); max-width: 44ch; margin-inline: auto; }
.sm-empty .sm-btn { margin-top: var(--s-6); }

/* ---------------------------------------------------------------------------
   11. HOW IT WORKS — a sequence, not three marketing cards
   ------------------------------------------------------------------------ */
.sm-steps {
  display: grid;
  gap: var(--s-8);
  counter-reset: sm-step;
}
@media (min-width: 820px) {
  .sm-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-10); }
}
.sm-step { position: relative; padding-top: var(--s-6); border-top: 1px solid rgba(244,241,235,.16); }
.sm-step-n {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--earth-accent);
  margin-bottom: var(--s-4);
}
.sm-step h3 { font-size: var(--t-lg); }
.sm-step p { margin-top: var(--s-3); color: var(--on-dark); font-size: 0.9375rem; }
/* Connector line between steps on desktop */
@media (min-width: 820px) {
  .sm-step::after {
    content: "";
    position: absolute; top: -1px; right: calc(var(--s-10) * -1);
    width: var(--s-10); height: 1px;
    background: rgba(244,241,235,.16);
  }
  .sm-step:last-child::after { display: none; }
}

/* ---------------------------------------------------------------------------
   12. WHY STONEMANDI
   ------------------------------------------------------------------------ */
.sm-why {
  display: grid;
  gap: var(--s-8) var(--s-10);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sm-why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .sm-why { grid-template-columns: repeat(4, 1fr); } }
.sm-why-item { padding-top: var(--s-5); border-top: 2px solid var(--charcoal); }
.sm-why-item h3 { font-size: var(--t-base); font-weight: 600; }
.sm-why-item p { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--muted); }

/* ---------------------------------------------------------------------------
   13. SOURCING ASSISTANCE BAND
   ------------------------------------------------------------------------ */
.sm-assist-grid {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 860px) {
  .sm-assist-grid { grid-template-columns: 1.2fr auto; gap: var(--s-16); }
}
.sm-assist h2 { font-size: var(--t-xl); max-width: 20ch; }
@media (min-width: 900px) { .sm-assist h2 { font-size: var(--t-2xl); } }

/* ---------------------------------------------------------------------------
   14. PERSISTENT HELP — subtle, small, never a giant bubble
   ------------------------------------------------------------------------ */
.sm .sm-help {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-4);
  background: var(--charcoal);
  color: var(--stone-bg);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(20, 20, 20, .14);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.sm .sm-help[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.sm .sm-help:hover { background: var(--graphite); }
.sm-help svg { flex: none; }
@media (min-width: 900px) {
  .sm-help { right: var(--s-6); bottom: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-help { transition: none; }
}

/* ---------------------------------------------------------------------------
   15. FLASH MESSAGES
   ------------------------------------------------------------------------ */
.sm-flashes { padding-top: var(--s-4); display: grid; gap: var(--s-2); }
.sm-flash {
  padding: var(--s-3) var(--s-4);
  border: var(--hairline);
  border-left: 3px solid var(--muted);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 0.9375rem;
}
.sm-flash.success { border-left-color: var(--charcoal); }
.sm-flash.danger  { border-left-color: var(--earth-accent); }
.sm-flash.warning { border-left-color: var(--earth-accent); }

/* ---------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------ */
.sm-footer {
  background: var(--charcoal);
  color: var(--on-dark);
  padding-block: var(--sec-y-sm) var(--s-10);
}
.sm-footer-top {
  display: grid;
  gap: var(--s-10);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid rgba(244,241,235,.12);
}
@media (min-width: 780px) {
  .sm-footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-12); }
}
@media (min-width: 1040px) {
  .sm-footer-top { gap: var(--s-16); }
}
.sm-footer .sm-logo-word { color: var(--stone-bg); }
.sm-footer-blurb { margin-top: var(--s-4); max-width: 34ch; font-size: 0.9375rem; }
.sm-footer h4,
.sm-footer-h {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.sm-footer-list { display: grid; gap: var(--s-3); }
.sm-footer-list a {
  font-size: 0.9375rem;
  color: var(--on-dark);
  transition: color var(--dur) var(--ease);
  display: inline-block;
  padding-block: var(--s-3);          /* ~44px tap target on touch */
}
@media (min-width: 780px) {
  .sm-footer-list a { padding-block: var(--s-1); }
}
.sm-footer-list a:hover { color: var(--stone-bg); }
.sm-footer-bottom {
  padding-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--on-dark-soft);
}

/* ---------------------------------------------------------------------------
   17. BREADCRUMBS
   ------------------------------------------------------------------------ */
.sm-crumbs { margin-bottom: var(--s-8); }
.sm-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
}
.sm-crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.sm-crumbs li + li::before { content: "/"; color: var(--border); }
.sm-crumbs a { padding-block: var(--s-1); }
.sm-crumbs a:hover { color: var(--charcoal); }
.sm-crumbs [aria-current] { color: var(--charcoal); }

/* ---------------------------------------------------------------------------
   18. VERIFICATION BADGE — rendered only when the record says verified
   ------------------------------------------------------------------------ */
.sm-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--graphite);
  white-space: nowrap;
}
.sm-badge svg { color: var(--earth-accent); }

/* ---------------------------------------------------------------------------
   19. FILTERS
   ------------------------------------------------------------------------ */
.sm-filters {
  margin-top: var(--s-10);
  padding: var(--s-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--s-5);
}
.sm-filter-search { position: relative; }
.sm-filter-search svg {
  position: absolute; left: var(--s-4); top: 50%;
  transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.sm-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sm-chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s-5);
  border: var(--hairline); border-radius: 999px;
  background: var(--white);
  font-size: 0.9375rem; font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sm-chip:hover { border-color: var(--charcoal); }
.sm .sm-chip.is-on { background: var(--charcoal); border-color: var(--charcoal); color: var(--stone-bg); }

.sm-selects { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 720px) {
  .sm-selects { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; }
}
.sm-select-wrap { display: block; }
.sm-select-wrap select { width: 100%; appearance: none; padding-right: var(--s-8); cursor: pointer; }
.sm-filter-clear { font-size: var(--t-sm); color: var(--muted); padding: var(--s-3); }
.sm-filter-clear:hover { color: var(--charcoal); }

/* ---------------------------------------------------------------------------
   21. PRODUCT DETAIL
   ------------------------------------------------------------------------ */
.sm-pd { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .sm-pd { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.sm-pd-main {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--stone-bg-deep);
  border: var(--hairline);
}
.sm-pd-main img { width: 100%; height: 100%; object-fit: cover; }
.sm-pd-thumbs {
  margin-top: var(--s-3);
  display: flex; gap: var(--s-3);
  overflow-x: auto; padding-bottom: var(--s-2);
  scrollbar-width: thin;
}
.sm-pd-thumb {
  flex: none; width: 84px; height: 64px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: none; cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.sm-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sm-pd-thumb:hover { border-color: var(--charcoal); }
.sm-pd-thumb.is-on { border-color: var(--earth-accent); border-width: 2px; }

.sm-pd-title { font-size: var(--t-xl); }
@media (min-width: 900px) { .sm-pd-title { font-size: var(--t-2xl); } }
.sm-pd-sub { margin-top: var(--s-3); color: var(--muted); font-size: 0.9375rem; }
.sm-pd-price { margin-top: var(--s-6); font-size: var(--t-lg); font-weight: 600; }
.sm-pd-price-note { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--muted); }

.sm-pd-h {
  margin-top: var(--s-10);
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sm-pd-desc { color: var(--graphite); max-width: 62ch; }

.sm-specs { display: grid; gap: 0; border-top: var(--hairline); }
.sm-spec {
  display: grid; grid-template-columns: 40% 1fr; gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: var(--hairline);
  font-size: 0.9375rem;
}
.sm-spec dt { color: var(--muted); }
.sm-spec dd { margin: 0; }

.sm-cta-block {
  margin-top: var(--s-10);
  padding: var(--s-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  display: grid; gap: var(--s-3);
}
.sm-btn-block { width: 100%; }
.sm-enquiry-note {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.5;
}

.sm-seller-card {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5);
  border: var(--hairline); border-radius: var(--r-lg);
  background: var(--white);
}
.sm-seller-name { font-size: var(--t-base); font-weight: 600; }
.sm-seller-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.sm-seller-meta { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--muted); }

/* ---------------------------------------------------------------------------
   22. SELLER DIRECTORY + PROFILE
   ------------------------------------------------------------------------ */
.sm-seller-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .sm-seller-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sm-seller-grid { grid-template-columns: repeat(3, 1fr); } }

.sm-seller-tile {
  display: flex; flex-direction: column; gap: var(--s-5);
  justify-content: space-between;
  padding: var(--s-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}
.sm-seller-tile:hover { border-color: #CFC9C0; }
.sm-seller-tile-name { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; }

.sm-seller-facts, .sm-profile-facts { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.sm-seller-facts > div, .sm-profile-facts > div {
  display: grid; grid-template-columns: 38% 1fr; gap: var(--s-3);
  font-size: 0.9375rem;
}
.sm-seller-facts dt, .sm-profile-facts dt { color: var(--muted); }
.sm-seller-facts dd, .sm-profile-facts dd { margin: 0; }

.sm-profile { display: grid; gap: var(--s-8); }
@media (min-width: 900px) {
  .sm-profile { grid-template-columns: 1fr 340px; gap: var(--s-16); align-items: start; }
}
.sm-profile-name { font-size: var(--t-xl); }
@media (min-width: 900px) { .sm-profile-name { font-size: var(--t-2xl); } }
.sm-profile-facts { max-width: 460px; }
.sm-profile-cta {
  padding: var(--s-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
}
.sm-profile-about { color: var(--graphite); max-width: 66ch; }
.sm-profile-about-note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); }

/* ---------------------------------------------------------------------------
   23. FORMS + PROCESS
   ------------------------------------------------------------------------ */
.sm-narrow { max-width: 560px; }
.sm-form-page { display: grid; gap: clamp(40px, 6vw, 72px); }
@media (min-width: 940px) { .sm-form-page { grid-template-columns: 1fr 1fr; align-items: start; } }

.sm-form {
  padding: var(--s-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  display: grid; gap: var(--s-5);
}
.sm-form .sm-pd-h:first-child { margin-top: 0; }
.sm-form .sm-pd-h { margin-top: var(--s-4); margin-bottom: 0; }
.sm-field-row { display: grid; gap: var(--s-2); }
.sm-field-grid { display: grid; gap: var(--s-5); }
@media (min-width: 560px) { .sm-field-grid { grid-template-columns: 1fr 1fr; } }
.sm-label { font-size: 0.9375rem; font-weight: 500; }
.sm-label span { color: var(--earth-accent); }
.sm-hint { font-size: var(--t-sm); color: var(--muted); }
.sm-hint-block { margin-top: calc(var(--s-2) * -1); }
textarea.sm-field { min-height: 110px; resize: vertical; line-height: 1.6; }
.sm-form-foot { font-size: 0.9375rem; color: var(--muted); }
.sm-form-note {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--earth-accent);
  background: var(--white);
  font-size: 0.9375rem;
  color: var(--graphite);
}

.sm-process { margin-top: var(--s-10); display: grid; gap: var(--s-6); }
.sm-process li { display: flex; gap: var(--s-4); align-items: flex-start; }
.sm-process-n {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600;
}
.sm-process h2 { font-size: var(--t-base); font-weight: 600; }
.sm-process p { margin-top: var(--s-1); font-size: 0.9375rem; color: var(--muted); }

.sm-empty-actions {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
}

/* ---------------------------------------------------------------------------
   25. DISABLED ENQUIRY STATE
   Rendered when STONEMANDI_WHATSAPP_NUMBER is not configured yet. Clearly
   inert, never a broken link and never an error page.
   ------------------------------------------------------------------------ */
.sm .is-unavailable {
  cursor: not-allowed;
  opacity: .45;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   26. ADMIN / CRM
   Built for speed on a phone as much as a laptop.
   ------------------------------------------------------------------------ */
.sm-admin-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.sm-admin-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.sm-alert {
  margin-bottom: var(--s-8);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: var(--hairline);
  border-left: 3px solid var(--earth-accent);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.sm-alert code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  background: var(--stone-bg-deep);
  padding: 1px 5px; border-radius: var(--r-sm);
}

.sm-stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .sm-stats { grid-template-columns: repeat(5, 1fr); } }
.sm-stat {
  display: block;
  padding: var(--s-5);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}
a.sm-stat:hover { border-color: var(--charcoal); }
.sm-stat.is-due { border-left: 3px solid var(--earth-accent); }
.sm-stat-n { display: block; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; }
.sm-stat-l { display: block; margin-top: var(--s-1); font-size: var(--t-sm); color: var(--muted); }

.sm-crm-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.sm-crm-search { display: flex; gap: var(--s-3); max-width: 560px; }
.sm-crm-search .sm-field { flex: 1; }
.sm-crm-search .sm-btn { flex: none; }

/* ── Table: scrolls on desktop, becomes stacked cards on phones ────────── */
.sm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sm-table th {
  text-align: left;
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--hairline);
  white-space: nowrap;
}
.sm-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--hairline);
  vertical-align: top;
}
.sm-table tbody tr:last-child td { border-bottom: 0; }
.sm-table tr.is-due { background: #FBF6F2; }
.sm-table-sub { display: block; font-size: var(--t-sm); color: var(--muted); }
.sm .sm-table-link {
  display: inline-block;
  padding-block: var(--s-2);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font-family: var(--font-ui); font-size: inherit; cursor: pointer;
}
.sm .sm-table-link:hover { border-color: var(--earth-accent); }
.sm .sm-table-danger { color: var(--earth-accent); }
.sm-table-actions { white-space: nowrap; }
.sm-table-actions form { display: inline; }
.sm-table-actions > *, .sm-table-actions form { margin-right: var(--s-3); }
.sm-field-inline { min-height: 40px; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); min-width: 130px; }
.sm-due { color: var(--earth-accent); font-weight: 500; }

@media (max-width: 860px) {
  /* One card per lead — no horizontal scrolling to read a row. */
  .sm-table, .sm-table tbody, .sm-table tr, .sm-table td { display: block; width: 100%; }
  .sm-table thead { display: none; }
  .sm-table { border: 0; background: none; }
  .sm-table tr {
    margin-bottom: var(--s-3);
    padding: var(--s-4);
    background: var(--white);
    border: var(--hairline);
    border-radius: var(--r-lg);
  }
  .sm-table td {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 0;
  }
  .sm-table td::before {
    content: attr(data-label);
    font-size: var(--t-sm);
    color: var(--muted);
  }
  .sm-table td[data-label=""] { grid-template-columns: 1fr; }
  .sm-table td[data-label=""]::before { display: none; }
  .sm-table-actions { white-space: normal; padding-top: var(--s-3); border-top: var(--hairline); }
}

/* ---------------------------------------------------------------------------
   27. SELLER DASHBOARD + APPLICATION
   ------------------------------------------------------------------------ */
.sm-badge-pending { border-style: dashed; color: var(--muted); }
.sm-dash-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }

.sm-founding {
  margin-top: var(--s-10);
  padding: var(--s-5);
  border: 1px solid var(--charcoal);
  border-radius: var(--r-lg);
}
.sm-founding-h {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.sm-founding p { font-size: 0.9375rem; color: var(--graphite); }

.sm-file { padding: var(--s-3); background: var(--stone-bg-deep); cursor: pointer; }
.sm-footer-help { font-size: 0.9375rem; color: var(--on-dark); display: inline-block; padding-block: var(--s-3); }
.sm-footer-help:hover { color: var(--stone-bg); }
@media (min-width: 780px) { .sm-footer-help { padding-block: var(--s-1); } }

/* ---------------------------------------------------------------------------
   28. LONG-FORM PROSE  (guides, about, legal)
   Measure-limited, generous leading, no decoration.
   ------------------------------------------------------------------------ */
.sm-article-title {
  margin-top: var(--s-4);
  font-size: var(--t-3xl);
  font-weight: 400;
  line-height: 1.1;
  max-width: 18ch;
}
@media (min-width: 900px) { .sm-article-title { font-size: var(--t-4xl); } }

.sm-prose { max-width: 68ch; margin-top: var(--s-10); }
.sm-prose p { margin-top: var(--s-5); line-height: 1.72; color: var(--graphite); }
.sm-prose > p:first-child { margin-top: 0; }
.sm-prose-lead { font-size: var(--t-md); color: var(--charcoal) !important; }
.sm-prose h2 {
  margin-top: var(--s-12);
  font-size: var(--t-lg);
  letter-spacing: -.02em;
}
.sm-prose h2 + p { margin-top: var(--s-4); }
.sm-prose ul {
  margin-top: var(--s-5);
  padding-left: var(--s-5);
  list-style: disc;
  color: var(--graphite);
}
.sm-prose li { margin-top: var(--s-2); line-height: 1.65; padding-left: var(--s-1); }
.sm-prose strong { font-weight: 600; color: var(--charcoal); }

/* Legal pages: slightly tighter, headings numbered by the content itself. */
.sm-legal p, .sm-legal li { font-size: 0.9375rem; }
.sm-legal h2 { margin-top: var(--s-10); font-size: var(--t-base); }

.sm-guide-cta {
  max-width: 68ch;
  margin-top: var(--s-16);
  padding-top: var(--s-10);
  border-top: var(--hairline);
}

/* ---------------------------------------------------------------------------
   29. LEARN HUB
   ------------------------------------------------------------------------ */
.sm-guides { margin-top: var(--s-12); display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .sm-guides { grid-template-columns: repeat(2, 1fr); } }
.sm-guide {
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}
.sm-guide:hover { border-color: var(--charcoal); }
.sm-guide-link { display: block; padding: var(--s-6); }
.sm-guide-title { margin-top: var(--s-1); font-size: var(--t-lg); }
.sm-guide-sub { margin: var(--s-3) 0 var(--s-5); color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

.sm-note-block {
  margin-top: var(--s-10);
  padding: var(--s-6);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  max-width: 68ch;
}

/* ---------------------------------------------------------------------------
   30. FAQ
   ------------------------------------------------------------------------ */
.sm-faq { margin-top: var(--s-12); max-width: 72ch; border-top: var(--hairline); }
.sm-faq-item { padding-block: var(--s-6); border-bottom: var(--hairline); }
.sm-faq-q { font-size: var(--t-base); font-weight: 600; }
.sm-faq-a { margin-top: var(--s-3); color: var(--graphite); line-height: 1.68; }

.sm-footer-cta { margin-top: var(--s-5); }
.sm .sm-footer .sm-btn-primary { background: var(--stone-bg); color: var(--charcoal); }
.sm .sm-footer .sm-btn-primary:hover { background: var(--white); }
.sm .sm-footer .is-unavailable { opacity: .4; }

/* ---------------------------------------------------------------------------
   TOUCH TARGETS  (override layer — must stay last in this file)
   Inline text links are short by nature. On touch widths they get vertical
   padding so every interactive element clears ~44px without changing how
   the page looks.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .sm-crumbs a,
  .sm-crumbs [aria-current] { padding-block: var(--s-3); }
  .sm-crumbs { margin-bottom: var(--s-5); }
  .sm-link,
  .sm .sm-stone-cta,
  .sm-seller-name,
  .sm .sm-stone-enquire,
  .sm-search-hint a,
  .sm .sm-table-link { padding-block: var(--s-3); }

  /* The card title is the card's one accessible link — give it real height. */
  .sm-stone-name a { padding-block: var(--s-1); min-height: 44px; }
  .sm-logo { padding-block: var(--s-1); }
  .sm-footer .sm-logo { padding-block: var(--s-3); }
}