/* Responsive Thai/English copy safeguards.
   Loaded last so headings and card copy remain readable at browser zoom,
   tablet widths, and narrow mobile viewports. */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Keep the complete order drawer above the sticky storefront header.
   The drawer owns its scrolling area so the close button, line items,
   quotation action and payment action remain reachable at every height. */
html.cart-open,
html.cart-open body {
  overflow: hidden;
}

.overlay {
  z-index: 10010;
}

.cart-drawer {
  z-index: 10020;
  width: min(540px, 100vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  grid-template-rows: auto minmax(160px, 34vh) minmax(0, 1fr);
  background: #fff;
}

.cart-header {
  position: relative;
  z-index: 2;
  min-height: 72px;
  padding: 16px 22px;
  background: #fff;
}

.cart-header h2 {
  max-width: calc(100% - 56px);
  line-height: 1.35;
}

.cart-items,
.cart-footer {
  min-width: 0;
  scrollbar-gutter: stable;
}

.cart-footer {
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.header-main > *,
.hero-grid > *,
.section-heading > *,
.featured > *,
.feature-points > *,
.steps > *,
.footer-grid > *,
.need-grid > *,
.category-grid > *,
.product-grid > *,
.journey-profile > *,
.journey-form > * {
  min-width: 0;
}

.hero h1 {
  width: 100%;
  max-width: 760px;
  font-size: clamp(36px, 3.75vw, 56px);
  line-height: 1.12;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.hero h1 em {
  line-height: 1.14;
  text-wrap: balance;
}

.section-heading h2,
.promo-panel h2,
.how h2,
.journey-copy h2,
.health-banner h2,
.feature-points h3,
.steps h3,
.product-body h3,
.category-card strong,
.need-card strong,
footer h3 {
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

.hero-copy > p,
.journey-copy p,
.product-description,
.category-card small,
.need-card small,
.feature-points p,
.steps p,
.footer-grid p,
.footer-grid a {
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}

.button,
.cart-button,
.catalog-trigger,
.journey-form button {
  min-width: 0;
  height: auto;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
}

.notice {
  min-height: 32px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.nav,
.taskbar-groups {
  scrollbar-width: thin;
}

.nav a,
.taskbar-group {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (min-width: 841px) and (max-width: 1100px) {
  .hero-grid {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-art {
    display: none;
  }

  .hero-copy {
    max-width: 880px;
    padding: 52px 0 58px;
  }

  .hero h1 {
    max-width: 880px;
    font-size: clamp(34px, 4vw, 42px);
  }
}

@media (max-width: 840px) {
  .hero h1 {
    max-width: 100%;
    font-size: clamp(32px, 6vw, 40px);
  }

  .hero-copy {
    padding: 48px 0 54px;
  }

  .section-heading {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .cart-drawer {
    width: 100vw;
    grid-template-rows: auto minmax(132px, 28vh) minmax(0, 1fr);
  }

  .cart-header {
    min-height: 62px;
    padding: 12px 16px;
  }

  .cart-header h2 {
    font-size: 18px;
  }

  .cart-items,
  .cart-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .hero h1 {
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.16;
    letter-spacing: -.025em;
  }

  .hero h1 em {
    line-height: 1.18;
  }

  .hero-copy {
    padding: 40px 0 46px;
  }

  .hero-actions > .button {
    flex: 1 1 150px;
  }

  .section-heading {
    flex-direction: column;
  }

  .category-card,
  .need-card,
  .product-card,
  .steps article,
  .feature-points article {
    min-width: 0;
  }
}