/* Load after the existing page styles. No external font requests. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --type-hero: clamp(2.5rem, 1.675rem + 4.15vw, 5.5rem);
  --type-page: clamp(2.25rem, 1.55rem + 3.15vw, 4.625rem);
  --type-section: clamp(1.875rem, 1.325rem + 2vw, 3.25rem);
}

body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.65;
}

body[data-lang="zh"] {
  --type-hero: clamp(2.125rem, 1.4rem + 3.7vw, 4.5rem);
  --type-page: clamp(2.125rem, 1.5rem + 3vw, 4.5rem);
  --type-section: clamp(1.75rem, 1.2rem + 1.7vw, 2.8125rem);
  line-height: 1.75;
}

button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-weight: 600; }
h1, body[data-lang="zh"] h1 { font-size: var(--type-page); }
h2, body[data-lang="zh"] h2 { font-size: var(--type-section); }
h1 { line-height: 1.08; letter-spacing: -.035em; }
h2 { line-height: 1.18; letter-spacing: -.025em; }
h3 { line-height: 1.35; letter-spacing: -.012em; }

body[data-lang="zh"] h1,
body[data-lang="zh"] h2,
body[data-lang="zh"] h3 {
  letter-spacing: 0;
  line-height: 1.35;
}

.hero h1, body[data-lang="zh"] .hero h1 {
  font-size: var(--type-hero);
  line-height: 1.12;
}
body[data-lang="zh"] .hero h1 { line-height: 1.3; }
.page-intro h1, body[data-lang="zh"] .page-intro h1 {
  font-size: var(--type-page);
  line-height: 1.15;
}
body[data-lang="zh"] .page-intro h1 { line-height: 1.3; }
.detail-copy h1,
body[data-lang="zh"] .product-detail h1,
.article-page h1,
body[data-lang="zh"] .article-page h1 {
  font-size: clamp(2rem, 1.45rem + 2.5vw, 3.75rem);
  line-height: 1.2;
  overflow-wrap: break-word;
}
body[data-lang="zh"] .product-detail h1,
body[data-lang="zh"] .article-page h1 { line-height: 1.35; }
.contact-band h2, body[data-lang="zh"] .contact-band h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.9375rem);
}
.compact h2, body[data-lang="zh"] .compact h2 {
  font-size: clamp(1.375rem, 1.2rem + .65vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: 0;
}
.empty-state h2, body[data-lang="zh"] .empty-state h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
}

body[data-lang="zh"] .eyebrow,
body[data-lang="zh"] .label,
body[data-lang="zh"] .photo-caption,
body[data-lang="zh"] .wide-photo > span,
body[data-lang="zh"] .hero-foot { letter-spacing: .05em; }
body[data-lang="zh"] .about-lead .large-copy {
  letter-spacing: 0;
  line-height: 1.5;
}
.button { line-height: 1.4; }
.button > span { line-height: 1; }

/* The footer of the hero remains in flow when copy needs extra lines. */
.hero {
  height: auto;
  min-height: clamp(37.5rem, 75svh, 46.25rem);
  display: flex;
  flex-direction: column;
}
.hero-content {
  padding-top: clamp(4rem, 8vw, 7.75rem);
  padding-bottom: 2.5rem;
}
.hero-foot {
  position: static;
  margin: auto var(--gutter) 1.75rem;
  padding-top: 1.125rem;
}

/* Reading measure is independent of the wider title and media containers. */
.article-page > p { max-width: 68ch; }
.article-page > .eyebrow { max-width: none; }
.article-page > .article-lead { max-width: 58ch; line-height: 1.6; }
body[data-lang="zh"] .article-page > p {
  max-width: 38em;
  line-height: 1.8;
}
body[data-lang="zh"] .article-page > .article-lead { max-width: 34em; }
body[data-lang="zh"] .article-page > .eyebrow { max-width: none; line-height: 1.6; }
.article-page, .detail-copy, .section-heading > *, .news-title { min-width: 0; }
.article-page p, .detail-description, .botanical { overflow-wrap: break-word; }

