/* Shared layout safeguards for English and Japanese pages. */
html[lang="en"] body {
  font-family: Inter, "Segoe UI", Helvetica, Arial, system-ui, sans-serif;
}

html[lang="ja"] body {
  font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
  line-break: strict;
  word-break: normal;
}

html[lang="ja"] :is(h1, h2, h3, .display, blockquote) {
  font-family: "Space Grotesk", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif !important;
  letter-spacing: -0.025em !important;
  line-break: strict;
  word-break: normal;
}

html[lang="en"] :is(p, li, dd, blockquote) {
  hyphens: auto;
  overflow-wrap: break-word;
}

html[lang="en"] :is(h1, h2, h3, .display),
html[lang="ja"] :is(h1, h2, h3, .display) {
  text-wrap: balance;
  overflow-wrap: normal;
}

html[lang="zh-CN"] .language-switcher,
html[lang="en"] .language-switcher,
html[lang="ja"] .language-switcher {
  display: block !important;
}

html[lang="en"] :is(.button, .button-primary, .button-secondary, .button-text, .text-link) > span,
html[lang="ja"] :is(.button, .button-primary, .button-secondary, .button-text, .text-link) > span {
  white-space: normal !important;
  text-align: center;
  line-height: 1.25;
}

html[lang="en"] [data-od-id="hero-title"] span,
html[lang="ja"] [data-od-id="hero-title"] span,
html[lang="en"] .detail-copy h2,
html[lang="ja"] .detail-copy h2,
html[lang="en"] .business h2,
html[lang="ja"] .business h2 {
  white-space: normal !important;
}

html[lang="en"] .product-footer,
html[lang="ja"] .product-footer,
html[lang="en"] .hero-purchase,
html[lang="ja"] .hero-purchase {
  justify-content: flex-start !important;
}

.locale-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 14px;
  padding: 4px;
  border: 1px solid rgba(23, 24, 23, 0.13);
  border-radius: 10px;
  background: rgba(247, 246, 242, 0.92);
  white-space: nowrap;
}

.locale-links a {
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 7px;
  color: #5f605c;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.locale-links a:hover,
.locale-links a:focus-visible {
  color: #171817;
  background: rgba(23, 24, 23, 0.06);
}

.locale-links a[aria-current="page"] {
  color: #fff;
  background: #171817;
}

html[lang="en"] .zxr-quote,
html[lang="ja"] .zxr-quote {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

html[lang="en"] .social-guide .social-copy > a,
html[lang="ja"] .social-guide .social-copy > a {
  gap: 8px;
}

html[lang="en"] .social-guide .social-copy > a > span,
html[lang="ja"] .social-guide .social-copy > a > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.social-guide .social-copy > a > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (max-width: 1080px) {
  html[lang="en"] .desktop-nav,
  html[lang="ja"] .desktop-nav {
    display: none !important;
  }

  html[lang="en"] .menu-button,
  html[lang="ja"] .menu-button {
    display: inline-grid !important;
    place-items: center;
  }

  html[lang="en"] .mobile-nav:not([hidden]),
  html[lang="ja"] .mobile-nav:not([hidden]) {
    display: flex !important;
    flex-direction: column;
  }
}

@media (min-width: 1081px) {
  html[lang="en"] .mobile-nav,
  html[lang="ja"] .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 560px) {
  html[lang="en"] .scene-directory,
  html[lang="ja"] .scene-directory {
    grid-template-columns: 1fr !important;
  }

  html[lang="en"] .directory-link,
  html[lang="ja"] .directory-link {
    min-height: 88px;
    overflow: visible;
  }

  .locale-links {
    gap: 2px;
    margin-right: 8px;
  }

  .locale-links a {
    min-width: 30px;
    padding-inline: 6px;
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .site-header .brand > span,
  .site-header .brand-lab-name {
    display: none !important;
  }

  .locale-links {
    margin-right: 5px;
    padding: 3px;
  }

  .locale-links a {
    min-width: 26px;
    min-height: 30px;
    padding-inline: 4px;
  }
}

@media (max-width: 640px), (max-height: 700px) {
  html[lang="en"] .about-hero,
  html[lang="ja"] .about-hero,
  html[lang="en"] .localized-home .hero,
  html[lang="ja"] .localized-home .hero {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
  }

  html[lang="en"] .about-hero .hero-copy,
  html[lang="ja"] .about-hero .hero-copy,
  html[lang="en"] .localized-home .hero-copy,
  html[lang="ja"] .localized-home .hero-copy {
    height: auto !important;
    min-height: 100svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[lang="en"] *,
  html[lang="ja"] * {
    scroll-behavior: auto !important;
  }
}