/* Marketplace pages (Sell with us, Sellers, a seller's page, the seller's tools). Colours, corners
   and fonts come from the shared theme variables (--theme-*, which every theme may set), with
   fallbacks so they look right with any theme. A theme can also draw these pages itself
   (theme::marketplace.*); then its own classes sit beside these. */
.mp-sell, .mp-sellers, .mp-seller { --mp-p: var(--theme-primary, #ff6d00); --mp-line: var(--theme-line, #e7e5e4); --mp-muted: var(--theme-muted, #78716c); --mp-soft: var(--theme-soft, #fafaf9); --mp-r: var(--theme-r, 12px);
    display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.75rem 0; }
.mp-hero, .mp-hero-in { --mp-p: var(--theme-primary, #ff6d00); --mp-r: var(--theme-r, 12px); }
.mp-box { padding: 1.5rem; border: 1px solid var(--mp-line); border-radius: var(--mp-r); background: var(--theme-bg, #fff); }
.mp-logo { display: grid; flex: none; place-items: center; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--mp-p) 14%, var(--theme-bg, #fff)); color: var(--mp-p); font: 700 1.05rem var(--theme-font-head, inherit); }
.mp-logo img { width: 100%; height: 100%; object-fit: cover; }
.mp-logo.is-lg { width: 6rem; height: 6rem; border: 4px solid var(--theme-bg, #fff); font-size: 1.7rem; }

/* Sell with us: the pitch and the form */
.mp-pitch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 2.5rem; align-items: start; }
.mp-pitch h2 { margin: 0.4rem 0 1.5rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.mp-points { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.mp-points li { display: flex; gap: 0.9rem; }
.mp-points svg { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.7rem; border-radius: var(--theme-r-btn, 10px); background: color-mix(in srgb, var(--mp-p) 12%, var(--theme-bg, #fff)); color: var(--mp-p); }
.mp-points span { display: flex; flex-direction: column; gap: 0.15rem; color: var(--mp-muted); }
.mp-points b { color: var(--theme-text, #1c1917); font-size: 1rem; }
.mp-join { display: flex; flex-direction: column; gap: 1rem; }
.mp-join :is(.dm-h3, .mp-h3) { margin: 0; }
.mp-hint { color: var(--mp-muted); font-size: 0.78rem; font-style: normal; font-weight: 400; }

/* Status of an application */
.mp-status { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 40rem; margin-inline: auto; padding: 2.5rem 1.5rem; border: 1px solid var(--mp-line); border-radius: var(--mp-r); text-align: center; }
.mp-status h2 { margin: 0; font-size: 1.5rem; }
.mp-status p { max-width: 48ch; margin: 0; color: var(--mp-muted); }
.mp-status-ic { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in srgb, var(--mp-p) 12%, var(--theme-bg, #fff)); color: var(--mp-p); }
.mp-status.is-rejected .mp-status-ic, .mp-status.is-suspended .mp-status-ic { background: color-mix(in srgb, #dc2626 10%, var(--theme-bg, #fff)); color: #b91c1c; }
.mp-reason { padding: 0.6rem 0.9rem; border-radius: var(--theme-r-btn, 10px); background: var(--mp-soft); color: var(--theme-text, #1c1917) !important; }
.mp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; width: 100%; margin: 0.75rem 0 0; text-align: start; }
.mp-facts div { padding: 0.7rem 0.9rem; border-radius: var(--theme-r-btn, 10px); background: var(--mp-soft); }
.mp-facts dt { color: var(--mp-muted); font-size: 0.78rem; }
.mp-facts dd { margin: 0; font-weight: 600; }

/* The seller's overview */
.mp-head { display: flex; align-items: center; gap: 1rem; }
.mp-head h2 { margin: 0; font-size: 1.4rem; }
.mp-head p { margin: 0.15rem 0 0; color: var(--mp-muted); }
.mp-head a { color: var(--mp-p); font-weight: 600; }
.mp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.mp-tiles > * { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.2rem; border: 1px solid var(--mp-line); border-radius: var(--mp-r); }
.mp-tiles > :first-child { border-color: color-mix(in srgb, var(--mp-p) 50%, var(--mp-line)); background: color-mix(in srgb, var(--mp-p) 6%, var(--theme-bg, #fff)); }
.mp-tiles span { color: var(--mp-muted); font-size: 0.82rem; }
.mp-tiles b { font: 700 1.5rem/1.2 var(--theme-font-head, inherit); font-variant-numeric: tabular-nums; }
.mp-tiles em { color: var(--mp-muted); font-size: 0.78rem; font-style: normal; }
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mp-table th { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--mp-line); color: var(--mp-muted); font-size: 0.78rem; font-weight: 600; text-align: start; white-space: nowrap; }
.mp-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--mp-line); white-space: nowrap; }
.mp-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
.mp-st { padding: 0.15rem 0.55rem; border-radius: 99px; background: var(--mp-soft); color: var(--mp-muted); font-size: 0.76rem; font-weight: 600; }
.mp-st.is-completed { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; }
.mp-st.is-processing, .mp-st.is-pending { background: color-mix(in srgb, var(--mp-p) 12%, transparent); color: var(--mp-p); }
.mp-st.is-cancelled, .mp-st.is-refunded { background: color-mix(in srgb, #dc2626 10%, transparent); color: #b91c1c; }
.mp-note { margin: 1rem 0 0; font-size: 0.85rem; }

/* Sellers list */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.mp-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding-bottom: 1.25rem; overflow: hidden; border: 1px solid var(--mp-line); border-radius: var(--mp-r); text-align: center; transition: border-color 0.2s; }
.mp-card:hover { border-color: color-mix(in srgb, var(--mp-p) 50%, var(--mp-line)); }
.mp-card-banner { width: 100%; height: 5.5rem; background: color-mix(in srgb, var(--mp-p) 18%, var(--mp-soft)) center / cover; }
.mp-card .mp-logo { margin-top: -1.9rem; border: 3px solid var(--theme-bg, #fff); }
.mp-card b { margin-top: 0.4rem; font-size: 1rem; }
.mp-card small, .mp-card em { color: var(--mp-muted); font-size: 0.82rem; font-style: normal; }

/* A seller's page */
.mp-hero { position: relative; padding-block: 4.5rem 1.75rem; background: var(--theme-secondary, #111); color: #fff; }
/* A banner gets a dark wash at the bottom so the name stays readable on any picture. */
.mp-hero.has-banner { background: linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.6)), var(--mp-banner) center / cover; }
.mp-hero-in { display: flex; align-items: flex-end; gap: 1.25rem; }
.mp-hero h1 { margin: 0.2rem 0; color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.mp-hero p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0; opacity: 0.9; }
.mp-crumbs { font-size: 0.82rem; opacity: 0.85; }
.mp-crumbs a { color: inherit; }
.mp-about { max-width: 70ch; margin: 0; color: var(--mp-muted); white-space: pre-line; }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mp-bar :is(.dm-h3, .mp-h3) { margin: 0; }
.mp-sort { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mp-sort a { padding: 0.4rem 0.85rem; border: 1px solid var(--mp-line); border-radius: 99px; font-size: 0.85rem; }
.mp-sort a[aria-current] { border-color: var(--mp-p); background: color-mix(in srgb, var(--mp-p) 10%, var(--theme-bg, #fff)); font-weight: 600; }
.mp-empty { padding: 2.5rem 0; text-align: center; }

@media (max-width: 64em) { .mp-pitch { grid-template-columns: minmax(0, 1fr); } .mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) {
    .mp-tiles { grid-template-columns: minmax(0, 1fr); }
    .mp-hero-in { flex-direction: column; align-items: flex-start; }
    .mp-logo.is-lg { width: 4.5rem; height: 4.5rem; }
    .mp-box { padding: 1.1rem; }
}
.mp-void { color: var(--mp-muted); }

/* ── The seller's tools (/sell/…), inside the account area's layout ── */
.mp-tools { --mp-p: var(--theme-primary, #ff6d00); --mp-line: var(--theme-line, #e7e5e4); --mp-muted: var(--theme-muted, #78716c); --mp-soft: var(--theme-soft, #fafaf9); --mp-r: var(--theme-r, 12px); }
.mp-tools :is(.dm-acc-main, .mp-acc-main) { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.mp-tools-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mp-tools-head :is(.dm-acc-title, .mp-acc-title) { margin: 0; }
.mp-tools-av { overflow: hidden; }
.mp-tools-av img { width: 100%; height: 100%; object-fit: cover; }
:is(.dm-acc-me, .mp-acc-me) small a { color: var(--mp-p); font-weight: 600; }
.mp-badge { margin-inline-start: auto; padding: 0 0.45rem; border-radius: 99px; background: var(--mp-p); color: var(--theme-on-primary, #fff); font-size: 0.72rem; font-style: normal; font-weight: 700; line-height: 1.5rem; }
.mp-box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.mp-box-head :is(.dm-h3, .mp-h3) { margin: 0; }
.mp-alert { display: flex; align-items: center; gap: 0.8rem; margin: 0; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--mp-p) 45%, var(--mp-line)); border-radius: var(--mp-r); background: color-mix(in srgb, var(--mp-p) 8%, var(--theme-bg, #fff)); color: inherit; }
.mp-alert > span { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; color: var(--mp-muted); font-size: 0.88rem; }
.mp-alert b { color: var(--theme-text, #1c1917); font-size: 0.95rem; }
.mp-alert > svg:first-child { flex: none; color: var(--mp-p); }
.mp-alert.is-soft { border-color: var(--mp-line); background: var(--mp-soft); }
.mp-alert.is-soft > svg:first-child { color: var(--mp-muted); }
.mp-alert.is-bad { border-color: color-mix(in srgb, #dc2626 35%, var(--mp-line)); background: color-mix(in srgb, #dc2626 6%, var(--theme-bg, #fff)); }
.mp-alert.is-bad > svg:first-child { color: #b91c1c; }
.mp-st.is-to_ship { background: color-mix(in srgb, var(--mp-p) 12%, transparent); color: var(--mp-p); }
.mp-st.is-shipped { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: #0369a1; }

.mp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mp-filters > a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--mp-line); border-radius: 99px; font-size: 0.85rem; }
.mp-filters > a span { color: var(--mp-muted); font-size: 0.78rem; }
.mp-filters > a[aria-current] { border-color: var(--mp-p); background: color-mix(in srgb, var(--mp-p) 10%, var(--theme-bg, #fff)); font-weight: 600; }
.mp-find { position: relative; flex: 1 1 12rem; max-width: 18rem; margin-inline-start: auto; }
.mp-find input { width: 100%; height: 2.4rem; padding: 0 2.4rem 0 0.9rem; border: 1px solid var(--mp-line); border-radius: 99px; background: var(--theme-bg, #fff); font: inherit; font-size: 0.88rem; }
[dir='rtl'] .mp-find input { padding: 0 0.9rem 0 2.4rem; }
.mp-find svg { position: absolute; inset-inline-end: 0.85rem; top: 50%; translate: 0 -50%; color: var(--mp-muted); pointer-events: none; }
.mp-empty-box { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 3rem 1rem; border: 1px dashed var(--mp-line); border-radius: var(--mp-r); color: var(--mp-muted); text-align: center; }
.mp-empty-box p { max-width: 42ch; margin: 0; }

.mp-plist { display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid var(--mp-line); border-radius: var(--mp-r); list-style: none; }
.mp-plist li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 0.85rem 1rem; border-top: 1px solid var(--mp-line); }
.mp-plist li:first-child { border-top: 0; }
.mp-plist-pic { flex: none; width: 3.75rem; height: 3.75rem; overflow: hidden; border-radius: var(--theme-r-sm, 8px); background: var(--theme-img-bg, #f5f5f4); }
.mp-plist-pic img { width: 100%; height: 100%; object-fit: cover; }
.mp-plist-main { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mp-plist-main b { overflow-wrap: anywhere; }
.mp-plist-main small { color: var(--mp-muted); font-size: 0.82rem; }
.mp-why { color: #b91c1c !important; }
.mp-switch { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none; color: var(--mp-muted); font: inherit; font-size: 0.84rem; cursor: pointer; }
.mp-switch i { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 99px; background: var(--mp-line); transition: background-color 0.2s; }
.mp-switch i::after { position: absolute; top: 0.15rem; inset-inline-start: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); content: ''; transition: inset-inline-start 0.2s; }
.mp-switch.is-on { color: var(--theme-text, #1c1917); }
.mp-switch.is-on i { background: var(--mp-p); }
.mp-switch.is-on i::after { inset-inline-start: 1.15rem; }

.mp-pform { display: flex; flex-direction: column; gap: 1.1rem; }
.mp-pform :is(.dm-h3, .mp-h3) { margin: 0 0 1rem; }
.mp-pform-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.mp-hint.is-bad { color: #dc2626; }
.mp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem; margin-bottom: 0.6rem; }
.mp-photo { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; border: 1px solid var(--mp-line); border-radius: var(--theme-r-sm, 8px); background: var(--theme-img-bg, #f5f5f4); }
.mp-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-photo figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 0.2rem; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.7rem; text-align: center; }
.mp-photo button { position: absolute; top: 0.3rem; inset-inline-end: 0.3rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.6); color: #fff; cursor: pointer; }
.mp-photo.is-new { border-style: dashed; border-color: var(--mp-p); }
.mp-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; aspect-ratio: 1; border: 1.5px dashed var(--mp-line); border-radius: var(--theme-r-sm, 8px); color: var(--mp-muted); font-size: 0.82rem; cursor: pointer; }
.mp-photo-add:hover, .mp-photo-add:focus-within { border-color: var(--mp-p); color: var(--mp-p); }
.mp-photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.mp-order { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.mp-order-side { display: flex; flex-direction: column; gap: 1.1rem; }
.mp-sum { display: flex; flex-direction: column; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--mp-line); }
.mp-sum div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; font-size: 0.9rem; }
.mp-sum dt { color: var(--mp-muted); }
.mp-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.mp-sum .is-total { margin-top: 0.35rem; padding-top: 0.55rem; border-top: 1px solid var(--mp-line); font-weight: 700; }
.mp-sum .is-total dt { color: inherit; }
.mp-ship { display: flex; flex-direction: column; gap: 0.85rem; }
.mp-shipped { display: flex; gap: 0.6rem; margin: 0 0 0.5rem; }
.mp-shipped svg { flex: none; color: #16a34a; }
.mp-shipped span { display: flex; flex-direction: column; color: var(--mp-muted); }
.mp-shipped b { color: var(--theme-text, #1c1917); }

.mp-brand { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.mp-brand label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; overflow: hidden; border: 1.5px dashed var(--mp-line); color: var(--mp-muted); text-align: center; cursor: pointer; }
.mp-brand label:hover, .mp-brand label:focus-within { border-color: var(--mp-p); }
.mp-brand input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mp-brand-logo { aspect-ratio: 1; border-radius: 50%; }
.mp-brand-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-brand-logo span { color: var(--mp-p); font: 700 1.5rem var(--theme-font-head, inherit); }
.mp-brand-logo em { position: absolute; bottom: 0.5rem; padding: 0.05rem 0.5rem; border-radius: 99px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.72rem; font-style: normal; }
.mp-brand-banner { min-height: 7rem; padding: 1rem; border-radius: var(--mp-r); background: var(--mp-soft) center / cover; }
.mp-brand-banner[style] { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.mp-brand-banner em { font-style: normal; font-weight: 600; }
.mp-brand-banner small { max-width: 30ch; font-size: 0.78rem; }
.mp-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.85rem 0 1rem; }
.mp-pay-bank, .mp-pay-upi { display: none; }
.mp-box:has(input[name='payout_method'][value='bank']:checked) .mp-pay-bank, .mp-box:has(input[name='payout_method'][value='upi']:checked) .mp-pay-upi { display: grid; }

@media (max-width: 64em) { .mp-order { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40em) {
    .mp-find { max-width: none; margin-inline-start: 0; }
    .mp-brand, .mp-pay { grid-template-columns: minmax(0, 1fr); }
    .mp-brand-logo { width: 7rem; }
}

/* Part 3: payouts, reports, returns */
.mp-tiles > a { color: inherit; transition: border-color 0.15s; }
.mp-tiles > a:hover { border-color: var(--mp-p); }
.mp-filters > button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--mp-line); border-radius: 99px; background: none; color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; }
.mp-filters > button[aria-pressed="true"] { border-color: var(--mp-p); background: color-mix(in srgb, var(--mp-p) 10%, var(--theme-bg, #fff)); font-weight: 600; }
.mp-period { display: flex; flex-direction: column; gap: 0.6rem; }
.mp-dates { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
.mp-dates :is(.dm-field, .mp-field) { flex: 0 1 11rem; margin: 0; }
.mp-period-is { margin: 0; font-size: 0.85rem; }
.mp-pay-grid, .mp-rep-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.mp-pay-grid :is(.dm-h3, .mp-h3), .mp-rep-grid :is(.dm-h3, .mp-h3) { margin-top: 0; }
.mp-pay-open { display: flex; align-items: center; gap: 0.9rem; margin: 0.25rem 0 0.75rem; }
.mp-pay-open > span:last-child { display: flex; flex-direction: column; gap: 0.1rem; }
.mp-pay-open b { font: 700 1.4rem/1.2 var(--theme-font-head, inherit); font-variant-numeric: tabular-nums; }
.mp-pay-open small { color: var(--mp-muted); font-size: 0.82rem; }
.mp-pay-ic { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--mp-p) 12%, var(--theme-bg, #fff)); color: var(--mp-p); }
.mp-pay-why { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.9rem; padding: 0.8rem 0.95rem; border-radius: var(--mp-r); background: var(--mp-soft); color: var(--mp-muted); font-size: 0.9rem; }
.mp-pay-why > svg { flex: none; margin-top: 0.1rem; }
.mp-pay-form { display: flex; flex-direction: column; gap: 0.75rem; }
.mp-pay-form :is(.dm-field, .mp-field) { margin: 0; }
.mp-pay-form p { margin: 0; font-size: 0.86rem; }
.mp-pay-form :is(.dm-btn, .mp-btn) { align-self: flex-start; }
.mp-pay-how ol { display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 0.75rem; padding-inline-start: 1.2rem; font-size: 0.9rem; }
.mp-pay-how p { margin: 0; font-size: 0.85rem; }
.mp-st.is-pay-requested { background: color-mix(in srgb, var(--mp-p) 12%, transparent); color: var(--mp-p); }
.mp-st.is-pay-paid { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; }
.mp-st.is-pay-declined { background: color-mix(in srgb, #dc2626 10%, transparent); color: #b91c1c; }
.mp-cell-sub { display: block; margin-top: 0.2rem; color: var(--mp-muted); font-size: 0.76rem; white-space: normal; }
.mp-legend { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--mp-muted); font-size: 0.8rem; }
.mp-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-inline-start: 0.5rem; border-radius: 3px; }
.mp-legend i.is-gross, .mp-bar .is-gross { background: color-mix(in srgb, var(--mp-p) 28%, var(--theme-bg, #fff)); }
.mp-legend i.is-earn, .mp-bar .is-earn { background: var(--mp-p); }
.mp-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(2px, 0.6vw, 8px); align-items: end; height: 13rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--mp-line); }
.mp-bar { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.mp-bar span { position: absolute; inset-inline: 0; bottom: 0; min-height: 0; border-radius: 4px 4px 0 0; }
.mp-bar span.is-earn { inset-inline: 22%; }
.mp-bar em { position: absolute; top: 100%; margin-top: 0.35rem; color: var(--mp-muted); font-size: 0.7rem; font-style: normal; white-space: nowrap; }
.mp-bar:hover span.is-gross { background: color-mix(in srgb, var(--mp-p) 42%, var(--theme-bg, #fff)); }
.mp-sum.is-flat { margin: 0; padding: 0; border: 0; }
.mp-sum .is-sub { margin-top: 0.3rem; padding-top: 0.45rem; border-top: 1px dashed var(--mp-line); }
.mp-sum .is-sub dt { color: inherit; }
.mp-sum .is-return dt { display: flex; flex-direction: column; color: #b91c1c; }
.mp-sum .is-return dt small { color: var(--mp-muted); font-size: 0.78rem; }
.mp-sum .is-return dd { color: #b91c1c; }
.mp-top { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.mp-top li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; overflow: hidden; border-radius: 8px; font-size: 0.9rem; }
.mp-top li > span { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.mp-top li > span b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mp-top li > span small { color: var(--mp-muted); font-size: 0.78rem; }
.mp-top li > b { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.mp-top li > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--mp-p) 8%, transparent); }
@media (max-width: 64em) { .mp-pay-grid, .mp-rep-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40em) { .mp-bars { height: 10rem; } .mp-bar em { font-size: 0.62rem; } }


/* ── The base kit: what the app's own pages need from a theme, drawn here so they work with any
   theme (wrap, headings, form fields, buttons, messages, the seller's side menu). ── */
.mp-page, .mp-trail, .mp-sell, .mp-sellers, .mp-seller, .mp-tools { --mp-p: var(--theme-primary, #ff6d00); --mp-line: var(--theme-line, #e7e5e4); --mp-muted: var(--theme-muted, #78716c); --mp-soft: var(--theme-soft, #fafaf9); --mp-r: var(--theme-r, 12px); --mp-rb: var(--theme-r-btn, 10px); }
.mp-wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); }
.mp-trail { padding-block: 2rem 1.25rem; border-bottom: 1px solid var(--mp-line); background: var(--mp-soft); }
.mp-trail-h { margin: 0 0 0.4rem; font: 700 clamp(1.4rem, 3vw, 2rem)/1.2 var(--theme-font-head, inherit); }
.mp-trail ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; color: var(--mp-muted); font-size: 0.88rem; list-style: none; }
.mp-trail li + li::before { content: '/'; margin-inline-end: 0.4rem; opacity: 0.6; }
.mp-trail a { color: inherit; text-decoration: none; }
.mp-trail a:hover { color: var(--mp-p); }
.mp-h3 { margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--mp-line); font: 600 1.05rem/1.3 var(--theme-font-head, inherit); }
.mp-kicker { display: inline-block; color: var(--mp-p); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mp-muted { color: var(--mp-muted); }
.mp-warn { color: #b45309; font-size: 0.85rem; }
.mp-link { display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; font-weight: 600; text-decoration: none; }
.mp-link:hover { color: var(--mp-p); }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.25rem; border: 1.5px solid var(--theme-text, #1c1917); border-radius: var(--mp-rb); background: var(--theme-text, #1c1917); color: var(--theme-bg, #fff); font: inherit; font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.mp-btn:hover { border-color: var(--mp-p); background: var(--mp-p); color: var(--theme-on-primary, #000); }
.mp-btn.is-ghost { border-color: var(--mp-line); background: transparent; color: var(--theme-text, #1c1917); }
.mp-btn.is-sm { height: 2.3rem; padding: 0 0.95rem; font-size: 0.84rem; }
.mp-btn.is-block { width: 100%; }
.mp-btn.is-danger { border-color: #dc2626; background: #dc2626; color: #fff; }
.mp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mp-fields > .is-full, .mp-field.is-full { grid-column: 1 / -1; }
.mp-field { position: relative; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; }
.mp-field em { color: var(--mp-muted); font-style: normal; font-weight: 400; }
.mp-field input, .mp-field select, .mp-field textarea { width: 100%; min-height: 2.9rem; padding: 0.6rem 0.85rem; border: 1px solid var(--mp-line); border-radius: var(--mp-rb); background: var(--theme-bg, #fff); color: inherit; font: inherit; font-weight: 400; font-size: 0.95rem; }
.mp-field input:focus, .mp-field select:focus, .mp-field textarea:focus { outline: 0; border-color: var(--mp-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-p) 18%, transparent); }
.mp-field.is-bad input, .mp-field.is-bad select { border-color: #dc2626; }
.mp-field small { color: #dc2626; font-weight: 500; }
.mp-select select { appearance: none; padding-inline-end: 2.2rem; cursor: pointer; }
.mp-select > svg { position: absolute; inset-inline-end: 0.85rem; top: 2.45rem; pointer-events: none; }
.mp-check { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.9rem; cursor: pointer; }
.mp-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mp-p); }
.mp-choice { position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border: 1.5px solid var(--mp-line); border-radius: var(--mp-r); cursor: pointer; }
.mp-choice:has(input:checked) { border-color: var(--mp-p); background: color-mix(in srgb, var(--mp-p) 7%, transparent); }
.mp-choice input { position: absolute; opacity: 0; }
.mp-radio { flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%; }
.mp-choice input:checked + .mp-radio { border: 5px solid var(--mp-p); }
.mp-choice > span:not(.mp-radio) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mp-choice small { color: var(--mp-muted); font-size: 0.8rem; }
.mp-flash { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: var(--mp-r); background: color-mix(in srgb, #16a34a 10%, var(--theme-bg, #fff)); color: color-mix(in srgb, #16a34a 70%, var(--theme-text, #1c1917)); font-size: 0.92rem; }
.mp-flash.is-bad { background: color-mix(in srgb, #dc2626 9%, var(--theme-bg, #fff)); color: color-mix(in srgb, #dc2626 75%, var(--theme-text, #1c1917)); }
.mp-flash svg { flex: none; margin-top: 0.15rem; }
.mp-addr { margin-bottom: 1rem; line-height: 1.7; }
.mp-co-lines { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.mp-co-lines li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; }
.mp-co-name { flex: 1; min-width: 0; }
.mp-co-name small, .mp-line-opt { color: var(--mp-muted); font-size: 0.8rem; }
.mp-line-opt { display: block; }
.mp-acc { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 2.5rem 0; }
.mp-acc-side { position: sticky; top: 6rem; border: 1px solid var(--mp-line); border-radius: var(--mp-r); background: var(--theme-bg, #fff); }
.mp-acc-me { display: flex; align-items: center; gap: 0.85rem; padding: 1.4rem 1.25rem; border-bottom: 1px solid var(--mp-line); }
.mp-acc-av { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--mp-p); color: var(--theme-on-primary, #000); font-weight: 600; }
.mp-acc-me > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mp-acc-me small { color: var(--mp-muted); font-size: 0.8rem; }
.mp-acc-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem; }
.mp-acc-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: calc(var(--mp-r) * 0.7); color: inherit; font-size: 0.92rem; text-decoration: none; }
.mp-acc-nav a:hover { background: var(--mp-soft); }
.mp-acc-nav a[aria-current] { background: color-mix(in srgb, var(--mp-p) 10%, transparent); color: var(--mp-p); font-weight: 500; }
.mp-acc-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.mp-acc-title { margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--mp-line); font: 600 1.35rem/1.2 var(--theme-font-head, inherit); }
.mp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1.25rem; }
.mp-pcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mp-line); border-radius: var(--mp-r); background: var(--theme-bg, #fff); }
.mp-pcard-pic { display: grid; place-items: center; aspect-ratio: 1; background: var(--theme-img-bg, var(--mp-soft)); color: var(--mp-muted); }
.mp-pcard-pic img { width: 100%; height: 100%; object-fit: cover; }
.mp-pcard-body { padding: 0.75rem 1rem 1rem; }
.mp-pcard-body h3 { margin: 0 0 0.3rem; font-size: 0.92rem; }
.mp-pcard-body a { color: inherit; text-decoration: none; }
.mp-pcard-body p { display: flex; gap: 0.5rem; margin: 0; }
.mp-pcard-body s { color: var(--mp-muted); }
@media (max-width: 48em) {
    .mp-fields, .mp-acc { grid-template-columns: minmax(0, 1fr); }
    .mp-acc-side { position: static; }
}