/**
 * English-locale layout fixes.
 *
 * Chinese UI strings are typically 2-6 characters; their English translations
 * often run 3-5x longer (e.g. 取消 -> Cancel, 确认收货 -> Confirm Receipt).
 * A lot of this site's CSS was originally sized for short Chinese labels
 * (fixed-width layui form labels/table columns, 5-column quick-quote grid,
 * nowrap+ellipsis option pills). Scoping these overrides to html[lang="en"]
 * keeps the Chinese layout untouched while giving English text room to
 * either wrap onto a second line or fit in a wider column, instead of
 * being silently clipped by text-overflow:ellipsis or overflowing its box.
*/

/* Action labels may wrap, but their controls must grow with the text. */
html[lang="en"] .layui-btn:not(.layui-btn-xs):not(.layui-btn-sm) {
    height: auto;
    min-height: 38px;
    line-height: 1.35;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: normal;
}

html[lang="en"] .btn:not(.btn-xs):not(.btn-sm) {
    white-space: normal;
    overflow-wrap: break-word;
}

html[lang="en"] .nav-tabs > li > a,
html[lang="en"] .user-center-menu a {
    white-space: nowrap;
}

@media (max-width: 768px) {
    html[lang="en"] .nav-tabs,
    html[lang="en"] .user-center-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    html[lang="en"] .nav-tabs > li,
    html[lang="en"] .user-center-menu > li {
        flex: 0 0 auto;
    }
}

/* Layui form labels: let long English labels wrap onto 2 lines within
   their existing column width, instead of ellipsis-truncating meaning
   away (e.g. "Province, city and district" -> "Provin…"). */
html[lang="en"] .layui-form-label,
html[lang="en"] .control-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
    line-height: 1.3 !important;
    padding-top: 9px;
}

/* Quote-configurator radio/checkbox option labels: these use min-width:0
   + ellipsis to fit narrow flex children. Under English that silently
   hides real option text (worse than visible overflow). Allow wrapping. */
html[lang="en"] .zhv-076 .zhv-027 .layui-form-radio span {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* Homepage "self-service quote" quick links: 5-column grid sized for
   2-4 char Chinese product names truncates English names like
   "T-Type Double Tuck Box" to "T-Type Doub…". Drop to 3 columns so each
   cell is wider, and let the label wrap to 2 lines instead of ellipsis. */
html[lang="en"] .zhv-a409 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[lang="en"] .zhv-a409 .zhv-a408 {
    min-height: 44px;
    align-items: flex-start;
    padding-top: 8px;
}

html[lang="en"] .zhv-a409 .zhv-a408 span {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    line-height: 1.25;
}

/* Quote-configurator row labels (material/weight/process/etc.): base class
   is a fixed 65px with white-space:nowrap and no overflow guard, so English
   labels ("Paper weight", "Surface finish"...) visibly bleed into the
   option list to their right. Some templates additionally hardcode a
   narrower inline width (e.g. corrugated_box.html's 40px) which an
   !important rule here still overrides. Widen and allow 2-line wrap
   instead of a single overflowing line.
   Note: a few sibling notice/tooltip elements hardcode a left margin
   keyed to this label's original width (e.g. "margin: 4px 0 0 72px");
   those may need a follow-up nudge if english labels visibly misalign
   with the notice text below them. */
html[lang="en"] .zhv-121 {
    width: 150px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.3 !important;
}

/* Notice/tooltip elements positioned with a left margin keyed to the
   original (much narrower) Chinese label width now sit too close to /
   overlap the widened label above. */
html[lang="en"] .zhv-076 .zhv-134 {
    margin-left: 150px !important;
}

/* Grid-based label+content rows (`.zhv-048`/`.zhv-085` reused across
   index.html, shopping_bag.html, common_quote_style.html): the label
   column is a hard `grid-template-columns: 70px minmax(0, 1fr)`, not the
   `.zhv-121` flex label fixed above, so it needs its own override. At 70px
   an English label like "Paper weight and thickness" wraps to 4 short
   lines even on a wide viewport, since the grid track never grows. */
html[lang="en"] .zhv-048,
html[lang="en"] .zhv-085 {
    grid-template-columns: 150px minmax(0, 1fr) !important;
}

@media (min-width: 769px) {
    html[lang="en"] .zhv-076 [data-section="dimensions"],
    html[lang="en"] .zhv-076 [data-section="neto-dimensions"] {
        grid-template-columns: 110px minmax(0, 1fr) !important;
    }

    html[lang="en"] .zhv-076 [data-section="dimensions"] .zhv-049,
    html[lang="en"] .zhv-076 [data-section="neto-dimensions"] .zhv-049 {
        margin: 0 4px !important;
    }
}

/* Quantity-unit selector pills: fixed 80-82px !important boxes with
   white-space:nowrap; a translated unit word ("Sheets"/"Pieces" vs the
   original 1-character Chinese unit) can overflow them. */
html[lang="en"] [data-section="quantity"] .zhv-077 span,
html[lang="en"] [data-section="quantity"] .zhv-112 {
    width: auto !important;
    min-width: 82px;
    white-space: normal !important;
}

/* Option-tile pills (paper stock / finish / size choices, `<li class="zhv-1XX">`
   inside a `<ul class="zhv-138">`). Base rule is a fixed height:32px with no
   wrap allowance; several templates additionally hardcode inline
   width:96-125px for options that were short in Chinese ("白卡纸") but are
   long descriptive phrases in English ("215 gsm white card (0.30 mm)").
   Fixed height + wrapped text = text bleeding outside the tile, so this
   resets both dimensions to grow with content. */
html[lang="en"] .zhv-138 li {
    width: auto !important;
    height: auto !important;
    min-width: 96px;
    min-height: 32px;
    line-height: 1.3 !important;
    white-space: normal !important;
    padding: 6px 10px;
}

/* Province/city/district selects (`.zhv-081`, shared across 11 offer/*
   quote pages): three layui-rendered selects share one flex row via
   flex:1;min-width:0, so their fixed-width `.layui-select-title` display
   text ("Select province" etc, ~26 chars longer than "请选择省份") gets
   ellipsis-truncated to "Select Pro...". A layui select's visible text is
   rendered in a readonly <input>, which cannot wrap, so this widens the
   row's minimum per-item width and lets it wrap to two lines rather than
   squeezing three cramped, truncated boxes onto one. */
html[lang="en"] .zhv-081 {
    flex-wrap: wrap;
}
html[lang="en"] .zhv-081 .layui-form-select {
    flex: 1 1 150px;
    min-width: 150px;
}

/* User-center mobile tab bar: already a horizontally-scrolling row, but
   with no white-space:nowrap English labels ("After-sales requests",
   "Withdrawal history") wrap to 2-3 ragged lines instead of just taking
   more horizontal space in the existing scroll container. */
@media screen and (max-width: 768px) {
    html[lang="en"] .user-center-menu a {
        white-space: nowrap;
        min-width: 130px;
    }
}