/* The language control stays visible outside the mobile navigation drawer. */
.restored-nav .site-language-switch{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:42px;min-height:36px;margin-left:18px;padding:5px 10px;border:1px solid currentColor;border-radius:20px;color:inherit;font:600 12px/1.1 "Segoe UI",Arial,sans-serif;letter-spacing:.04em;text-decoration:none;white-space:nowrap;order:3;opacity:.82}
.restored-nav .site-language-switch:hover{opacity:1;background:rgba(70,90,90,.08)}
.restored-nav .site-language-switch:focus-visible{outline:2px solid #14766e;outline-offset:4px}
html[lang="en"] .restored-nav .nav-brand-name{font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:0;white-space:nowrap}
html[lang="en"] .restored-nav .nav-links{gap:clamp(12px,1.8vw,28px)}
html[lang="en"] .restored-nav .nav-links>a,html[lang="en"] .restored-nav .nav-dropdown-link{white-space:nowrap}
html[lang="en"] .shift-hero-title{font-size:clamp(40px,6.5vw,108px)!important;letter-spacing:-.045em!important;line-height:1.15!important}
html[lang="en"] .shift-char-mask{white-space:pre}
html[lang="en"] .shift-overview-copy h2{font-size:clamp(34px,4.2vw,68px);letter-spacing:-.035em}
html[lang="en"] .shift-business-intro h2{font-size:clamp(40px,6.3vw,98px);letter-spacing:-.04em}
html[lang="en"] .shift-business-intro .shift-intro-mask{padding-right:.12em;margin-right:-.12em}
html[lang="en"] .shift-row-name{font-size:clamp(28px,3.5vw,58px);letter-spacing:-.035em}
html[lang="en"] .shift-row-description{max-width:34em;line-height:1.6}
html[lang="en"] .shift-company-fact--market dd{font-size:clamp(34px,3.2vw,50px)}
@media(min-width:960px){
  html[lang="en"] .shift-company-facts{grid-template-columns:minmax(0,.85fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1.45fr);gap:28px}
  html[lang="en"] .shift-company-fact--market dd{white-space:nowrap;text-wrap:nowrap}
}
html[lang="en"] .workspace-nav-link__label{font-size:13px}
html[lang="en"] .home-trade-map-copy h2,html[lang="en"] #magic-partners-title{letter-spacing:-.035em}
html[lang="en"] #lede{font-size:clamp(21px,2.3vw,35px);line-height:1.55;letter-spacing:-.02em}
html[lang="en"] #lede .lede-line{display:block;white-space:normal;text-align:left;text-align-last:left;text-indent:0}
html[lang="en"] #lede .ch{white-space:pre-wrap}
html[lang="en"] .office dt{min-width:5.2em}
html[lang="en"] .office dd{overflow-wrap:break-word;word-break:normal}
body.contact-page .office-lang-en{display:none}
html[lang="en"] body.contact-page .office-lang-zh{display:none}
html[lang="en"] body.contact-page .office-company-name.office-lang-en{display:inline}
html[lang="en"] body.contact-page .office-address.office-lang-en{display:block}
html[lang="en"] body.contact-page .office h2{font-family:var(--tree-font-body);font-size:14.5px;font-weight:400;line-height:1.62;letter-spacing:0;overflow-wrap:anywhere}
html[lang="en"] .brand-panel-name h2{font-size:clamp(26px,3vw,48px);line-height:1.08}
html[lang="en"] .window-tabs button strong{white-space:normal;line-height:1.2}
html[lang="en"] .product-info-dialog h3{line-height:1.15}
html[lang="en"] .home-footer-wordmark{display:none}
html[lang="en"] .home-footer-brand>div::before{content:"SHANGHAI BULK CHEMICAL";display:block;font:600 clamp(25px,3vw,40px)/1.4 Georgia,serif}
@media(max-width:959px){
  .restored-nav .site-language-switch{position:absolute;right:70px;top:50%;transform:translateY(-50%);order:0;margin:0;min-width:38px;min-height:34px;padding:5px 8px;z-index:3}
  .restored-nav .nav-toggle{margin-left:0}
  html[lang="en"] .restored-nav .nav-brand-name{font-size:15px}
  html[lang="en"] .shift-hero-title{font-size:clamp(29px,6.8vw,62px)!important;letter-spacing:-.045em!important}
  html[lang="en"] .shift-row-name{font-size:clamp(27px,5.7vw,44px)}
  html[lang="en"] .shift-overview-copy h2{font-size:clamp(30px,6vw,48px)}
}
@media(max-width:420px){html[lang="en"] .restored-nav .nav-brand-name{font-size:13px!important;letter-spacing:0!important}html[lang="en"] #lede{font-size:22px}}
@media(max-width:360px){html[lang="en"] .restored-nav .nav-brand-name{font-size:11px!important}}

/* Mobile-only advisory: does not shift the page or change animation geometry. */
.mobile-experience-notice {display:none}
@media(max-width:767px){
  .mobile-experience-notice {position:fixed;z-index:50;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;box-sizing:border-box;max-width:560px;margin-inline:auto;padding:2px 4px 2px 16px;align-items:center;border:1px solid #d6e0dd;border-radius:10px;background:#f7faf8;color:#283b36;text-align:left;font-family:"Segoe UI",Arial,"Microsoft YaHei",sans-serif;box-shadow:0 6px 28px rgba(26,48,40,.08)}
  .mobile-experience-notice strong {display:block;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:0}
  .mobile-experience-notice p {margin:6px 0 0;font-family:inherit;font-size:13px;line-height:1.7;letter-spacing:0;overflow-wrap:break-word}
  .mobile-experience-notice__close {display:flex;align-items:center;justify-content:center;align-self:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:400 24px/1 Arial,sans-serif;cursor:pointer}
  .mobile-experience-notice__close:hover {background:#e8efeb}
  .mobile-experience-notice__close:focus-visible {outline:2px solid #14766e;outline-offset:1px}
  .sbc-intro-lock .mobile-experience-notice {visibility:hidden;pointer-events:none}
  body:has([role="dialog"][aria-modal="true"],dialog[open]) .mobile-experience-notice {display:none}
}

/* English editorial layout: retain the approved artwork and motion, but let
   longer words participate in grid sizing instead of painting into neighbours. */
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-title {
  min-width:0;
  grid-template-columns:minmax(0,1fr);
  padding-left:40px;
}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-title h3 {
  width:auto;
  max-width:13ch;
  min-width:0;
  white-space:normal;
  overflow-wrap:normal;
  text-wrap:balance;
  font-size:clamp(28px,2.65vw,38px);
  line-height:1.18;
  letter-spacing:-.035em;
  transform:none;
}
html[lang="en"].home-page .magic-home .magic-supply :is(.magic-timeline-detail,.magic-timeline-copy,.magic-timeline-copy dl,.magic-timeline-copy dl>div) {min-width:0}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy {gap:24px;padding-block:0}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy>p {
  max-width:45ch;
  font-size:16px;
  line-height:1.75;
  text-wrap:pretty;
}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy dl {gap:14px;padding-top:16px}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy dl>div {grid-template-columns:1fr;gap:5px}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy :is(dt,dd) {white-space:normal;overflow-wrap:break-word}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy dt {font-size:12px;line-height:1.45}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy dd {font-size:14px;line-height:1.55;font-weight:600}
html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-illustration {width:min(220px,100%);margin-left:0}

@media(min-width:1101px){
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-stage {
    grid-template-columns:minmax(230px,.66fr) minmax(0,1.7fr);
    column-gap:clamp(28px,3vw,52px);
  }
  html[lang="en"].home-page .magic-home .magic-supply .is-port .magic-timeline-detail {
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    column-gap:clamp(28px,3vw,48px);
  }
  html[lang="en"].home-page .magic-home .magic-supply .is-freight .magic-timeline-detail {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(28px,3vw,48px);
  }
  html[lang="en"].home-page .magic-home .magic-supply .is-warehouse .magic-timeline-copy {
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:32px;
  }
  html[lang="en"].home-page .magic-home .magic-supply .is-warehouse .magic-timeline-copy dl {padding-top:0}
}
@media(min-width:561px) and (max-width:1100px){
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-stage {
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
    gap:28px;
    height:auto;
    min-height:560px;
    top:90px;
  }
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-entry {min-height:740px}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-title {height:auto;min-height:0;padding-left:36px}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-detail {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;min-height:0;gap:24px;padding-block:32px}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy {grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);align-self:start}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-photo {grid-column:1;grid-row:2;width:100%;max-width:440px;justify-self:start;aspect-ratio:2.15/1}
}
@media(max-width:560px){
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-title {height:auto;min-height:0;padding:0;gap:18px;margin-bottom:28px}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-title h3 {max-width:100%;font-size:30px;text-wrap:balance}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-illustration {width:180px;height:110px}
  html[lang="en"].home-page .magic-home .magic-supply .magic-timeline-copy>p {font-size:15px;line-height:1.75}
}

/* The map artwork/flags keep their geometry; only its English text reflows. */
html[lang="en"] .sbc-trade-map .map-copy h2 {white-space:normal;font-size:clamp(26px,2.5vw,38px);line-height:1.2;text-wrap:balance}
html[lang="en"] .sbc-trade-map .map-description {max-width:31ch;line-height:1.75;margin-top:20px;text-wrap:pretty}
html[lang="en"] .home-trade-map-mobile .magic-company-global-header h2 {white-space:normal;line-height:1.2;text-wrap:balance}

/* Archive labels are words, not four-character Chinese captions. */
html[lang="en"].home-page .magic-home .magic-tablet .magic-tablet-title {
  width:min(calc(100% - 32px),1040px);
  max-width:none;
  margin-inline:auto;
  line-height:1.2;
  text-align:center;
  text-wrap:balance;
}
html[lang="en"].home-page .magic-home .magic-tablet .magic-tablet-title-text,
html[lang="en"].home-page .magic-home .magic-tablet .magic-tablet-title-text .magic-text-animate-segment {
  display:block;
  width:100%;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:normal;
  text-wrap:balance;
}
html[lang="en"].home-page .magic-home .magic-tablet .workspace-sidebar__brand {align-items:flex-start}
html[lang="en"].home-page .magic-home .magic-tablet .workspace-sidebar__brand-name {
  flex:1 1 auto;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  font-size:13px;
  line-height:1.15;
  text-wrap:balance;
}
html[lang="en"].home-page .magic-home .magic-tablet .workspace-nav-link__label {white-space:normal;overflow:visible;line-height:1.35;font-size:13px}
html[lang="en"].home-page .magic-home .magic-tablet .workspace-nav-link {min-width:0;height:auto;min-height:44px;align-items:center}
html[lang="en"].home-page .magic-home .magic-tablet .workspace-view h3 {font-size:clamp(25px,2.3vw,34px);line-height:1.22!important;letter-spacing:-.025em;white-space:normal;text-wrap:balance}
html[lang="en"].home-page .magic-home .magic-tablet :is(.company-intro,.company-history,.company-environment) {height:auto;min-height:100%;grid-template-rows:auto;align-items:start}
html[lang="en"].home-page .magic-home .magic-tablet :is(.company-intro__copy,.company-environment__copy) {align-self:start!important}
html[lang="en"].home-page .magic-home .magic-tablet .company-intro__profile div {grid-template-columns:minmax(85px,.35fr) minmax(0,1fr);gap:14px}
html[lang="en"].home-page .magic-home .magic-tablet .company-intro__profile :is(dt,dd) {min-width:0;white-space:normal;overflow-wrap:break-word}
html[lang="en"].home-page .magic-home .magic-tablet .company-environment__notes span {grid-template-columns:20px minmax(0,1fr)!important;gap:5px 12px}
html[lang="en"].home-page .magic-home .magic-tablet .company-environment__notes em {grid-column:1;grid-row:1/3}
html[lang="en"].home-page .magic-home .magic-tablet .company-environment__notes b {grid-column:2;grid-row:1;min-width:0;white-space:normal}
html[lang="en"].home-page .magic-home .magic-tablet .company-environment__notes small {grid-column:2;grid-row:2;min-width:0}
html[lang="en"].home-page .magic-home .magic-tablet .company-history__timeline li {grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
html[lang="en"].home-page .magic-home .magic-tablet .company-history__timeline li>span {min-width:0;white-space:normal;font-size:13px;line-height:1.4}
html[lang="en"].home-page .magic-home .magic-tablet .company-history__timeline li>div {min-width:0}
html[lang="en"].home-page .magic-home .magic-tablet .company-history__timeline h4 {white-space:normal;line-height:1.4}
html[lang="en"] .magic-home-updates .magic-partners-heading h2 {max-width:19ch;white-space:normal!important;font-size:clamp(32px,3.4vw,48px)!important;line-height:1.2!important;text-wrap:balance}
html[lang="en"] .magic-partners-intro {max-width:42ch;text-wrap:pretty;line-height:1.75}

@media(min-width:960px){
  html[lang="en"].home-page .magic-home .magic-tablet .workspace-sidebar {width:clamp(205px,16vw,230px);min-width:clamp(205px,16vw,230px)}
  html[lang="en"].home-page .magic-home .magic-tablet .company-intro {grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr)!important;gap:28px!important;align-items:start}
  html[lang="en"].home-page .magic-home .magic-tablet .company-intro__copy>p:not(.workspace-kicker) {font-size:14px!important;line-height:1.75!important}
}
@media(max-width:959px){
  html[lang="en"].home-page .magic-home .magic-tablet .workspace-sidebar__brand-name {font-size:11px;line-height:1.12}
}

/* Inner-page Chinese display headings were deliberately kept on one line.
   English needs natural word wrapping, including the animated source spans. */
html[lang="en"] .about-sanhua-page #sanhua-title {
  font-size:clamp(38px,4.3vw,64px)!important;
  line-height:1.12!important;
  white-space:normal!important;
  letter-spacing:-.035em!important;
}
html[lang="en"] .about-sanhua-page #sanhua-title :is(span,em) {display:block!important;margin-left:0!important;white-space:normal!important}
html[lang="en"] .about-sanhua-page :is(#profile-title,#field-gallery-title,#growth-title,#culture-title,#history-title) {
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:normal;
  text-wrap:balance;
  font-size:clamp(28px,3.1vw,44px)!important;
  line-height:1.22!important;
  letter-spacing:-.025em!important;
}
html[lang="en"] .about-sanhua-page :is(#profile-title,#field-gallery-title,#growth-title,#culture-title,#history-title) :is(span,em) {white-space:normal!important}
html[lang="en"] .about-sanhua-page #spirit-title {font-size:clamp(25px,2.6vw,36px)!important;line-height:1.4!important}
html[lang="en"] .about-sanhua-page #spirit-title span {display:block;width:100%;max-width:100%;white-space:normal!important;text-wrap:balance}
html[lang="en"] .about-sanhua-page #spirit-title :is(.sanhua-spirit-line__mask,.sanhua-spirit-line__in) {display:block!important;width:100%!important;max-width:100%;white-space:normal!important}

html[lang="en"].home-page .magic-home .magic-company-global-header h2 {font-size:clamp(28px,4vw,40px)!important;line-height:1.2!important}
html[lang="en"].home-page .magic-home .magic-company-global-header :is(.magic-company-title-line,.magic-text-animate-segment) {max-width:100%;white-space:normal;overflow-wrap:normal}
html[lang="en"].home-page .magic-home .magic-company-global-header .magic-text-animate-segment {display:block}
@media(min-width:561px) and (max-width:1000px){
  html[lang="en"] .about-sanhua-page .sanhua-culture-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[lang="en"] .about-sanhua-page .sanhua-culture-grid article {padding:28px}
}
@media(max-width:560px){
  html[lang="en"] .about-sanhua-page .sanhua-culture-grid {grid-template-columns:minmax(0,1fr)!important}
  html[lang="en"] .about-sanhua-page .sanhua-culture-grid article {min-height:0;padding:28px}
  html[lang="en"] .about-sanhua-page .sanhua-culture-grid h3 {margin-top:24px;line-height:1.3}
}
/* Navigation breakpoints and translations are styled in site-navigation-v2.css. */

/* Consistent English wrapping: headings balance by phrase, body copy avoids
   ragged one-word endings where the browser can choose a better line, and long
   identifiers break only when they truly cannot fit. */
html[lang="en"] body :is(h1,h2,h3,h4,h5,h6) {word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:balance}
html[lang="en"] body :is(p,li,dd,figcaption) {word-break:normal;hyphens:none;text-wrap:pretty}
html[lang="en"] body :is(.products-card-heading h3,.products-card-origin,.products-card-english,.detail-en,.document-status span) {overflow-wrap:break-word;word-break:normal}
html[lang="en"] body :is(button,.btn,.text-link,.shift-text-link) {word-break:normal;overflow-wrap:normal;text-wrap:balance}

/* Component-specific English overflow fixes found in the full-site audit. */
html[lang="en"].home-page .shift-business-link .shift-row-copy {flex:1 1 auto;width:auto;max-width:calc(100% - 54px)}
html[lang="en"].home-page .shift-business-link .shift-row-description {max-width:100%;text-wrap:pretty}
html[lang="en"].home-page .shift-business-link .shift-row-arrow {flex:0 0 auto;margin-left:auto}
html[lang="en"] .office dd.tabular {white-space:normal}
html[lang="en"] .news-detail-sequence strong {white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-wrap:balance}
html[lang="en"] .industry-data-article .data-number {font-size:clamp(24px,2.5vw,36px)}
html[lang="en"] .industry-data-article .data-unit {display:block;margin:7px 0 0;font-size:13px;line-height:1.2}
html[lang="en"] .industry-data-article .fx-value {font-size:clamp(18px,2vw,26px)}
html[lang="en"] .sbc-footer {overflow-x:clip}
@media(max-width:900px){
  html[lang="en"] .products-categories {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[lang="en"] .products-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[lang="en"] .products-category-card,
  html[lang="en"] .products-card,
  html[lang="en"] .products-card>a {min-width:0;max-width:100%}
}
@media(max-width:767px){
  html[lang="en"] .products-categories {grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:560px){
  html[lang="en"] .products-grid {grid-template-columns:minmax(0,1fr)!important}
}
html[lang="en"] .products-card-heading {min-width:0}
html[lang="en"] .products-card-heading h3 {flex:1 1 auto;min-width:0;overflow-wrap:break-word}