/* =========================================================
   Mawlid Wear — creator marketplace
   Uses the theme's brand variables (see style.css :root)
   ========================================================= */

/* ---------- T-shirt mockup ---------- */
.mw-tee { --tee: #0B5D3B; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--mw-cream); }
.mw-tee svg { width: 88%; height: auto; max-height: 100%; display: block; }
.mw-tee__body { fill: var(--tee); stroke: rgba(0,0,0,.16); stroke-width: 1.5; stroke-linejoin: round; transition: fill .25s ease; }
.mw-tee__shade { fill: rgba(0,0,0,.07); }
.mw-tee__collar { fill: none; stroke: rgba(0,0,0,.22); stroke-width: 2; stroke-linecap: round; }
.mw-product-card__image.is-tee { background: var(--mw-cream); }
.mw-product-gallery__main--tee { background: var(--mw-cream); }
.mw-product-gallery__main--tee .mwc-flat { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.mw-product-gallery__main.is-art .mw-tee { display: none; }
.mwc-viewtoggle { display: flex; gap: 8px; margin-bottom: 12px; }
.mwc-viewtoggle button { border: 1px solid #ccc; background: #fff; padding: 8px 14px; font: inherit; font-size: .85rem; cursor: pointer; }
.mwc-viewtoggle button.is-active { border-color: var(--mw-primary); background: var(--mw-primary); color: #fff; }
.mwc-credit { margin: -6px 0 14px; color: #666; font-size: .92rem; }
.mwc-credit a, .mwc-link { color: var(--mw-primary); text-underline-offset: 3px; }
.mwc-card-credit { margin: 2px 0 6px; font-size: .8rem; color: #777; }
.mwc-ondemand { margin: 14px 0 0; font-size: .85rem; color: #555; }

/* ---------- Shared bits ---------- */
.mwc-narrow { max-width: 640px; }
.mwc-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.mwc-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--mw-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mwc-h2 { margin: 0 0 18px; font-size: 1.5rem; }
.mwc-card { background: #fff; border: 1px solid var(--mw-sage); padding: 26px; margin-bottom: 22px; }
.mwc-card h3 { margin: 0 0 14px; font-size: 1.1rem; }
.mwc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mwc-card__head h3 { margin: 0; }
.mwc-btn-sm { padding: 10px 18px; font-size: .85rem; }
.mwc-empty { color: #666; margin: 0; }
.mwc-fine { font-size: .82rem; color: #666; margin: 14px 0 0; }
.mwc-cta { text-align: center; margin-top: 36px; }
.mwc-hero__lead { max-width: 620px; font-size: 1.08rem; line-height: 1.6; color: #444; margin: 14px 0 0; }
.mwc-hero__cta { margin-top: 24px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.mwc-pill { display: inline-block; padding: 3px 10px; font-size: .75rem; font-weight: 600; border-radius: 99px; background: #eee; color: #444; white-space: nowrap; }
.mwc-pill.is-ok { background: #dff1e7; color: #0B5D3B; }
.mwc-pill.is-wait { background: #fdf0d5; color: #8a5a06; }
.mwc-pill.is-bad { background: #fbe0e0; color: #a21d1d; }
.mwc-pill.is-paid { background: #e6e6ea; color: #3c3c4a; }
.mwc-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #b91c1c; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; font-weight: 700; }
.mwc-headlink { font-size: .85rem; font-weight: 600; color: inherit; text-decoration: none; margin-right: 18px; white-space: nowrap; }
.mwc-headlink:hover { color: var(--mw-primary); }
.mwc-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.mwc-notice { padding: 14px 18px; margin-bottom: 20px; border-left: 4px solid var(--mw-primary); background: #fff; font-size: .92rem; line-height: 1.55; }
.mwc-notice.is-wait { border-color: #d89a1c; background: #fdf6e6; }
.mwc-notice.is-bad { border-color: #b91c1c; background: #fdecec; }

/* ---------- Forms ---------- */
.mwc-form .mw-field { margin-bottom: 16px; }
.mwc-form .mw-field textarea, .mwc-form .mw-field select { width: 100%; padding: 12px 14px; border: 1px solid #ccc; font-size: .92rem; font-family: inherit; background: #fff; }
.mwc-form .mw-field input[type=file] { width: 100%; padding: 10px; border: 1px dashed #aaa; background: #fafafa; }
.mwc-form .mw-field textarea:focus, .mwc-form .mw-field select:focus { outline: none; border-color: var(--mw-primary); }
.mwc-form input:focus-visible, .mwc-form textarea:focus-visible, .mwc-form select:focus-visible, .mwc-form button:focus-visible, .mwc-nav a:focus-visible { outline: 2px solid var(--mw-primary); outline-offset: 2px; }
.mwc-form .mw-field-hint { margin-top: 6px; }
.mwc-choice { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mwc-choice legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #555; margin-bottom: 8px; padding: 0; width: 100%; }
.mwc-choice label, .mwc-check { font-size: .92rem; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.mwc-check { margin: 4px 0 18px; line-height: 1.5; }
.mwc-check input { margin-top: 4px; }
.mwc-inline { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 10px; }
.mwc-inline .mwc-check { margin: 0; }
.mwc-colors { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mwc-colors legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #555; margin-bottom: 8px; padding: 0; width: 100%; }
.mwc-colors__opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #ccc; cursor: pointer; font-size: .88rem; background: #fff; }
.mwc-colors__opt:has(input:checked) { border-color: var(--mw-primary); box-shadow: inset 0 0 0 1px var(--mw-primary); }
.mwc-colors__dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.mwc-progress { height: 6px; background: var(--mw-sage); margin-top: 14px; }
.mwc-progress span { display: block; height: 100%; width: 0; background: var(--mw-primary); transition: width .2s; }
.mwc-method[hidden] { display: none; }
.mwc-saved { background: var(--mw-cream); padding: 12px 14px; margin: 0 0 18px; font-size: .92rem; }

/* ---------- Become a creator / terms ---------- */
.mwc-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mwc-split--forms { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.mwc-split--forms .mwc-card { margin: 0; }
.mwc-steps { margin: 0; padding-left: 22px; display: grid; gap: 16px; line-height: 1.6; }
.mwc-keyterms dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; font-size: .92rem; }
.mwc-keyterms dt { font-weight: 600; color: #555; }
.mwc-keyterms dd { margin: 0; }
.mwc-terms { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.mwc-terms .mwc-keyterms { position: sticky; top: 110px; }
.mwc-terms__body { max-width: 720px; line-height: 1.7; }
.mwc-terms__body h2 { font-size: 1.2rem; margin: 32px 0 8px; }
.mwc-terms__body ul { padding-left: 20px; }

/* ---------- Dashboard ---------- */
.mwc-top { background: var(--mw-cream); border-bottom: 1px solid var(--mw-sage); padding: 28px 0; }
.mwc-top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mwc-top__id { display: flex; align-items: center; gap: 16px; }
.mwc-top__id h1 { margin: 0 0 4px; font-size: 1.5rem; }
.mwc-top__id p { margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mwc-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mwc-avatar--blank { background: var(--mw-primary); color: #fff; font-weight: 700; font-size: 1.2rem; }
.mwc-avatar--lg { width: 84px; height: 84px; }
.mwc-avatar--xl { width: 112px; height: 112px; font-size: 2.2rem; }
.mwc-section { padding-top: 36px; }
.mwc-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.mwc-nav { display: flex; flex-direction: column; position: sticky; top: 110px; border: 1px solid var(--mw-sage); background: #fff; }
.mwc-nav a { padding: 13px 18px; text-decoration: none; color: var(--mw-charcoal); font-size: .92rem; border-left: 3px solid transparent; border-bottom: 1px solid var(--mw-sage); display: flex; align-items: center; justify-content: space-between; }
.mwc-nav a:hover { background: var(--mw-cream); }
.mwc-nav a.is-active { border-left-color: var(--mw-primary); background: var(--mw-cream); font-weight: 600; color: var(--mw-primary); }
.mwc-nav .mwc-nav__minor { font-size: .82rem; color: #666; border-bottom: 0; }
.mwc-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.mwc-stats--3 { grid-template-columns: 1.3fr 1fr 1fr; }
.mwc-stat { background: #fff; border: 1px solid var(--mw-sage); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.mwc-stat strong { font-size: 1.5rem; line-height: 1.2; }
.mwc-stat__label { font-size: .78rem; color: #666; }
.mwc-stat small { font-size: .74rem; color: #888; }
.mwc-stat--lead { background: var(--mw-primary); border-color: var(--mw-primary); color: #fff; }
.mwc-stat--lead .mwc-stat__label { color: rgba(255,255,255,.8); }
.mwc-payoutcta { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.mwc-payoutcta h3 { margin-bottom: 6px; }
.mwc-payoutcta p { margin: 0; line-height: 1.55; }
.mwc-todo { margin: 0; padding-left: 20px; line-height: 1.9; }
.mwc-chart { height: 130px; }
.mwc-chart svg { width: 100%; height: 100%; display: block; }
.mwc-chart rect { fill: var(--mw-sage); }
.mwc-chart rect.has { fill: var(--mw-primary); }
.mwc-tablewrap { overflow-x: auto; }
.mwc-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mwc-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #666; padding: 10px 12px; border-bottom: 2px solid var(--mw-sage); white-space: nowrap; }
.mwc-table td { padding: 12px; border-bottom: 1px solid var(--mw-sage); vertical-align: top; }
.mwc-table small { color: #777; }
.mwc-pager { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 18px 0 0; font-size: .88rem; }
.mwc-notes { list-style: none; margin: 0; padding: 0; }
.mwc-notes li { padding: 16px 0; border-bottom: 1px solid var(--mw-sage); }
.mwc-notes li.is-new { background: #f4faf6; margin: 0 -26px; padding: 16px 26px; border-left: 3px solid var(--mw-primary); }
.mwc-notes__head { display: flex; justify-content: space-between; gap: 12px; }
.mwc-notes__head time { color: #888; font-size: .8rem; white-space: nowrap; }
.mwc-notes p { margin: 6px 0 4px; line-height: 1.55; font-size: .92rem; }
.mwc-guidelines ul { margin: 0; padding-left: 20px; line-height: 1.7; }

/* design list + form */
.mwc-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.mwc-design { border: 1px solid var(--mw-sage); background: #fff; display: flex; flex-direction: column; }
.mwc-design__img { aspect-ratio: 1 / 1; background: var(--mw-cream); overflow: hidden; }
.mwc-design__body { padding: 14px 16px 16px; }
.mwc-design__body h4 { margin: 0 0 6px; font-size: 1rem; }
.mwc-design__body p { margin: 0 0 6px; font-size: .88rem; }
.mwc-design__meta { color: #666; }
.mwc-design__reason { background: #fdecec; padding: 8px 10px; color: #8d1a1a; font-size: .84rem; }
.mwc-design__actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .88rem; }
.mwc-designform__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.mwc-designform__preview { position: sticky; top: 110px; }
.mwc-preview { aspect-ratio: 1 / 1; border: 1px solid var(--mw-sage); }
.mwc-preview__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #555; margin: 0 0 8px; }

/* public pages */
.mwc-creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.mwc-creator { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px; border: 1px solid var(--mw-sage); background: #fff; text-decoration: none; color: inherit; transition: border-color .2s; }
.mwc-creator:hover { border-color: var(--mw-primary); }
.mwc-creator span:last-child { font-size: .82rem; color: #666; }
.mwc-store-head { background: var(--mw-cream); padding: 48px 0; border-bottom: 1px solid var(--mw-sage); }
.mwc-store-head__row { display: flex; gap: 28px; align-items: center; }
.mwc-store-head h1 { margin: 0 0 8px; }
.mwc-store-head__bio { max-width: 620px; line-height: 1.6; margin: 0 0 8px; }
.mwc-band { background: var(--mw-primary); color: #fff; padding: 48px 0; }
.mwc-band__row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.mwc-band h2 { margin: 0 0 8px; font-size: 1.6rem; }
.mwc-band p { margin: 0; max-width: 560px; line-height: 1.6; opacity: .92; }
.mwc-band__btn { background: #fff; color: var(--mw-primary); border-color: #fff; }
.mwc-band__btn:hover { background: var(--mw-cream); }

@media (max-width: 900px) {
	.mwc-split, .mwc-split--forms, .mwc-terms, .mwc-designform__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mwc-terms .mwc-keyterms, .mwc-designform__preview { position: static; }
	.mwc-shell { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.mwc-nav { position: static; flex-direction: row; overflow-x: auto; }
	.mwc-nav a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
	.mwc-nav a.is-active { border-bottom-color: var(--mw-primary); }
	.mwc-stats, .mwc-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mwc-stats--3 .mwc-stat--lead { grid-column: 1 / -1; }
	.mwc-payoutcta { flex-direction: column; align-items: flex-start; }
	.mwc-store-head__row { flex-direction: column; text-align: center; }
	.mwc-headlink { margin-right: 10px; font-size: .78rem; }
}
@media (max-width: 520px) {
	.mwc-card { padding: 18px; }
	.mwc-notes li.is-new { margin: 0 -18px; padding: 16px 18px; }
	.mwc-keyterms dl { grid-template-columns: 1fr; gap: 2px; }
	.mwc-keyterms dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .mw-tee__body, .mwc-progress span { transition: none; } }

.mwc-cutoff { background: #fdf6e6; border-left: 4px solid #d89a1c; padding: 10px 14px; margin: 0 0 16px; font-size: .9rem; }
.mwc-cutoff.is-closed { background: #fdecec; border-color: #b91c1c; }
.mwc-share { display: inline-block; font-size: .88rem; color: var(--mw-primary); text-underline-offset: 3px; }

/* buyer info, spotlight, share kit */
.mwc-buyinfo { margin: 12px 0 0; font-size: .9rem; }
.mwc-buyinfo p { margin: 0 0 8px; }
.mwc-buyinfo summary { cursor: pointer; font-weight: 600; color: var(--mw-primary); }
.mwc-buyinfo details > div { padding: 10px 0; line-height: 1.6; overflow-x: auto; }
.mwc-spotlight { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.mwc-spotlight__id h2 { margin: 10px 0; }
.mwc-spotlight__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mwc-sharebox { display: grid; gap: 10px; }
.mwc-sharebox textarea { width: 100%; padding: 12px; border: 1px solid #ccc; font: inherit; font-size: .9rem; background: #fafafa; }
.mwc-sharebox__btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mwc-btn-outline { border: 1px solid var(--mw-primary); background: #fff; color: var(--mw-primary); padding: 9px 16px; font: inherit; font-size: .85rem; cursor: pointer; }
.mwc-btn-outline:hover { background: var(--mw-primary); color: #fff; }
.mwc-copied { font-size: .82rem; color: var(--mw-primary); }
@media (max-width: 900px) { .mwc-spotlight { grid-template-columns: minmax(0, 1fr); gap: 24px; } .mwc-spotlight__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Who prints and ships: design form + dashboard */
.mwc-fulfil { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-bottom: 20px; }
.mwc-fulfil label { align-items: flex-start; }
.mwc-fulfil input[type=radio] { margin-top: 4px; }
#to-ship .mwc-form { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
#to-ship .mwc-form input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid #ccc; font: inherit; font-size: .85rem; }
.mwc-notice.is-wait { background: #fff7e6; border-left: 4px solid #b45309; padding: 12px 16px; margin: 0 0 16px; }