/* ZEHN Marketplace - portal pages (categories, products, auth, profile, store)
   Same B2B system as the chrome/browse: white surfaces, thin grey borders,
   orange accent, low radius, Arial. No gradients / glass / oversized display type. */
:root{
    --mk-orange:#ff6a00;--mk-orange-dark:#e85f00;--mk-orange-soft:#fff3ea;
    --mk-ink:#1f2937;--mk-text:#3b4453;--mk-sub:#6b7280;--mk-line:#e5e7eb;
    --mk-line-strong:#d6dae0;--mk-bg:#f3f4f6;--mk-link:#1668e3;--mk-star:#ff9500;
}
*{box-sizing:border-box}
body.mpp-body{margin:0;font-family:Arial,Helvetica,"Segoe UI",system-ui,sans-serif;background:var(--mk-bg);color:var(--mk-text);font-size:14px}
a{text-decoration:none}
.mpp-shell{width:min(100% - 24px,1380px);margin:0 auto;padding:18px 0 30px}

.mpp-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:4px;padding:10px 18px;font-weight:700;font-size:13px;border:1px solid transparent}
.mpp-btn.primary,.mpp-form button{background:var(--mk-orange);color:#fff;border:0}
.mpp-btn.primary:hover,.mpp-form button:hover{background:var(--mk-orange-dark)}
.mpp-btn.ghost{background:#fff;color:var(--mk-orange);border:1px solid var(--mk-orange)}
.mpp-btn.ghost:hover{background:var(--mk-orange-soft)}
.mpp-btn.full{width:100%;margin-top:16px}

.mpp-kicker,.mpp-section-title span,.mpp-page-hero span,.mpp-form-head span{display:inline-flex;align-items:center;width:max-content;padding:4px 10px;border-radius:3px;background:var(--mk-orange-soft);border:1px solid #ffd9bd;color:var(--mk-orange-dark);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}

/* page hero / titles */
.mpp-page-hero{padding:22px 0 14px}
.mpp-auth-copy h1,.mpp-page-hero h1{font-size:28px;line-height:1.2;margin:12px 0 8px;color:var(--mk-ink);font-weight:800}
.mpp-auth-copy p,.mpp-page-hero p{font-size:14px;line-height:1.65;color:var(--mk-sub);margin:0;max-width:640px}
.mpp-section-title h2,.mpp-form-head h2{font-size:20px;line-height:1.25;margin:9px 0;color:var(--mk-ink);font-weight:800}
.mpp-section-title p,.mpp-form-head p{margin:0;color:var(--mk-sub);line-height:1.55;font-size:13px}

/* shared card surface */
.mpp-form-card,.mpp-login-visual,.mpp-profile-card,.mpp-feed-panel,.mpp-store-hero,.mpp-hidden-vendor,.mpp-category-grid article,.mpp-product-grid article,.mpp-vendor-profile{background:#fff;border:1px solid var(--mk-line);border-radius:6px}

/* auth */
.mpp-auth-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);gap:20px;margin-top:18px;align-items:start}
.mpp-auth-grid.login{grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr)}
.mpp-live-frame{margin-top:20px;border-radius:6px;background:#fff;border:1px solid var(--mk-line);padding:8px;overflow:hidden}
.mpp-live-frame img{width:100%;height:300px;object-fit:cover;border-radius:4px;display:block}
.mpp-form-card{padding:22px}
.mpp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.mpp-form label{display:grid;gap:6px}
.mpp-form label span{font-size:12px;font-weight:700;color:var(--mk-text)}
.mpp-form input,.mpp-form select{height:44px;border-radius:4px;border:1px solid var(--mk-line-strong);background:#fff;padding:0 14px;color:var(--mk-text);font-size:13px;outline:0}
.mpp-form input:focus,.mpp-form select:focus{border-color:var(--mk-orange)}
.mpp-form button{height:46px;border-radius:4px;font-size:14px;font-weight:700;cursor:pointer;grid-column:1/-1}
.mpp-auth-note{margin-top:14px;color:var(--mk-sub);font-size:13px}
.mpp-auth-note a{font-weight:700;color:var(--mk-link)}
.mpp-login-visual{position:relative;padding:8px;overflow:hidden}
.mpp-login-visual img{width:100%;height:380px;object-fit:cover;border-radius:4px}
.mpp-login-visual div{position:absolute;left:24px;bottom:24px;right:24px;padding:14px 16px;border-radius:6px;background:rgba(255,255,255,.96);border:1px solid var(--mk-line)}
.mpp-login-visual b{display:block;color:var(--mk-ink);font-size:16px;font-weight:800}
.mpp-login-visual span{display:block;margin-top:4px;color:var(--mk-sub);font-size:13px}

/* profile */
.mpp-profile-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-top:18px}
.mpp-profile-card{padding:20px;align-self:start;position:sticky;top:110px}
.mpp-avatar{width:64px;height:64px;border-radius:8px;background:var(--mk-orange);display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800}
.mpp-profile-card h1{font-size:20px;margin:14px 0 4px;color:var(--mk-ink);font-weight:800}
.mpp-profile-card>p{color:var(--mk-sub);margin:0 0 10px;font-size:13px}
.mpp-profile-card>span{display:inline-flex;padding:4px 10px;border-radius:3px;background:var(--mk-orange-soft);border:1px solid #ffd9bd;color:var(--mk-orange-dark);font-weight:700;font-size:12px}
.mpp-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.mpp-profile-stats b{padding:11px 6px;border-radius:6px;background:#f7f8fa;border:1px solid var(--mk-line);text-align:center;color:var(--mk-ink);font-size:18px;font-weight:800}
.mpp-profile-stats small{display:block;color:var(--mk-sub);font-size:10px;margin-top:2px;font-weight:600}
.mpp-chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.mpp-chip-row em{font-style:normal;padding:5px 10px;border-radius:3px;background:#f3f4f6;border:1px solid var(--mk-line);color:var(--mk-text);font-weight:600;font-size:12px}
.mpp-feed-panel{padding:20px}
.mpp-video-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.mpp-video-feed article{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#111;border:1px solid var(--mk-line)}
.mpp-video-feed img{width:100%;height:100%;object-fit:cover;display:block}
.mpp-video-overlay{position:absolute;inset:auto 0 0 0;padding:14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));color:#fff}
.mpp-video-overlay span{font-size:10px;font-weight:800;letter-spacing:.05em;background:#e11d48;padding:2px 6px;border-radius:3px}
.mpp-video-overlay h3{font-size:14px;line-height:1.3;margin:8px 0 4px;font-weight:700}
.mpp-video-overlay p{color:#e5e7eb;margin:0 0 10px;font-size:12px}
.mpp-video-overlay div{display:flex;gap:6px}
.mpp-video-overlay a{flex:1;text-align:center;padding:7px;border-radius:4px;background:var(--mk-orange);color:#fff;font-weight:700;font-size:11px}

/* vendor store */
.mpp-store-page{margin-top:16px}
.mpp-store-hero{position:relative;overflow:hidden;min-height:230px;border-radius:6px}
.mpp-store-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mpp-store-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.84),rgba(15,23,42,.35) 70%,rgba(15,23,42,.15))}
.mpp-store-hero-content{position:relative;z-index:2;padding:30px;max-width:680px;color:#fff}
.mpp-store-hero-content>span{display:inline-flex;padding:4px 10px;border-radius:3px;background:var(--mk-orange);font-weight:700;font-size:12px}
.mpp-store-hero h1{font-size:28px;line-height:1.2;margin:12px 0 6px;font-weight:800}
.mpp-store-hero p{color:#e5e7eb;font-size:13px;margin:0}
.mpp-store-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mpp-store-actions a{padding:10px 18px;border-radius:4px;background:var(--mk-orange);color:#fff;font-weight:700;font-size:13px}
.mpp-store-actions a:hover{background:var(--mk-orange-dark)}
.mpp-store-actions a.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.6);color:#fff}

/* vendor profile detail block */
.mpp-vendor-profile{margin-top:16px;padding:20px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.mpp-vendor-profile h2{margin:0 0 8px;font-size:16px;color:var(--mk-ink);font-weight:800}
.mpp-vendor-profile p.about{margin:0 0 16px;color:var(--mk-text);line-height:1.65;font-size:13px}
.mpp-vendor-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--mk-line);border:1px solid var(--mk-line);border-radius:6px;overflow:hidden}
.mpp-vendor-facts div{background:#fff;padding:11px 13px}
.mpp-vendor-facts small{display:block;color:var(--mk-sub);font-size:11px;margin-bottom:3px}
.mpp-vendor-facts b{color:var(--mk-ink);font-size:13px;font-weight:700}
.mpp-vendor-contact{border:1px solid var(--mk-line);border-radius:6px;padding:16px;background:#fafafa}
.mpp-vendor-contact h3{margin:0 0 10px;font-size:14px;color:var(--mk-ink);font-weight:800}
.mpp-contact-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--mk-line);font-size:13px}
.mpp-contact-row:last-of-type{border-bottom:0}
.mpp-contact-row span{color:var(--mk-sub)}
.mpp-contact-row b{color:var(--mk-ink);font-weight:700;filter:blur(4px);user-select:none}
.mpp-vendor-contact .mpp-btn{width:100%;margin-top:12px}
.mpp-vendor-contact .lock-note{margin:10px 0 0;font-size:11px;color:var(--mk-sub);text-align:center}

.mpp-hidden-vendor{display:flex;gap:10px;align-items:center;margin:14px 0;padding:13px 16px;border-left:3px solid var(--mk-orange)}
.mpp-hidden-vendor strong{color:var(--mk-ink);font-weight:800;font-size:13px}
.mpp-hidden-vendor span{color:var(--mk-sub);line-height:1.5;font-size:13px}
.mpp-section-title{margin:18px 0 0}

/* category grid */
.mpp-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mpp-category-grid article{overflow:hidden;transition:box-shadow .15s,border-color .15s}
.mpp-category-grid article:hover{border-color:var(--mk-orange);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.mpp-category-grid img{width:100%;height:150px;object-fit:cover;display:block}
.mpp-category-grid article div{padding:14px}
.mpp-category-grid article div>span{color:var(--mk-sub);font-size:12px;font-weight:600}
.mpp-category-grid h2{margin:6px 0;font-size:15px;color:var(--mk-ink);font-weight:700}
.mpp-category-grid p{color:var(--mk-sub);line-height:1.5;font-size:12px;margin:0 0 8px}
.mpp-category-grid a{display:inline-flex;color:var(--mk-link);font-weight:700;font-size:13px}
.mpp-category-grid a:hover{color:var(--mk-orange)}

/* product grid */
.mpp-product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px}
.mpp-product-grid.master{margin-top:0}
.mpp-product-grid article{overflow:hidden;transition:box-shadow .15s,border-color .15s}
.mpp-product-grid article:hover{border-color:var(--mk-orange);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.mpp-product-grid img{width:100%;height:150px;object-fit:cover;display:block;background:#f0f1f3}
.mpp-product-grid article div{padding:11px}
.mpp-product-grid span{display:block;color:var(--mk-sub);font-size:11px;font-weight:600}
.mpp-product-grid h3{margin:5px 0;font-size:13px;line-height:1.35;color:var(--mk-text);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.mpp-product-grid p{color:var(--mk-sub);line-height:1.4;font-size:12px;margin:0}
.mpp-product-grid b{display:block;margin:8px 0;color:var(--mk-orange);font-size:15px;font-weight:800}
.mpp-product-grid a{display:flex;justify-content:center;padding:8px;border-radius:4px;background:#fff;border:1px solid var(--mk-line-strong);color:var(--mk-text);font-weight:700;font-size:12px}
.mpp-product-grid a:hover{border-color:var(--mk-orange);color:var(--mk-orange)}

/* product filter / empty */
.mpp-filter-clear{display:inline-flex;align-items:center;font-style:normal;padding:5px 11px;border-radius:3px;background:#fff;border:1px solid var(--mk-line-strong);color:#dc2626;font-weight:700;font-size:12px}
.mpp-filter-clear:hover{border-color:#dc2626}
.mpp-empty-state{margin-top:18px;padding:48px 24px;text-align:center;background:#fff;border:1px solid var(--mk-line);border-radius:6px}
.mpp-empty-state h3{margin:0 0 6px;font-size:18px;color:var(--mk-ink);font-weight:800}
.mpp-empty-state p{margin:0 0 16px;color:var(--mk-sub)}
.mpp-empty-state .mpp-btn{display:inline-flex}

@media(max-width:1080px){
    .mpp-auth-grid,.mpp-auth-grid.login,.mpp-profile-layout{grid-template-columns:1fr}
    .mpp-video-feed{grid-template-columns:repeat(2,1fr)}
    .mpp-category-grid{grid-template-columns:repeat(2,1fr)}
    .mpp-product-grid{grid-template-columns:repeat(3,1fr)}
    .mpp-profile-card{position:static}
    .mpp-vendor-profile{grid-template-columns:1fr}
}
@media(max-width:680px){
    .mpp-form,.mpp-category-grid,.mpp-product-grid{grid-template-columns:repeat(2,1fr)}
    .mpp-video-feed{grid-template-columns:1fr}
    .mpp-store-hero-content{padding:20px}
    .mpp-auth-copy h1,.mpp-page-hero h1{font-size:23px}
}