/* A minimum readable card width replaces the old 2/3/4-column jumps. */
.enquiry-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.75rem 1.5rem;
}
.enquiry-card { min-width: 0; }
.enquiry-meta { min-width: 0; padding: 1.125rem; }
.enquiry-code { font-size: .75rem; line-height: 1.5; letter-spacing: .08em; }
.enquiry-meta h3,
body[data-lang="zh"] .enquiry-meta h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: normal;
}
.enquiry-subtitle { font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; }
.enquiry-disclosure { font-size: .875rem; line-height: 1.7; max-width: 75ch; }
body[data-lang="zh"] .enquiry-disclosure { max-width: 48em; }
.enquiry-collection { padding-top: 2.625rem; }
.enquiry-actions { gap: .625rem .875rem; padding-top: 1.25rem; }
.enquiry-actions .button {
  min-height: 2.75rem;
  padding: .625rem .75rem;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.4;
}
.enquiry-actions .button > span { font-size: 1.125rem; }
.enquiry-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  font-size: .875rem;
  line-height: 1.4;
}
.new-product-card .product-meta h3,
body[data-lang="zh"] .new-product-card .product-meta h3 {
  font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem);
  line-height: 1.4;
}
.contact-aside .button { margin-top: 1.25rem; }

/* Contact menu contract: toggle + links; aria-expanded or .is-open opens it.
   Keep aria-expanded on the toggle, and use aria-controls for the links. */
.floating-contact-menu {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .625rem;
}
.floating-contact-links {
  order: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .625rem;
}
.floating-contact-menu .floating-contact {
  position: static;
  width: auto;
  height: auto;
  min-height: 2.875rem;
  padding: .6875rem 1rem;
  font-size: .875rem;
  line-height: 1.4;
  gap: .625rem;
  justify-content: flex-start;
}
.floating-contact-menu .floating-contact > span { display: inline; }
.floating-contact-toggle {
  order: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: .75rem 1rem;
  border: 1px solid #ffffff88;
  border-radius: 2rem;
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 20px #163f3026;
  font-size: .875rem;
  line-height: 1.4;
  cursor: pointer;
}
.floating-contact-toggle svg { width: 1.375rem; height: 1.375rem; }
.floating-contact-toggle:hover,
.floating-contact-toggle[aria-expanded="true"] { background: #28593d; }

/* Secondary machine-readable information should not look like a sales section. */
.llms-note {
  gap: 1.25rem;
  padding-block: 1.25rem;
  align-items: center;
}
.llms-note > div { max-width: 55rem; }
.llms-note h2, body[data-lang="zh"] .llms-note h2 {
  margin-bottom: .375rem;
  font-size: .9375rem;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
}
.llms-note p { max-width: 90ch; font-size: .8125rem; line-height: 1.65; }
.llms-note .text-link { min-height: 2.5rem; font-size: .8125rem; gap: .5rem; }

@media (max-width: 900px) {
  .llms-note { align-items: flex-start; gap: .5rem; }
}

@media (max-width: 680px) {
  .enquiry-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .enquiry-card {
    display: grid;
    grid-template-columns: minmax(5.25rem, 30%) minmax(0, 1fr);
    align-items: start;
  }
  .enquiry-image { align-self: start; margin-top: 1rem; }
  .enquiry-meta { padding: 1rem .875rem; }
  .enquiry-code { margin-bottom: .375rem; }
  .enquiry-meta h3 { margin-bottom: .375rem; }
  .enquiry-subtitle { font-size: .75rem; }
  .enquiry-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding-top: .75rem;
  }
  .enquiry-disclosure { font-size: .8125rem; margin-bottom: 1.5rem; }
}

@media (max-width: 600px) {
  .hero { min-height: 36.25rem; }
  .hero-content { padding-top: 3.5rem; padding-bottom: 2rem; }
  .hero .actions { margin-top: 1.75rem; }
  .hero-foot { margin-bottom: 1.5rem; gap: 1.25rem; }
  .hero-description, body[data-lang="zh"] .hero-description {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 35ch;
  }
  .floating-contact-menu {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: calc(100vw - 2rem);
  }
  .floating-contact-toggle { display: inline-flex; }
  .floating-contact-links {
    display: none;
    padding: .625rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 30px #163f3026;
  }
  .floating-contact-menu.is-open .floating-contact-links,
  .floating-contact-menu:has(.floating-contact-toggle[aria-expanded="true"]) .floating-contact-links {
    display: flex;
  }
  .floating-contact-menu .floating-contact { min-height: 2.875rem; box-shadow: none; }
  .llms-note { padding-block: 1rem; }
  .llms-note p { font-size: .75rem; }
  .enquiry-collection { padding-top: 1.875rem; }
}

@media (max-width: 380px) {
  .enquiry-meta { padding-inline: .625rem; }
  .enquiry-actions .button { padding-inline: .625rem; gap: .375rem; }
}