/* Made by Vortaxis Studio — store visual system v2 (Sophia, 2026-11-03)
   Additive layer: load AFTER assets/css/marketplace.css. Uses the existing mp-* markup;
   the only new markup is the optional demo frame (.mp-demo-frame) and plan ribbon (data-ribbon). */

body.marketplace{
  --mp-bg:#0e100d;--mp-panel:#171a15;--mp-panel-2:#1e2219;--mp-line:#2b3126;--mp-line-2:#3d4535;
  --mp-ink:#f5f7ed;--mp-muted:#a3ab97;--mp-accent:#d7f970;--mp-accent-ink:#18200b;
  --mp-violet:#a48bff;--mp-cyan:#6ee7f9;--mp-amber:#ffc65c;
  --mp-radius:20px;--mp-radius-sm:12px;
  --mp-shadow:0 1px 0 #ffffff0a inset,0 18px 50px #0006;
  --mp-glow:0 0 0 1px #d7f97040,0 18px 60px #d7f97018;
  --mp-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── Hero ─────────────────────────────────────────────── */
.mp-hero{padding:88px 0 64px;background:
  radial-gradient(900px 480px at 85% 20%,#a48bff1c,transparent 60%),
  radial-gradient(700px 420px at 10% 0%,#d7f97012,transparent 60%)}
.mp-hero h1{font-size:clamp(42px,5.4vw,78px);letter-spacing:-.055em}
.mp-hero h1 em{background:linear-gradient(92deg,#d7f970,#9ff5b0 55%,#6ee7f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.mp-search{border-color:var(--mp-line-2);background:#1a1e16cc;backdrop-filter:blur(8px);border-radius:16px;padding:7px}
.mp-search button{border-radius:11px;min-height:50px}
.mp-trust span{padding:6px 11px;border:1px solid var(--mp-line);border-radius:99px;background:#ffffff05}
.mp-hero-pick{display:block;padding:12px;border-radius:26px;background:linear-gradient(160deg,#ffffff12,#ffffff03);border:1px solid #ffffff1a;box-shadow:var(--mp-shadow);transition:transform .5s var(--mp-ease)}
.mp-hero-pick:hover{transform:translateY(-4px) rotate(-.4deg)}
.mp-hero-art{min-height:0;aspect-ratio:3/2;overflow:hidden;border-radius:18px}
.mp-hero-art img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.mp-category{transition:border-color .2s,transform .3s var(--mp-ease),background .2s}
.mp-category:hover{transform:translateY(-3px);border-color:var(--mp-line-2);background:var(--mp-panel-2)}

/* ── Product card ─────────────────────────────────────── */
.mp-card{position:relative;background:var(--mp-panel);border:1px solid var(--mp-line);border-radius:var(--mp-radius);overflow:hidden;box-shadow:var(--mp-shadow);transition:transform .45s var(--mp-ease),border-color .25s,box-shadow .45s var(--mp-ease)}
.mp-card:hover{transform:translateY(-5px);border-color:#d7f97055;box-shadow:var(--mp-glow)}
.mp-cover{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#0b0c0a;border-bottom:1px solid var(--mp-line)}
.mp-cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--mp-ease)}
.mp-card:hover .mp-cover img{transform:scale(1.035)}
.mp-cover:after{content:"Live demo ↗";position:absolute;right:14px;bottom:14px;padding:7px 12px;border-radius:99px;background:#0e100dd9;border:1px solid #ffffff22;font-size:11px;font-weight:700;color:var(--mp-ink);opacity:0;transform:translateY(6px);transition:.3s var(--mp-ease)}
.mp-card:hover .mp-cover:after{opacity:1;transform:none}
/* Covers carry their own label + mark, so the card badge moves into the meta row
   (markup: put <span class="mp-badge"> inside .mp-meta). If it stays in .mp-cover it is hidden, not overlapping. */
.mp-cover .mp-badge{display:none}
.mp-card .mp-meta{align-items:center;gap:8px}
.mp-card .mp-meta .mp-badge{position:static;margin-left:auto;padding:3px 8px;border-radius:99px;font-size:10px;background:#d7f9700d;border-color:#d7f97040}
.mp-hero-pick .mp-badge{top:auto;left:auto;bottom:14px;right:14px;padding:5px 11px;border-radius:99px}
.mp-card-body{padding:20px 22px 22px}
.mp-card .mp-meta span:first-child{display:inline-flex;align-items:center;gap:7px;color:var(--mp-accent)}
.mp-card .mp-meta span:first-child:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mp-card[data-cat=games] .mp-meta span:first-child{color:#ff7ad9}
.mp-card[data-cat=templates] .mp-meta span:first-child{color:var(--mp-violet)}
.mp-card[data-cat=scripts] .mp-meta span:first-child{color:var(--mp-cyan)}
.mp-card[data-cat=platforms] .mp-meta span:first-child{color:var(--mp-amber)}
.mp-title{font-size:19px;font-weight:750;margin-top:8px}
.mp-description{color:var(--mp-muted);font-size:13.5px;margin-top:4px;min-height:2.9em}
.mp-card-bottom{border-top:1px dashed var(--mp-line);margin-top:18px;padding-top:16px;align-items:flex-end}
.mp-price{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mp-price small{font-size:11px;font-weight:500;color:var(--mp-muted);letter-spacing:0}

/* ── Product detail ───────────────────────────────────── */
.mp-detail h1{font-size:clamp(38px,4.6vw,64px)}
.mp-gallery{aspect-ratio:3/2;border-radius:var(--mp-radius);overflow:hidden;border:1px solid var(--mp-line);box-shadow:var(--mp-shadow);background:#0b0c0a}
.mp-gallery img{width:100%;height:100%;object-fit:cover}
.mp-gallery-thumbs img{aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:1px solid var(--mp-line);opacity:.7;transition:.2s}
.mp-gallery-thumbs img:hover,.mp-gallery-thumbs [aria-current=true] img{opacity:1;border-color:var(--mp-accent)}
.mp-tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;padding:5px;margin-top:22px;width:max-content;max-width:100%;overflow-x:auto;border:1px solid var(--mp-line);border-radius:14px;background:#0e100de6;backdrop-filter:blur(10px)}
.mp-tabs a{padding:9px 16px;border-radius:10px;font-size:13px;font-weight:650;color:var(--mp-muted);border:0;white-space:nowrap}
.mp-tabs a:hover,.mp-tabs a[aria-current=true]{background:var(--mp-panel-2);color:var(--mp-ink)}
.mp-detail-grid>aside{position:sticky;top:24px;align-self:start}

/* ── Demo frame (new, optional markup — see design/HANDOFF.md) ── */
.mp-demo-frame{margin-top:22px;border-radius:var(--mp-radius);overflow:hidden;border:1px solid var(--mp-line-2);background:#121411;box-shadow:var(--mp-shadow)}
.mp-demo-bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;border-bottom:1px solid var(--mp-line);background:#191c16}
.mp-demo-bar i{width:11px;height:11px;border-radius:50%;background:#ff6159;box-shadow:18px 0 #ffbd2e,36px 0 #28c941;margin-right:36px;flex-shrink:0}
.mp-demo-url{flex:1;min-width:0;height:26px;border-radius:8px;background:#ffffff0c;color:var(--mp-muted);font-size:12px;line-height:26px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-demo-url:before{content:"🔒 ";filter:grayscale(1);opacity:.6}
.mp-demo-devices{display:flex;gap:2px;padding:3px;border-radius:9px;background:#ffffff0a}
.mp-demo-devices button{border:0;background:transparent;color:var(--mp-muted);padding:4px 10px;border-radius:7px;font-size:12px;font-weight:650}
.mp-demo-devices button[aria-pressed=true]{background:var(--mp-panel-2);color:var(--mp-ink)}
.mp-demo-stage{position:relative;aspect-ratio:16/10;background:radial-gradient(#ffffff10 1px,transparent 1px) 0 0/20px 20px,#0b0c0a;display:flex;justify-content:center}
.mp-demo-stage iframe{width:100%;height:100%;border:0;background:#fff;transition:width .45s var(--mp-ease)}
.mp-demo-frame[data-device=mobile] .mp-demo-stage iframe{width:390px;max-width:100%;border-inline:1px solid var(--mp-line-2)}
.mp-demo-poster{position:absolute;inset:0;display:grid;place-items:center;background:center/cover no-repeat;cursor:pointer}
.mp-demo-poster:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e100de6,#0e100d55)}
.mp-demo-poster span{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;background:var(--mp-accent);color:var(--mp-accent-ink);font-weight:800;font-size:14px;box-shadow:0 10px 40px #d7f97040;transition:transform .3s var(--mp-ease)}
.mp-demo-poster:hover span{transform:scale(1.05)}

/* ── Pricing / licence box ────────────────────────────── */
#licences.mp-panel{border-radius:var(--mp-radius);background:linear-gradient(180deg,#1b1f17,#151813);border-color:var(--mp-line-2);box-shadow:var(--mp-shadow);padding:26px}
.mp-plans{display:grid;gap:10px;border:0;padding:0;margin:18px 0 0}
.mp-plan{position:relative;display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:start;padding:16px;border:1px solid var(--mp-line-2);border-radius:14px;background:#ffffff04;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.mp-plan:hover{border-color:#5d6a4c}
.mp-plan input{appearance:none;width:18px;height:18px;margin:2px 0 0;border-radius:50%;border:2px solid #6b7560;display:grid;place-items:center}
.mp-plan input:checked{border-color:var(--mp-accent)}
.mp-plan input:checked:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mp-accent)}
.mp-plan:has(input:checked){border-color:var(--mp-accent);background:#d7f9700c;box-shadow:0 0 0 3px #d7f97014}
.mp-plan strong{display:block;font-size:14px}
.mp-plan small{display:block;color:var(--mp-muted);font-size:12px;line-height:1.5;margin-top:3px}
.mp-plan b{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mp-plan[data-ribbon]:before{content:attr(data-ribbon);position:absolute;top:-9px;right:14px;padding:2px 9px;border-radius:99px;background:var(--mp-violet);color:#140f2a;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.mp-buy{width:100%;min-height:50px;margin-top:16px;font-size:14px;border-radius:12px}
.mp-note{font-size:12px;color:var(--mp-muted);text-align:center;margin-top:10px;padding:0;border:0;background:none}

@media (max-width:850px){.mp-hero-pick{display:none}}
@media (max-width:1150px){.mp-plan{grid-template-columns:20px 1fr}.mp-plan b{grid-column:2}}

/* ── Motion & small screens ───────────────────────────── */
@media (max-width:760px){
  .mp-hero{padding:56px 0 44px}
  .mp-card-body{padding:18px}
  .mp-tabs{width:100%}
  .mp-detail-grid>aside{position:static}
  .mp-demo-devices{display:none}
  .mp-demo-stage{aspect-ratio:9/14}
  .mp-cover:after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mp-card,.mp-cover img,.mp-hero-pick,.mp-category,.mp-demo-stage iframe{transition:none!important}
  .mp-card:hover,.mp-hero-pick:hover,.mp-category:hover{transform:none}
  .mp-card:hover .mp-cover img{transform:none}
}

/* Alex: CSP-safe poster (an <img> instead of an inline background-image) */
.mp-demo-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mp-demo-poster:before{z-index:1}
.mp-demo-poster span{z-index:2}
.mp-meta .mp-badge+.mp-badge{margin-left:0}
@media(max-width:850px){.mp-cover-cta{display:none}.mp-cover::after{opacity:0!important}}
@media(hover:hover){.mp-card:hover .mp-cover-cta{opacity:1}}
.mp-cover-cta{background:#0e100dcc;padding:6px 12px;border-radius:99px}