/* Merch: the studio in the portals, the cards on public pages, the product page.
   Studio pieces sit on the portal stylesheet (pp-*); public pieces on detail.css
   (dp-*), in the section marked public below. Everything here is prefixed mc-.
   docs/merch.md */

/* --- studio --------------------------------------------------------------- */

.mc-studio {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .mc-studio { grid-template-columns: 1fr; }
    .mc-stage { order: -1; }
}
.mc-rail .pp-fieldset-title { margin-top: 18px; }
.mc-rail .pp-fieldset-title:first-child { margin-top: 0; }
.mc-form .pp-label { display: block; margin: 10px 0 4px; font-size: .9rem; }
.mc-form .pp-help { font-size: .82rem; opacity: .75; margin: 4px 0 0; }
.mc-form .pp-help.is-warn { color: #ff8a65; opacity: 1; }

.mc-items { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-item { position: relative; }
.mc-item input { position: absolute; opacity: 0; inset: 0; }
.mc-item span {
    display: inline-block; padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18); cursor: pointer; font-size: .9rem;
}
.mc-item input:checked + span { background: #fff; color: #111; border-color: #fff; }
.mc-item input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.mc-colours, .mc-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mc-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: .85rem; cursor: pointer;
}
.mc-chip.is-preview { box-shadow: 0 0 0 2px var(--mc-red); }
.mc-chip-dot {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
    background: var(--chip, #333); padding: 0; cursor: pointer;
}
.mc-chip--size span { min-width: 2.2em; text-align: center; }

.mc-add-row { display: flex; gap: 8px; }
.mc-add-row .mc-input { flex: 1; width: auto; min-width: 0; }
.mc-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: .9rem; cursor: pointer; }
.mc-check input { margin-top: 1px; }
.mc-rights { padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; margin-top: 14px; }

.mc-layers { margin-top: 12px; display: grid; gap: 6px; }
.mc-layer {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit;
}
.mc-layer.is-on { border-color: #fff; background: rgba(255,255,255,.08); }
.mc-layer canvas { border-radius: 4px; flex: none; }
.mc-controls { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.mc-controls .pp-label { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; margin: 6px 0; }
.mc-control-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.mc-price-row .mc-money { max-width: 160px; }
.mc-publish-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.mc-status { font-size: .9rem; opacity: .85; }
.mc-status.is-error { color: #ff8a65; opacity: 1; }

.mc-stage { position: sticky; top: 12px; }
.mc-stage-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-bottom: 8px; }
.mc-stage-title { font-weight: 600; }
.mc-stage canvas {
    display: block; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; height: auto;
    border-radius: 12px; background: #1f1f1f; touch-action: none; cursor: grab;
}
.mc-stage-note { margin-top: 8px; }

/* The creator's product list */
.mc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-row {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
    padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
}
.mc-row.is-off { opacity: .6; }
.mc-row-thumb img, .mc-row-nopic {
    width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #2a2a2a;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; opacity: .9;
}
.mc-row-main { display: grid; gap: 2px; min-width: 0; }
.mc-row-meta { font-size: .82rem; opacity: .75; }
.mc-warn { color: #ffb74d; }
.mc-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.mc-inline-form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
@media (max-width: 700px) {
    .mc-row { grid-template-columns: 56px 1fr; }
    .mc-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ===========================================================================
   The public pages: the shop (/merch/), an owner's merch (/merch/<owner>/),
   the product page, and the merch cards every band page, link page, EPK and
   profile includes (partials/_merch_products.html).

   Built on detail.css (.dp-crumbs, .dp-hero, .dp-head, .dp-chips, .dp-btn) so
   a fan arriving from a band page is looking at the same site. The cards are
   image-first like the homepage's gig cards (.hcard): no box, the mockup
   does the work. Everything here is prefixed mc-.
   =========================================================================== */

.mc-wrap {
    max-width: var(--dp-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--dp-gut, 1.5rem) 4rem;
}

/* --- shared bits ---------------------------------------------------------- */

.mc-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.mc-kicker { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin: 0 0 6px; }
.mc-kicker a { color: inherit; }
.mc-title { font-size: 2rem; line-height: 1.1; margin: 0 0 10px; }
.mc-desc { margin: 0 0 18px; opacity: .9; line-height: 1.5; }
.mc-seller { margin: 2rem 0 0; font-size: .8rem; color: var(--dp-muted, #8a8a8a); }
.mc-seller a { color: inherit; }
.mc-seller a:hover { color: #fff; }
.mc-gone { text-align: center; padding-top: 60px; }
.mc-flash { padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.08); margin: 0 0 12px; font-size: .9rem; }
.mc-flash.error { background: rgba(255,120,80,.18); }
.mc-flash.success { background: rgba(120,220,140,.18); }

/* A titled block, the hairline header from detail.css. */
.mc-section { margin: 2.5rem 0 0; }
.mc-section:first-child { margin-top: 0; }
.mc-section .dp-h small { display: inline; margin: 0 0 0 .5rem; font-size: .78rem; letter-spacing: .04em; text-transform: none; }

/* --- the header ------------------------------------------------------------ */

.mc-hero .dp-hero-inner { align-items: center; }
.mc-hero-text { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.mc-hero .dp-sub { max-width: 52ch; }

/* The newest mockups, tiled at a slight tilt: a shop window. Real pictures
   of what is on sale, never stock. */
.mc-mosaic {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 120px);
    gap: .75rem;
    margin-right: 1.5rem;
}
.mc-mosaic img {
    width: 120px; height: 120px; object-fit: cover; display: block;
    border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    background: #161616;
}
.mc-mosaic img:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.mc-mosaic img:nth-child(2) { transform: rotate(3deg) translateY(-8px); }
.mc-mosaic img:nth-child(3) { transform: rotate(2deg) translateY(2px); }
.mc-mosaic img:nth-child(4) { transform: rotate(-3deg) translateY(-12px); }
.mc-mosaic:has(img:only-child) { grid-template-columns: 180px; }
.mc-mosaic:has(img:only-child) img { width: 180px; height: 180px; transform: rotate(-3deg); }
@media (max-width: 900px) {
    .mc-mosaic { grid-template-columns: repeat(4, 72px); gap: .5rem; margin: 0; order: -1; }
    .mc-mosaic img { width: 72px; height: 72px; border-radius: 8px; }
    .mc-mosaic:has(img:only-child) { grid-template-columns: 96px; }
    .mc-mosaic:has(img:only-child) img { width: 96px; height: 96px; }
}

/* The facts under the title: designs, who is selling, how it ships. */
.mc-hero-facts {
    list-style: none; margin: 1.1rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .45rem 1.4rem;
    font-size: .82rem; color: var(--dp-text, #d8d8d8);
}
.mc-hero-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.mc-hero-facts i { color: var(--dp-red-soft, #ff4444); font-size: .8rem; }
.mc-hero-facts strong { color: #fff; font-weight: 700; }

/* The owner page's header: the band's picture, round, like the artist page. */
.mc-hero-avatar {
    flex: 0 0 auto;
    width: clamp(72px, 10vw, 112px); height: clamp(72px, 10vw, 112px);
    border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255,255,255,.18); background: var(--dp-surface, #101010);
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 900; color: #fff;
}
.mc-hero-avatar { position: relative; }
.mc-hero-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- the filter bar -------------------------------------------------------- */

.mc-tools {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: 1.75rem 0 2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--dp-line, rgba(255,255,255,.1));
}
.mc-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.mc-chip-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .48rem 1rem; border-radius: 999px;
    border: 1px solid var(--dp-line, rgba(255,255,255,.1));
    background: var(--dp-surface, #101010);
    color: #e4e4e4; font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.mc-chip-link:hover { border-color: var(--dp-red, #f00); background: rgba(255,0,0,.1); color: #fff; }
.mc-chip-link.is-on { background: #fff; border-color: #fff; color: #111; }
.mc-chip-link small { font-size: .72rem; font-weight: 500; color: var(--dp-muted, #8a8a8a); font-variant-numeric: tabular-nums; }
.mc-chip-link.is-on small { color: #555; }

.mc-search { display: flex; align-items: center; gap: .5rem; flex: 0 1 360px; min-width: 240px; }
.mc-search-field {
    position: relative; flex: 1 1 auto;
}
.mc-search-field i {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    font-size: .8rem; color: var(--dp-muted, #8a8a8a); pointer-events: none;
}
.mc-search input {
    width: 100%; box-sizing: border-box;
    padding: .55rem .9rem .55rem 2.3rem;
    border-radius: 999px; border: 1px solid var(--dp-line, rgba(255,255,255,.1));
    background: var(--dp-surface, #101010); color: #fff; font: inherit; font-size: .88rem;
    transition: border-color .2s ease;
}
.mc-search input::placeholder { color: #6f6f6f; }
.mc-search input:focus { outline: none; border-color: rgba(255,255,255,.4); }
.mc-search .dp-btn { flex: none; }
@media (max-width: 700px) {
    .mc-tools { display: grid; }
    .mc-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 calc(-1 * var(--dp-gut, 1.5rem)); padding-left: var(--dp-gut, 1.5rem); padding-right: var(--dp-gut, 1.5rem); }
    .mc-chips::-webkit-scrollbar { display: none; }
    .mc-chip-link { white-space: nowrap; }
    .mc-search { flex-basis: auto; min-width: 0; }
}

/* --- the cards ------------------------------------------------------------- */

.mc-cards { margin: 2.5rem 0 0; }
.mc-cards:first-child { margin-top: 0; }
/* The hairline header, the same shape as detail.css's .dp-head, but carried
   here because the band page, the link page, the EPK and the profile include
   these cards without loading detail.css. Colours inherit: an EPK can be
   printed on light paper. */
.mc-cards-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.15rem; padding-bottom: .7rem; border-bottom: 1px solid var(--dp-line, rgba(255,255,255,.1));
}
.mc-cards-title { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; color: inherit; }
.mc-cards--compact .mc-cards-title { font-size: 1.1rem; }
.mc-cards-more {
    flex-shrink: 0; color: var(--dp-red, #f00); font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: opacity .2s ease;
}
.mc-cards-more:hover { opacity: .7; }
.mc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.6rem 1.1rem;
}
.mc-cards--compact .mc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem .9rem; }
.mc-card {
    display: flex; flex-direction: column; min-width: 0;
    color: inherit; text-decoration: none;
}
.mc-card-pic {
    position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 8px; background: #161616; border: 1px solid var(--dp-line-soft, rgba(255,255,255,.06));
}
.mc-card-pic img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.mc-card:hover .mc-card-pic img { transform: scale(1.05); }
.mc-card-nopic {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    font-size: 2rem; color: #3a3a3a;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px), #161616;
}
.mc-card-nopic--big { aspect-ratio: 1 / 1; font-size: 4rem; border-radius: 10px; }
.mc-flag {
    position: absolute; top: .6rem; left: .6rem; z-index: 1;
    padding: .22rem .5rem; border-radius: 3px;
    background: var(--dp-red, #f00); color: #fff;
    font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.mc-rank {
    position: absolute; left: .6rem; bottom: .6rem; z-index: 1;
    padding: .28rem .55rem; border-radius: 3px;
    background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
    color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.mc-rank em { font-style: normal; color: var(--dp-red-soft, #ff4444); margin-right: .25rem; }
.mc-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .1rem 0; min-width: 0; }
.mc-card-by {
    margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--dp-red-soft, #ff4444); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-card-name {
    font-size: .98rem; font-weight: 700; line-height: 1.3; color: inherit;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s ease;
}
.mc-card:hover .mc-card-name { color: var(--dp-red-soft, #ff4444); }
.mc-card-meta { font-size: .8rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.mc-card-price { font-weight: 800; font-size: .95rem; color: inherit; font-variant-numeric: tabular-nums; }
/* On the merch pages themselves the names and prices go full white. */
.mc-wrap .mc-card-name, .mc-wrap .mc-card-price, .mc-wrap .mc-cards-title { color: #fff; }
.mc-wrap .mc-card:hover .mc-card-name { color: var(--dp-red-soft, #ff4444); }
.mc-dots { display: inline-flex; gap: 4px; }
.mc-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--dot, #333); border: 1px solid rgba(255,255,255,.35); box-sizing: border-box;
}
.mc-cards-note { margin: 1rem 0 0; font-size: .8rem; color: var(--dp-muted, #8a8a8a); }
.mc-cards-all { color: inherit; font-weight: 700; text-decoration: none; }
.mc-cards-all:hover { color: var(--dp-red-soft, #ff4444); }

/* The best sellers, as a rail you can scroll sideways. */
.mc-rail {
    display: flex; gap: 1.1rem; overflow-x: auto; padding-bottom: .75rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mc-rail::-webkit-scrollbar { display: none; }
.mc-rail .mc-card { flex: 0 0 200px; scroll-snap-align: start; }
@media (max-width: 600px) {
    .mc-rail .mc-card { flex-basis: 160px; }
    .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem .8rem; }
    .mc-cards--compact .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mc-pages { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.mc-pages-note { font-size: .8rem; color: #777; }
.mc-empty { margin: 0; color: #9a9a9a; font-size: .95rem; }
.mc-empty a { color: var(--dp-red-soft, #ff4444); text-decoration: none; }
.mc-empty a:hover { text-decoration: underline; }

/* --- how it works ------------------------------------------------------------ */

.mc-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.mc-how-step {
    display: flex; flex-direction: column; gap: .4rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--dp-line, rgba(255,255,255,.1)); border-radius: 8px;
    background: var(--dp-surface, #101010);
}
.mc-how-step i { font-size: 1.1rem; color: var(--dp-red-soft, #ff4444); margin-bottom: .25rem; }
.mc-how-step strong { font-size: .95rem; color: #fff; }
.mc-how-step span { font-size: .84rem; line-height: 1.55; color: var(--dp-muted, #8a8a8a); }

/* --- the product page ---------------------------------------------------------- */

.mc-product { padding-top: 1.25rem; }
.mc-product-grid {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.mc-gallery { position: sticky; top: 76px; }
.mc-gallery-main {
    position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1;
    background: #161616; border: 1px solid var(--dp-line-soft, rgba(255,255,255,.06));
}
.mc-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-gallery-main .mc-flag { top: .9rem; left: .9rem; }
.mc-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; }
.mc-thumb {
    position: relative; width: 68px; height: 68px; padding: 0; overflow: hidden;
    border-radius: 8px; border: 2px solid transparent; background: #161616;
    cursor: pointer; transition: border-color .15s ease, opacity .15s ease; opacity: .7;
}
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-thumb:hover { opacity: 1; }
.mc-thumb.is-on { border-color: #fff; opacity: 1; }
.mc-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mc-thumb-dot {
    position: absolute; right: 5px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--swatch, #333); border: 1px solid rgba(255,255,255,.5); box-sizing: border-box;
}

.mc-buy { min-width: 0; }
.mc-buy .dp-eyebrow { margin-bottom: .5rem; }
.mc-buy .dp-eyebrow a { color: inherit; text-decoration: none; }
.mc-buy .dp-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mc-name {
    margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; color: #fff;
}
.mc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; font-size: 1.6rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.mc-price small { font-size: .82rem; font-weight: 500; color: var(--dp-muted, #8a8a8a); }
.mc-blurb { margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--dp-text, #d8d8d8); max-width: 52ch; }

.mc-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--dp-line, rgba(255,255,255,.1)); }
.mc-opt { display: grid; gap: .55rem; }
.mc-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.mc-opt-label { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--dp-muted, #8a8a8a); }
.mc-opt-value { font-size: .84rem; font-weight: 600; color: #fff; }
.mc-opt-note { font-size: .78rem; color: var(--dp-muted, #8a8a8a); }

/* Colour: round swatches on radios, so the form works without script. */
.mc-swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; }
.mc-swatch { position: relative; display: inline-block; width: 34px; height: 34px; cursor: pointer; }
.mc-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mc-swatch span {
    position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
    background: var(--swatch, #333); border: 2px solid rgba(255,255,255,.3);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.mc-swatch:hover span { border-color: rgba(255,255,255,.7); }
.mc-swatch input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.mc-swatch input:focus-visible + span { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--dp-red, #f00); }

/* Size: pills on radios. The script swaps the set when the colour changes. */
.mc-sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.mc-size { position: relative; display: inline-block; cursor: pointer; }
.mc-size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mc-size span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.9rem; padding: .5rem .8rem; box-sizing: border-box; border-radius: 6px;
    border: 1px solid var(--dp-line, rgba(255,255,255,.1)); background: var(--dp-surface, #101010);
    color: #e4e4e4; font-size: .84rem; font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mc-size:hover span { border-color: rgba(255,255,255,.45); }
.mc-size input:checked + span { background: #fff; border-color: #fff; color: #111; }
.mc-size input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.mc-size--none { font-size: .84rem; color: var(--dp-muted, #8a8a8a); }

/* Quantity: a stepper around a number field. */
.mc-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--dp-line, rgba(255,255,255,.1)); border-radius: 6px; overflow: hidden; background: var(--dp-surface, #101010); }
.mc-qty button {
    width: 2.4rem; border: 0; background: transparent; color: #fff; font: inherit; font-size: 1rem; cursor: pointer;
    transition: background .15s ease;
}
.mc-qty button:hover { background: rgba(255,255,255,.08); }
.mc-qty button:disabled { color: #555; cursor: default; background: transparent; }
.mc-qty input {
    width: 3rem; text-align: center; border: 0; border-left: 1px solid var(--dp-line, rgba(255,255,255,.1)); border-right: 1px solid var(--dp-line, rgba(255,255,255,.1));
    background: transparent; color: #fff; font: inherit; font-weight: 700; -moz-appearance: textfield; appearance: textfield;
}
.mc-qty input::-webkit-outer-spin-button, .mc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-qty input:focus { outline: none; }

.mc-buy-btn { width: 100%; justify-content: center; padding: .95rem 1.2rem; font-size: 1rem; border-radius: 8px; }
.mc-buy-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.mc-buy-btn:disabled:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.mc-pay { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; margin: -.2rem 0 0; font-size: .8rem; color: var(--dp-muted, #8a8a8a); }
.mc-pay i { font-size: 1.35rem; color: #cfcfcf; }
.mc-pay-icons { display: inline-flex; gap: .45rem; }

.mc-facts {
    list-style: none; margin: 1.5rem 0 0; padding: .35rem 1.1rem;
    border: 1px solid var(--dp-line, rgba(255,255,255,.1)); border-radius: 8px; background: var(--dp-surface, #101010);
}
.mc-facts li {
    display: flex; align-items: flex-start; gap: .8rem; padding: .7rem 0;
    border-bottom: 1px solid var(--dp-line-soft, rgba(255,255,255,.06)); font-size: .86rem; line-height: 1.5; color: var(--dp-text, #d8d8d8);
}
.mc-facts li:last-child { border-bottom: 0; }
.mc-facts i { flex: none; width: 1.3rem; margin-top: .2rem; text-align: center; color: var(--dp-red-soft, #ff4444); font-size: .85rem; }
.mc-facts a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.mc-facts a:hover { text-decoration-color: var(--dp-red, #f00); }

/* Who made it. */
.mc-maker {
    display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; padding: 1.1rem 1.2rem;
    border: 1px solid rgba(255,0,0,.35); border-radius: 8px;
    background: linear-gradient(160deg, rgba(255,0,0,.08), transparent 60%), var(--dp-surface, #101010);
}
.mc-maker-pic {
    flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255,255,255,.18); background: #1a1a1a;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; color: #fff;
}
/* The picture sits over the initial (position: relative on the box), so a
   dead URL -- a Spotify image that has moved on -- leaves the letter showing
   once the img's onerror removes it. */
.mc-maker-pic { position: relative; }
.mc-maker-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-maker-body { min-width: 0; flex: 1 1 auto; }
.mc-maker-body .dp-card-title { margin-bottom: .3rem; }
.mc-maker-name { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.mc-maker-name a { color: #fff; text-decoration: none; }
.mc-maker-name a:hover { color: var(--dp-red-soft, #ff4444); }
.mc-maker-meta { margin: .25rem 0 0; font-size: .82rem; color: var(--dp-muted, #8a8a8a); line-height: 1.5; }
.mc-maker-meta a { color: var(--dp-text, #d8d8d8); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.mc-maker-meta a:hover { color: #fff; }
.mc-maker-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.mc-related { margin-top: 3.5rem; }
.mc-related .mc-cards { margin-top: 2.5rem; }
.mc-related .mc-cards:first-child { margin-top: 0; }

/* The bar that follows a phone down the page once the Buy button is gone. */
.mc-stickybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem var(--dp-gut, 1.5rem) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(10,10,10,.92); backdrop-filter: blur(8px);
    border-top: 1px solid var(--dp-line, rgba(255,255,255,.1));
    transform: translateY(110%); transition: transform .25s ease;
}
.mc-stickybar.is-on { transform: none; }
.mc-stickybar-price { display: grid; gap: .05rem; min-width: 0; }
.mc-stickybar-price strong { font-size: 1.1rem; color: #fff; }
.mc-stickybar-price span { font-size: .72rem; color: var(--dp-muted, #8a8a8a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-stickybar .dp-btn { flex: none; padding: .75rem 1.4rem; font-size: .92rem; border-radius: 8px; }

@media (max-width: 940px) {
    .mc-product-grid { grid-template-columns: minmax(0, 1fr); }
    .mc-gallery { position: static; }
    .mc-stickybar { display: flex; }
    .mc-product.has-stickybar { padding-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-card-pic img, .mc-thumb, .mc-stickybar, .mc-chip-link { transition: none; }
    .mc-card:hover .mc-card-pic img { transform: none; }
}

/* --- order page --------------------------------------------------------------- */

.mc-order { max-width: 860px; }
.mc-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 18px 0 24px; }
.mc-steps li {
    padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
    font-size: .85rem; opacity: .55;
}
.mc-steps li.is-done { opacity: 1; background: #fff; color: #111; border-color: #fff; }
.mc-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .mc-order-grid { grid-template-columns: 1fr; } }
.mc-order-card { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 16px 18px; }
.mc-order-card h2 { font-size: 1rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.mc-order-lines { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.mc-order-total { font-weight: 700; }
.mc-order-total small { font-weight: 400; opacity: .7; }
.mc-cancel { margin-top: 24px; }

/* --- getting paid (portal) ---------------------------------------------------- */

.mc-earn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.mc-earn-tile { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.05); display: grid; gap: 2px; }
.mc-earn-tile strong { font-size: 1.3rem; }
.mc-earn-tile span { font-size: .8rem; opacity: .7; }
.mc-payee-form { margin: 0 0 16px; }
.mc-payee-form .mc-input { max-width: 360px; }
.mc-payouts { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mc-payouts th, .mc-payouts td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mc-payouts th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }

/* --- a product's numbers (the owner's stats page) ------------------------------- */

.mc-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.mc-row-link { color: inherit; text-decoration: none; }
.mc-row-link:hover { text-decoration: underline; }
.mc-row-meta a { color: inherit; }
.pp-section-note a.is-on { font-weight: 700; text-decoration: underline; }
.mc-timeline {
    display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 14px 0 6px;
    padding: 0 0 2px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.mc-day { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; min-width: 0; }
.mc-bar { display: block; width: 50%; min-height: 1px; border-radius: 2px 2px 0 0; }
.mc-bar--views { background: rgba(255,255,255,.55); }
.mc-bar--clicks { background: #ff6a3d; }
.mc-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 6px; vertical-align: middle; }
.mc-key--views { background: rgba(255,255,255,.55); }
.mc-key--clicks { background: #ff6a3d; }
.mc-cards-all { color: inherit; font-weight: 600; }

/* --- the owner's nudge on their own pages --------------------------------------- */

.mc-nudge {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 20px 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.28);
}
.mc-nudge p { margin: 0; }
.mc-nudge small { display: block; opacity: .7; margin-top: 2px; }
.mc-help { display: block; font-size: .82rem; opacity: .7; line-height: 1.45; }
.mc-help a { color: inherit; }

/* --- legal pages ------------------------------------------------------------------- */

.mc-legal { max-width: 760px; line-height: 1.6; }
.mc-legal h1 { margin-bottom: 4px; }
.mc-legal h2 { font-size: 1.1rem; margin: 26px 0 8px; }

/* --- form controls -------------------------------------------------------------
   Every input, select, textarea, checkbox, slider and file picker on a merch
   page carries one of these classes, so the pages look the same whether the
   portal stylesheet is loaded (the studio) or not (the shop, the product
   page). Dark field, red focus ring, the auth and profile forms' look. */

:root {
    --mc-red: #ff0000;
    --mc-field: #0c0c0c;
    --mc-field-focus: #101010;
    --mc-line: rgba(255, 255, 255, 0.18);
    --mc-line-strong: rgba(255, 255, 255, 0.38);
    --mc-text: #f0f0f0;
    --mc-muted: #8a8a8a;
    --mc-radius: 8px;
    --mc-ring: 0 0 0 3px rgba(255, 0, 0, 0.22);
    --mc-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
    --mc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d8d8d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    --mc-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%238a8a8a' stroke-width='1.7'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%238a8a8a' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Inside the portal shell the controls take the portal's radius and field colour. */
.pp { --mc-radius: 4px; --mc-field: #0a0a0a; --mc-field-focus: #0d0d0d; }

.mc-input {
    display: block; width: 100%; min-height: 44px; margin: 0; padding: .6rem .9rem;
    background-color: var(--mc-field); border: 1px solid var(--mc-line); border-radius: var(--mc-radius);
    color: var(--mc-text); font: inherit; font-size: 1rem; line-height: 1.4;
    -webkit-appearance: none; appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mc-input::placeholder { color: #5c5c5c; }
.mc-input:hover:not(:focus):not(:disabled) { border-color: var(--mc-line-strong); }
.mc-input:focus { outline: none; border-color: var(--mc-red); background-color: var(--mc-field-focus); box-shadow: var(--mc-ring); }
.mc-input:disabled { opacity: .5; cursor: not-allowed; }
.mc-input[aria-invalid="true"], .mc-input.is-invalid { border-color: #ff6b6b; }
.mc-input:-webkit-autofill, .mc-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mc-text); -webkit-box-shadow: 0 0 0 1000px var(--mc-field) inset; transition: background-color 9999s;
}
.pp .mc-input { min-height: 38px; padding: .5rem .8rem; font-size: .92rem; }
.mc-input--sm { min-height: 32px; padding: .3rem .6rem; font-size: .88rem; }
.pp .mc-input--sm { min-height: 30px; padding: .25rem .55rem; font-size: .85rem; }
/* iOS zooms into any field smaller than 16px, so phones get the full size everywhere. */
@media (max-width: 700px) { .pp .mc-input, .mc-input--sm { font-size: 1rem; } }

textarea.mc-input { min-height: 84px; line-height: 1.5; resize: vertical; }
select.mc-input {
    padding-right: 2.6rem; cursor: pointer;
    background-image: var(--mc-chevron); background-repeat: no-repeat; background-position: right .85rem center; background-size: 14px;
}
select.mc-input option { background: #111; color: #fff; }
select.mc-input:disabled { cursor: not-allowed; }
.mc-input[type="number"] { -moz-appearance: textfield; }
.mc-input[type="number"]::-webkit-outer-spin-button, .mc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-input[type="search"] {
    padding-left: 2.6rem;
    background-image: var(--mc-search); background-repeat: no-repeat; background-position: left .95rem center; background-size: 16px;
}
.mc-input[type="search"]::-webkit-search-decoration, .mc-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ap-switcher select.mc-input { width: auto; max-width: 280px; min-width: 200px; }

/* A money field: the pound sign sits inside the box. */
.mc-money { position: relative; display: block; }
.mc-money .mc-currency { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--mc-muted); pointer-events: none; font-size: .95em; }
.mc-money .mc-input { padding-left: 1.9rem; }
.mc-money .mc-input--sm { padding-left: 1.6rem; }
.mc-money--sm .mc-currency { left: .6rem; font-size: .85em; }
.mc-inline-form .mc-money { width: 104px; }

/* Checkboxes: drawn here, ticked in red. */
.mc-check input[type="checkbox"], .mc-tick {
    -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
    border: 1px solid var(--mc-line-strong); border-radius: 4px; background: var(--mc-field) center / 12px no-repeat;
    cursor: pointer; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.mc-check input[type="checkbox"]:hover, .mc-tick:hover { border-color: #fff; }
.mc-check input[type="checkbox"]:checked, .mc-tick:checked { background-color: var(--mc-red); border-color: var(--mc-red); background-image: var(--mc-tick); }
.mc-check input[type="checkbox"]:focus-visible, .mc-tick:focus-visible { outline: none; border-color: var(--mc-red); box-shadow: var(--mc-ring); }
.mc-check input[type="checkbox"]:disabled, .mc-tick:disabled { opacity: .5; cursor: not-allowed; }
.mc-rights:has(input:checked) { border-color: rgba(255, 255, 255, .45); }

/* Colour and size chips in the studio: the checkbox inside each label is the
   state, the chip is the control. Ticked = on sale in that colour or size;
   the red ring is the colour being previewed. Browsers without :has() keep
   the real checkbox visible inside the chip. */
.mc-chip { position: relative; user-select: none; transition: border-color .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease; }
.mc-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--mc-red); }
.mc-chip-dot { position: relative; z-index: 1; }
.mc-chip:hover { border-color: rgba(255, 255, 255, .6); }
@supports selector(:has(*)) {
    .mc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
    .mc-chip:has(input:checked) { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
    .mc-chip:has(input:checked) > span::before {
        content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px;
        background: var(--mc-tick) center / 11px no-repeat;
    }
    .mc-chip:not(:has(input:checked)) { color: rgba(255, 255, 255, .55); border-style: dashed; }
    .mc-chip:not(:has(input:checked)) .mc-chip-dot { opacity: .55; }
    .mc-chip--size:has(input:checked) { background: #fff; color: #111; border-color: #fff; }
    .mc-chip--size:has(input:checked) > span::before { display: none; }
    .mc-chip--size:not(:has(input:checked)) > span { text-decoration: line-through; }
    .mc-chip:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
}

/* Sliders: a thin track and a red thumb (the browser's are grey and blue). */
.mc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.mc-range:focus { outline: none; }
.mc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.mc-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
    background: var(--mc-red); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); cursor: grab;
}
.mc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), var(--mc-ring); }
.mc-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.mc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--mc-red); border: 2px solid #fff; cursor: grab; }
.mc-range:focus-visible::-moz-range-thumb { box-shadow: var(--mc-ring); }
.mc-range:disabled { opacity: .4; cursor: not-allowed; }

/* The file picker: a dashed drop-zone look with our own button in it. The
   second selector outranks the portal's own file-input rule. */
.mc-file, .pp .mc-file {
    display: block; width: 100%; padding: .5rem .6rem; margin: 0;
    background: var(--mc-field); border: 1px dashed var(--mc-line-strong); border-radius: var(--mc-radius);
    color: var(--mc-muted); font: inherit; font-size: .85rem; line-height: 1.4; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mc-file:hover, .pp .mc-file:hover { border-color: #fff; color: var(--mc-text); }
.mc-file:focus-visible, .pp .mc-file:focus-visible { outline: none; border-color: var(--mc-red); box-shadow: var(--mc-ring); }
.mc-file::file-selector-button, .pp .mc-file::file-selector-button {
    margin: 0 .8rem 0 0; padding: .45rem .95rem;
    background: rgba(255, 255, 255, .08); border: 1px solid var(--mc-line); border-radius: 999px;
    color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pp .mc-file::file-selector-button { border-radius: var(--mc-radius); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.mc-file:hover::file-selector-button, .pp .mc-file:hover::file-selector-button { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }

/* Labels on the public forms (the portal has pp-label for the studio). */
.mc-label { display: block; margin: 10px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }