/* Global font tokens — available outside #kokonic-app (e.g. pickup overlay) */
:root {
  --s-font-c98e5da9: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic",
    sans-serif;
  --s-font-a196dde3: Arimo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-font-64b8fccc: Arimo, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --s-font-d1be9407: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic",
    sans-serif;
  --s-font-3dae337a: Arimo, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --kokonic-font-vi: Arimo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kokonic-font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

html[lang="vi"] body,
html[lang="en"] body {
  font-family: var(--kokonic-font-vi);
}

html[lang="ja"] body {
  font-family: var(--kokonic-font-ja);
}

html[lang="ja"] body,
html[lang="ja"] #kokonic-app .text,
html[lang="ja"] #kokonic-app p,
html[lang="ja"] #kokonic-app a,
html[lang="ja"] #kokonic-app li,
html[lang="ja"] #kokonic-app h1,
html[lang="ja"] #kokonic-app h2,
html[lang="ja"] #kokonic-app h3,
html[lang="ja"] .kokonic-shell,
html[lang="ja"] .kokonic-shell *,
html[lang="ja"] #kokonic-pickup-all,
html[lang="ja"] #kokonic-pickup-all *,
html[lang="ja"] #kokonic-gift-guide-all,
html[lang="ja"] #kokonic-gift-guide-all *,
html[lang="ja"] .kokonic-footer-columns,
html[lang="ja"] .kokonic-footer-columns *,
html[lang="ja"] .kokonic-visit-grid,
html[lang="ja"] .kokonic-visit-grid * {
  font-family: var(--kokonic-font-ja) !important;
}

/* Vietnamese / English UI: Arimo everywhere except icon fonts */
html[lang="vi"] #kokonic-app .text,
html[lang="vi"] #kokonic-app p,
html[lang="vi"] #kokonic-app a,
html[lang="vi"] #kokonic-app li,
html[lang="vi"] #kokonic-app h1,
html[lang="vi"] #kokonic-app h2,
html[lang="vi"] #kokonic-app h3,
html[lang="vi"] #kokonic-app button,
html[lang="en"] #kokonic-app .text,
html[lang="en"] #kokonic-app p,
html[lang="en"] #kokonic-app a,
html[lang="en"] #kokonic-app li,
html[lang="en"] #kokonic-app h1,
html[lang="en"] #kokonic-app h2,
html[lang="en"] #kokonic-app h3,
html[lang="en"] #kokonic-app button,
html[lang="vi"] .kokonic-shell,
html[lang="vi"] .kokonic-shell *,
html[lang="en"] .kokonic-shell,
html[lang="en"] .kokonic-shell *,
html[lang="vi"] #kokonic-pickup-all,
html[lang="vi"] #kokonic-pickup-all *,
html[lang="en"] #kokonic-pickup-all,
html[lang="en"] #kokonic-pickup-all *,
html[lang="vi"] #kokonic-gift-guide-all,
html[lang="vi"] #kokonic-gift-guide-all *,
html[lang="en"] #kokonic-gift-guide-all,
html[lang="en"] #kokonic-gift-guide-all *,
html[lang="vi"] .kokonic-footer-columns,
html[lang="vi"] .kokonic-footer-columns *,
html[lang="en"] .kokonic-footer-columns,
html[lang="en"] .kokonic-footer-columns *,
html[lang="vi"] .kokonic-pickup-home-ready,
html[lang="vi"] .kokonic-pickup-home-ready *,
html[lang="en"] .kokonic-pickup-home-ready,
html[lang="en"] .kokonic-pickup-home-ready *,
html[lang="vi"] .kokonic-visit-grid,
html[lang="vi"] .kokonic-visit-grid *,
html[lang="en"] .kokonic-visit-grid,
html[lang="en"] .kokonic-visit-grid * {
  font-family: var(--kokonic-font-vi) !important;
}

.fa,
.fa::before,
[class*="fa-"]::before {
  font-family: "FontAwesome" !important;
}