:root { --locale-blue: #004ea1; --locale-deep: #003c7d; }
header .container { position: relative; }
.localePicker { position: absolute; right: 0; top: 12px; z-index: 120; font-family: Arial, "Microsoft JhengHei", sans-serif; }
.localeTrigger { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid #d7e4f1; border-radius: 5px; background: #fff; color: var(--locale-blue); cursor: pointer; font-size: 14px; line-height: 1.3; }
.localeGlobe { width: 22px; height: 22px; flex: 0 0 22px; }
.localeChevron { width: 10px; height: 7px; transition: transform .15s; }
.localeTrigger[aria-expanded="true"] .localeChevron { transform: rotate(180deg); }
.localePanel { position: absolute; top: calc(100% + 8px); right: 0; width: 640px; padding: 16px; background: var(--locale-blue); border: 1px solid #ffffff70; border-radius: 8px; box-shadow: 0 12px 30px #00295430; }
.localePanel[hidden] { display: none !important; }
header .localeGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; float: none; width: auto; }
header .localeGrid a { display: flex; align-items: center; justify-content: center; padding: 15px 8px; min-height: 50px; border-radius: 4px; color: #fff; font-size: 15px; text-align: center; line-height: 1.4; text-decoration: none; }
header .localeGrid a:hover, header .localeGrid a:focus-visible { background: var(--locale-deep); }
header .localeGrid a[aria-current="true"] { background: #ffffff26; box-shadow: inset 0 0 0 1px #ffffff70; }
.localeTrigger:focus-visible, .localeGrid a:focus-visible { outline: 3px solid #58bafa; outline-offset: 3px; }
html:not([lang="zh-TW"]) .text-en p { word-break: normal; overflow-wrap: break-word; }
html[lang="th"] body { font-family: Tahoma, "Leelawadee UI", sans-serif; }
html[lang="ja"] body { font-family: "Yu Gothic", Meiryo, sans-serif; }
html[lang="ko"] body { font-family: "Malgun Gothic", sans-serif; }
html[lang="zh-CN"] body { font-family: "Microsoft YaHei", sans-serif; }
html[lang="vi"] body { font-family: Arial, sans-serif; }
@media (min-width: 1301px) {
    header .headerMenu { padding-top: 34px; max-width: calc(100% - 340px); }
    header .headerMenu nav { margin-right: 0; }
    header .headerMenu nav li.mr-3 { margin-right: clamp(10px, 1.2vw, 24px); }
    header .headerMenu nav a { font-size: clamp(13px, 1.05vw, 16px); }
}
@media (max-width: 1300px) {
    header .container { position: static; }
    header .localeGrid { margin-right: 0; }
    .localePicker { right: 68px; top: 10px; }
    .localeTrigger { min-height: 38px; max-width: 195px; padding: 6px 9px; font-size: 13px; }
    .localePanel { position: fixed; top: 62px; right: 10px; width: min(390px, calc(100vw - 20px)); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 12px; }
    header .localeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    header .localeGrid a { min-height: 54px; padding: 14px 6px; }
}
@media (max-width: 480px) {
    header .headerLogo { max-width: calc(100% - 225px); min-width: 70px; }
    header .headerLogo img { max-width: calc(100vw - 240px); min-width: 70px; height: auto; }
    .localeTrigger { gap: 5px; max-width: 145px; font-size: 12px; }
    .localeCurrent { max-width: 85px; }
}

/* Localized controls: grow with their labels instead of clipping or shrinking text. */
html .formBtnUI, html.en .formBtnUI,
.productInquiryBtn, .productInquiryLink, .inquiryRemoveBtn,
.videoFilterBar .videoFilterBtn, .faqPagination button {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
}
html .formBtnUI, html.en .formBtnUI,
.productInquiryBtn, .productInquiryLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
}
html .formBtnUI.w98, html.en .formBtnUI.w98 {
    width: fit-content;
    min-width: 98px;
}
.formUI > .dFlex.justCenter, .formUI .productContactActions {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}
.formUI > .dFlex.justCenter > .formBtnUI,
.formUI .productContactActions > .formBtnUI { margin: 0; }
.inquiryActionBar { min-width: 0; max-width: 100%; align-items: stretch; }
.productInquiryPanel { max-width: 100%; }
.inquiryMachineList li > div { min-width: 0; }
.inquiryMachineList .machineName { overflow-wrap: anywhere; }
.inquiryRemoveBtn { flex-shrink: 0; }

/* Reserve space for disclosure icons, including when a label occupies two lines. */
.productMenuContent li a.productMainMenu { padding-right: 48px; }
.productMenuContent a, .newsSidebar a, .newsSidebarCurrent,
.faqItem > button, .companyNewsBack, .companyNewsPagination a {
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}
.productTabUI ul.dFlex, .newsTabUI ul.dFlex { flex-wrap: wrap; gap: 12px 18px; }
.productTabUI li, .newsTabUI li { min-width: 0; max-width: 100%; margin: 0; }
.productTabUI a, .newsTabUI a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 6px;
    line-height: 1.5;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
.productTabUI a:before { display: none; }
.productTabUI a.selected:after,
.productTabUI li.singleProductTab a.selected:after { bottom: 0; }
.applicationContent p.readMoreLink a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 20px 8px 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.faqToolbar { flex-wrap: wrap; gap: 10px; }
.faqToolbar label { margin-right: 0; }
.faqPagination button { min-width: 44px; }
.companyNewsBack > span, .companyNewsPagination a > span { flex-shrink: 0; }

/* Catalog actions share the available space; neither label can cover its neighbour. */
.catalogCoverContent .catalogMask {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 0;
}
.catalogCoverContent .catalogMask a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px;
}
.catalogCoverContent .catalogMask p,
.catalogCoverContent .catalogMask p.online {
    position: static;
    transform: none;
    margin: 0;
    max-width: 100%;
    line-height: 1.4;
    letter-spacing: normal;
    overflow-wrap: anywhere;
}
.catalogCoverContent .catalogMask p:after { position: static; display: block; margin: 12px auto 0; }
.catalogCoverContent li:focus-within .catalogMask { opacity: 1; transform: translateY(0); }
.catalogCoverContent .catalogMask a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.localeTrigger { min-width: 0; }
.localeCurrent { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.localeChevron { flex-shrink: 0; }
header .localeGrid a { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

@media (min-width: 1301px) {
    header, header .container { height: 112px; }
    header .headerMenu { top: 50px; transform: none; padding-top: 0; }
    header .headerMenu nav { min-width: 0; width: 100%; }
    header .headerMenu nav ul { align-items: stretch; gap: clamp(10px, 1vw, 20px); }
    header .headerMenu nav li.mr-3 { margin-right: 0; }
    header .headerMenu nav li { min-width: 0; display: flex; }
    header .headerMenu nav a.menuList {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 4px 0;
        font-size: clamp(14px, 1.05vw, 16px);
        line-height: 1.4;
        overflow: visible;
        overflow-wrap: anywhere;
        text-align: center;
    }
}
@media (max-width: 1288px) {
    /* Match the stacked map layout, overriding the English template's 44% width. */
    .contactUsMap .container > .contactInfoText { width: 100%; min-width: 0; }
    .contactUsMap .contactInfoText h3 { line-height: 1.4; overflow-wrap: anywhere; }
    .contactUsMap .companyInfo > li { position: relative; padding-left: 32px; }
    .contactUsMap .companyInfo > li:before { left: 0; }
    .contactUsMap .companyInfo > li > .pl-3 { padding-left: 0; }
    .contactUsMap .contactFormLocationIcon a { word-break: normal; overflow-wrap: anywhere; }
    .contactUsMap .companyInfo > .contactFormTelIcon { white-space: nowrap; letter-spacing: normal; }
    .contactUsMap .contactFormTelIcon a { display: inline; white-space: nowrap; }
    .contactUsMap .contactFormTelIcon .dash { display: inline; padding: 0 6px; }
    .contactUsMap .contactFormTelIcon > a,
    .contactUsMap .contactFormTelIcon > .dash { letter-spacing: normal; font-size: inherit; }
    .contactUsMap .contactFormFaxIcon > span { white-space: nowrap; }
}
@media (max-width: 1300px) {
    header .headerMenu ul.mobileNoFlex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    header .headerMenu li { float: none; width: auto; min-width: 0; display: flex; }
    header .headerMenu a.menuList {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 52px;
        padding: 12px 36px 12px 14px;
        line-height: 1.5;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 767px) {
    /* Contact-page fields stack their labels above controls on phones. */
    .formContent:not(.productDetailContactForm) .formUI > .formPb-1 {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .formContent:not(.productDetailContactForm) .formUI > .formPb-1 > label {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding-top: 0;
        line-height: 1.5;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    .formContent:not(.productDetailContactForm) .formUI > .formPb-1 > input,
    .formContent:not(.productDetailContactForm) .formUI > .formPb-1 > select,
    .formContent:not(.productDetailContactForm) .formUI > .formPb-1 > textarea,
    .formContent:not(.productDetailContactForm) .formUI > .formPb-1 > .inquiryMachineBox {
        width: 100%;
        min-width: 0;
    }
    .catalogCoverContent .catalogMask { display: none; }
    .catalogCoverContent .downlod-block {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
    }
    .catalogCoverContent .downlod-block > a { display: flex; min-width: 0; }
    .catalogCoverContent .downlod-block .catalog-download,
    .catalogCoverContent .downlod-block .catalog-read {
        position: static;
        min-width: 0;
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 10px 12px;
        line-height: 1.5;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .productPicGallery .inquiryActionBar { align-items: stretch; width: 100%; }
    .productPicGallery .inquiryActionBar > * { flex: 1 1 150px; }
    .formUI > .dFlex.justCenter > .formBtnUI { flex: 1 1 150px; }
    .companyNewsPagination { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .companyNewsPagination .companyNewsHome { grid-row: 2; grid-column: 1 / -1; }
    .companyNewsPagination a[rel="next"] { grid-column: 2; }
}
@media (max-width: 480px) {
    .videoFilterBar .videoFilterBtn { flex-basis: 100%; justify-content: flex-start; text-align: left; }
    .inquiryMachineList li { flex-wrap: wrap; }
    .inquiryMachineList li > div { flex: 1 1 160px; }
    .productTabUI ul.dFlex { display: flex; }
    .productTabUI li { width: auto; flex: 1 1 130px; padding: 0; }
    .productTabUI li.singleProductTab.w100 { flex-basis: 100%; }
}
@media (max-width: 375px) {
    .contactUsMap .companyInfo > .contactFormTelIcon { font-size: 13px; }
    .contactUsMap .contactFormTelIcon .dash { padding: 0 3px; }
}