/* Supplier page header (design C): dark band with everything in one row, highlights, about and catalogues under it. */
.sp{margin-bottom:28px;border:1px solid #e7e5e4;border-radius:20px;overflow:hidden;background:#fff}
.sp-band{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;padding:18px 22px;background:#04342c;color:#fff}
.sp-av{flex:none}
.sp-av .av-lg{width:68px;height:68px}
.sp-av .av-ring .av-in{border-color:#04342c}
.sp-av .av:not(.av-ring){box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.sp-id{flex:1;min-width:160px}
.sp-name{display:flex;align-items:center;gap:7px;margin:0;font-size:1.3rem;font-weight:800;line-height:1.6;color:#fff}
.sp-meta{margin:0;font-size:.82rem;color:#9fe1cb}
.sp-stats{display:flex;gap:4px;margin:0}
.sp-stats div{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:2px 10px}
.sp-stats div+div{border-inline-start:1px solid rgba(159,225,203,.25)}
.sp-stats dd{margin:0;font-size:1.1rem;font-weight:800;line-height:1.5;color:#fff}
.sp-stats dt{font-size:.72rem;color:#9fe1cb}
.sp-act{flex:none}
.sp-follow{display:inline-flex;align-items:center;justify-content:center;padding:9px 24px;border:0;border-radius:999px;background:#fff;color:#04342c;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:transform .2s,background .2s}
.sp-follow:hover{transform:translateY(-1px);background:#e1f5ee}
.sp-follow.is-on{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.sp-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;padding:16px 22px}
.sp-hl{flex:none;margin:0;padding:0}
/* Highlights on the dark band: light labels, a soft ring that turns mint on hover. */
.sp-band .sp-hl{max-width:100%;overflow-x:auto;scrollbar-width:none}
.sp-band .hl{width:64px;color:#d7f2e8}
.sp-band .hl-c{width:56px;height:56px;border-color:rgba(159,225,203,.45);background:transparent}
.sp-band .hl:hover .hl-c{border-color:#9fe1cb}
.sp-band .hl b{max-width:64px}
.sp-text{flex:1;min-width:220px}
.sp-about-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.95rem;font-weight:800;color:#04342c}
.sp-about-h::before{content:"";width:4px;height:18px;border-radius:4px;background:linear-gradient(180deg,var(--color-brand-600),#8fd3bd)}
.sp-about{margin:0;white-space:pre-line;text-align:justify;text-justify:inter-word;font-size:.92rem;line-height:2.1;color:#3f3f46}
/* Brand facts: small cards with an icon, the label above and the value in bold. */
.sp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.sp-facts li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border:1px solid #e3efe9;border-radius:14px;background:linear-gradient(180deg,#f6fbf9,#fff)}
.sp-facts i{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#e3f4ee;color:var(--color-brand-600)}
.sp-facts span{font-size:.72rem;color:#78716c}
.sp-facts b{font-size:.9rem;font-weight:700;line-height:1.6;color:#1c1917;word-break:break-word}
.sp-docs{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.sp-doc{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid #9fe1cb;border-radius:999px;color:#0f6e56;font-size:.82rem;font-weight:700;white-space:nowrap;transition:background .2s}
.sp-doc:hover{background:#e1f5ee}
.sp-h{margin:0 0 16px;font-size:1.15rem;font-weight:700}
@media (max-width:767px){
  .sp{border-radius:16px}
  .sp-band{padding:16px}
  .sp-av .av-lg{width:60px;height:60px}
  .sp-name{font-size:1.1rem}
  .sp-band .sp-hl{order:3;width:100%}
  .sp-stats{order:3;width:100%;justify-content:space-around;padding-top:10px;border-top:1px solid rgba(159,225,203,.2)}
  .sp-act{order:4;width:100%}
  .sp-act .sp-follow,a.sp-act{width:100%}
  .sp-row{padding:14px 16px}
  .sp-docs{width:100%}.sp-doc{flex:1;justify-content:center}
}