/* ==========================================================================
   Shengfeng Buddha World — design tokens and primitives
   Palette continues the existing teal/green identity taken from the logo.
   ========================================================================== */

:root {
  /* Teal — sampled from the logo background */
  --teal-50:  #f2f9f8;
  --teal-100: #e8f5f3;
  --teal-200: #d5e9e6;
  --teal-300: #a9d3cf;
  --teal-400: #4d9d9a;
  --teal-500: #247773;
  --teal-600: #1c5f5c;
  --teal-700: #194c49;
  --teal-800: #123634;

  --ink:      #163534;
  --body:     #3f5856;
  --muted:    #647977;
  --cream:    #fbfaf6;
  --paper:    #ffffff;
  --line:     #dce9e7;
  --line-soft:#eaf3f1;

  --gold:      #b38855;
  --gold-soft: #f7f0e4;

  --ok:   #1e7a4a;
  --warn: #a8691a;

  /* Latin and CJK share one stack so that a Chinese product name inside an
     English sentence still renders in a proper serif rather than falling back
     to whatever the OS picks. Thai and Korean sit at the end — they cost
     nothing when unused, and the browser only reaches for them when the earlier
     fonts have no glyph for the character. */
  --font-serif: Georgia, "Times New Roman", "Songti SC", "Source Han Serif SC", "Noto Serif SC",
                "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Noto Serif Thai",
                "Hiragino Mincho ProN", "Yu Mincho", SimSun, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial,
               "Noto Sans Thai", "Leelawadee UI", Thonburi,
               "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo",
               sans-serif;

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(18, 54, 52, .06), 0 2px 8px rgba(18, 54, 52, .04);
  --shadow-md: 0 4px 16px rgba(18, 54, 52, .08), 0 12px 40px rgba(18, 54, 52, .06);
  --header-h: 74px;
}

/* ------------------------------------------------- Language font stacks -- *
 *
 * Unicode gives Japanese, Korean and Simplified Chinese the same code points
 * for thousands of shared characters, and leaves the choice of glyph to the
 * font. With a single stack the first CJK font wins for all of them, so a
 * Japanese page ends up rendering 直, 骨 and 今 with Chinese glyph shapes —
 * immediately legible as "not written by a Japanese speaker" to a Japanese
 * reader.
 *
 * Each rule below re-orders the stack for its language. `html[lang]` is set by
 * the renderer, so this needs no JavaScript and no per-page markup.
 */

html:lang(ja) body, html:lang(ja) input, html:lang(ja) button, html:lang(ja) select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP",
               Roboto, Arial, sans-serif;
}
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ja) h4,
html:lang(ja) .brand-text strong, html:lang(ja) .price-main, html:lang(ja) .hero-copy h1 {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
               "Noto Serif CJK JP", serif;
}

html:lang(ko) body, html:lang(ko) input, html:lang(ko) button, html:lang(ko) select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", Roboto, Arial, sans-serif;
}

html:lang(th) body, html:lang(th) input, html:lang(th) button, html:lang(th) select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai",
               "Leelawadee UI", Thonburi, "Sukhumvit Set", Roboto, Arial, sans-serif;
}
/* Thai stacks accents above and below the baseline, so the default 1.7 line
   height clips them on headings that use a tighter value. */
html:lang(th) h1, html:lang(th) h2, html:lang(th) h3, html:lang(th) h4 { line-height: 1.55; }

html:lang(zh-Hant) body, html:lang(zh-Hant) input, html:lang(zh-Hant) button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", Roboto, Arial, sans-serif;
}
html:lang(zh-Hans) body, html:lang(zh-Hans) input, html:lang(zh-Hans) button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------- Reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); letter-spacing: -.005em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-500); text-decoration: none; }
a:hover { color: var(--teal-700); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

strong { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link for keyboard users and screen readers. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-500);
  color: #fff;
  padding: .7rem 1.1rem;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--teal-500); color: #fff; border-color: var(--teal-500); }
.btn-primary:hover { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

.btn-outline { background: transparent; color: var(--teal-600); border-color: var(--teal-300); }
.btn-outline:hover { background: var(--teal-100); border-color: var(--teal-400); color: var(--teal-700); }

.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.btn-ghost:hover { color: var(--teal-600); }

.btn-light { background: #fff; color: var(--teal-700); border-color: #fff; }
.btn-light:hover { background: var(--teal-100); border-color: var(--teal-100); color: var(--teal-800); }

.btn-sm { padding: .62rem 1.05rem; font-size: .8rem; }

.text-link {
  display: inline-block;
  color: var(--teal-600);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--teal-300);
  padding-bottom: .35rem;
}
.text-link:hover { border-bottom-color: var(--teal-500); }

/* ------------------------------------------------------------- Badges -- */

.badge {
  display: inline-block;
  padding: .32rem .6rem;
  border-radius: 2px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--teal-500);
  color: #fff;
}
.badge-available     { background: var(--ok); }
.badge-made-to-order { background: var(--teal-500); }
.badge-sold          { background: #6b7a79; }
.badge-coming-soon   { background: var(--gold); }

.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0; }
.chip {
  display: inline-block;
  padding: .38rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-600);
  font-size: .78rem;
  font-weight: 600;
}
.chip-status { background: var(--teal-500); border-color: var(--teal-500); color: #fff; }

.eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-500);
  margin: 0 0 .9rem;
}

.empty-note,
.table-note,
.form-note {
  color: var(--muted);
  font-size: .9rem;
}

/* Screen-reader-only text, used for accessible labels. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}