.company-card--focused { min-inline-size: 0; display: flex; flex-direction: column; gap: 1rem; }
.company-card--focused .head { align-items: flex-start; gap: 1rem; }
.company-card--focused .head .name { min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--text-xl); line-height: 1.25; }
.company-card--focused .logo { flex-shrink: 0; }
.company-card--focused p { margin: 0; }
.supplier-products { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem; font-weight: 650; font-size: var(--text-base); line-height: 1.5; }
.supplier-market, .supplier-capacity { display: grid; gap: .35rem; line-height: 1.55; }
.supplier-label { font-size: .8125rem; color: #666; }
.supplier-credentials { font-size: .8125rem; color: #666; line-height: 1.6; }
.supplier-capacity { border-block-start: 1px solid var(--color-border, #dce1e5); padding-block-start: .85rem; }
.supplier-metric { color: #555; font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.company-card--focused .actions { margin-block-start: auto; padding-block-start: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 480px) { .company-card--focused .actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; } }
body[data-page="directory"] .search-bar { display: flex; flex-wrap: wrap; }
body[data-page="directory"] .search-bar .seg { flex: 1 1 16rem; min-inline-size: 0; }
body[data-page="directory"] .search-bar input { min-inline-size: 0; inline-size: 100%; }

.supplier-metric strong { font-weight: 650; }
.supplier-more-markets { font-size: .875rem; inline-size: fit-content; }

.supplier-product-pill { display: inline-block; color: #fff; background: #263744; padding: .35rem .65rem; border-radius: 999px; font-size: .875rem; line-height: 1.45; }
.supplier-market-values { position: relative; font-size: .875rem; color: #666; }
.supplier-market-values abbr { text-decoration: none; cursor: help; font-weight: 600; }
.supplier-market-values abbr:is(:hover, :focus-visible)::after { content: attr(data-full-en); position: absolute; z-index: 2; inset-block-start: 100%; inset-inline-start: 0; padding: .3rem .5rem; color: white; background: #263744; border-radius: .25rem; inline-size: max-content; max-inline-size: 14rem; white-space: normal; font-weight: 400; }
:lang(zh) .supplier-market-values abbr:is(:hover, :focus-visible)::after { content: attr(data-full-zh); }

/* Keep long supplier/product names inside their card at narrow widths. */
.company-card--focused > *, .supplier-product-pill, .supplier-market-values, .supplier-metric { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
.supplier-product-pill { white-space: normal; }
.company-card--focused .actions .btn { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }