/* =========================================================
   THAI TEXT FLOW / TYPOGRAPHY POLISH
   Added after responsive.css so these rules are final.
   ========================================================= */

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

body{
  letter-spacing:0;
}

/* Headings should wrap by phrase instead of creating an awkward last word. */
h1,h2,h3,
.section-heading:before,
.order-kicker,
.card-ribbon,
.contact-card strong{
  word-break:normal;
  overflow-wrap:normal;
  line-break:auto;
  hyphens:none;
  text-wrap:balance;
}

/* Thai paragraphs: let the browser's Thai word segmenter do the work,
   and only break long unspaced strings as a final fallback. */
p,li,
.section-heading p,
.media-copy p,
.benefit-grid p,
.order-body p,
.article-copy,
.article-copy p,
.health-note,
.faq-answer,
.faq-answer p,
.faq-answer li,
.faq-item>div,
.contact p,
.footer p{
  word-break:normal;
  overflow-wrap:break-word;
  line-break:auto;
  hyphens:none;
  text-wrap:pretty;
}

/* Keep important short phrases together. */
.keep-together{
  white-space:nowrap;
}

/* Menus, prices and controls should never split into two lines unexpectedly. */
.main-nav a,
.nav-order,
.btn,
.price,
.order-body h3,
.social-label,
.contact-card strong{
  white-space:nowrap;
}

/* Long FAQ questions should still wrap naturally. */
.faq-item summary{
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  line-break:auto;
  hyphens:none;
  text-wrap:pretty;
  line-height:1.65;
}

/* Improve the rhythm of descriptive text without changing section geometry. */
.section-heading p{
  line-height:1.82;
}
.article-copy{
  line-height:1.86;
}
.article-copy p{
  margin-bottom:1.15em;
}
.order-body p{
  line-height:1.72;
}
.faq-answer{
  line-height:1.82;
}
.contact p{
  line-height:1.78;
}

/* Thai tracking looks unnatural when too wide. */
.section-heading:before{
  letter-spacing:.02em;
}

/* Kanit remains readable on mobile; don't shrink the whole page to 15px. */
@media(max-width:640px){
  body{
    font-size:16px;
    line-height:1.76;
  }

  h1,h2,h3{
    line-height:1.34;
  }

  .section-heading p{
    font-size:.98rem;
    line-height:1.78;
  }

  .benefit-grid p,
  .order-body p,
  .faq-answer,
  .faq-item>div,
  .contact p{
    font-size:.92rem;
  }

  .faq-item summary{
    font-size:.96rem;
    line-height:1.62;
  }

  .order-body p{
    min-height:0;
  }
}

@media(max-width:380px){
  body{
    font-size:15.5px;
  }
}


/* =========================================================
   THAI WORD PROTECTION
   Prevent visually awkward breaks such as "น้ำ | ผลไม้".
   Short product/brand terms move as a whole to the next line.
   ========================================================= */
.thai-term,
.keep-together{
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

/* Do not force a whole sentence to stay together.
   Only explicitly wrapped short terms receive no-break behavior. */
p,li,.faq-answer,.article-copy,.section-heading p{
  word-break:normal;
  overflow-wrap:normal;
  line-break:auto;
}

/* Extremely narrow screens: retain the protected words but let their
   surrounding sentence wrap earlier so the page never overflows. */
@media(max-width:380px){
  .section-heading p,
  .benefit-grid p,
  .order-body p,
  .faq-answer,
  .faq-item>div{
    max-width:100%;
  }
}