/* ============================================================================
   VENDOR BRANDING (TEST LAYER) — see cave-vendor.js for how to switch it off.
   Everything is scoped under body.mp-brand, so with the layer off not one rule
   here can reach the page.
   ========================================================================== */

/* The storefront banner is deliberately NOT touched: MycoPunks gets the same
   house cave background as every other vendor. Their own artwork appears in the
   footer instead, which is where they use it themselves.
   ------------------------------------------------------------------------- */

/* ------------------------------------------------------------ their footer */
.mpf{position:relative;background:#0c0f0d;color:#EAF3F0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.09)}
/* The illustrated band runs edge to edge, the way it does on their own site.
   The vertical position is not a guess: the hand-drawn MYCOPUNKS sits between
   70 and 90 percent down the file, and at 90% the visible window covers it at
   every width from 390 to 1920. Centred, the lettering falls below the crop
   entirely, which is what it was doing. */
.mpf-band{height:clamp(120px,18vw,260px);
  background:url("vendors/mycopunks-band.jpg") no-repeat;
  background-size:cover;
  background-position:center 90%;
  /* it closes their footer now rather than opening it, so the rule moves to the top */
  border-top:1px solid rgba(255,255,255,.12)}
.mpf-in{max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,46px) clamp(18px,3vw,28px) 8px;
  display:grid;grid-template-columns:minmax(260px,1.5fr) 1fr 1fr;gap:clamp(24px,4vw,54px)}
@media(max-width:820px){.mpf-in{grid-template-columns:1fr 1fr}
  .mpf-sign{grid-column:1/-1}}
@media(max-width:520px){.mpf-in{grid-template-columns:1fr;gap:26px}}

.mpf h4{margin:0 0 14px;font:800 .82rem/1.2 var(--sans,system-ui);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mp-ink,#108474)}
.mpf-sign p{margin:0 0 14px;font:400 .96rem/1.55 var(--sans,system-ui);
  color:rgba(234,243,240,.78);max-width:36ch}
.mpf-form{display:flex;gap:8px;max-width:380px}
.mpf-form input{flex:1;min-width:0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:12px 14px;
  color:#fff;font:400 .95rem var(--sans,system-ui);outline:none}
.mpf-form input::placeholder{color:rgba(234,243,240,.45)}
.mpf-form input:focus{border-color:var(--mp-ink,#108474);
  box-shadow:0 0 0 3px rgba(16,132,116,.28)}
.mpf-form button{flex:none;border:0;cursor:pointer;border-radius:8px;padding:12px 20px;
  background:var(--mp-ink,#108474);color:#fff;font:800 .9rem var(--sans,system-ui);
  letter-spacing:.02em;transition:filter .18s}
.mpf-form button:hover{filter:brightness(1.14)}

.mpf-col a{display:block;padding:6px 0;color:rgba(234,243,240,.80);
  font:400 .95rem/1.4 var(--sans,system-ui);text-decoration:none;transition:color .16s}
.mpf-col a:hover{color:var(--mp-ink,#108474)}

.mpf-note{max-width:1180px;margin:0 auto;
  padding:14px clamp(18px,3vw,28px) clamp(22px,3vw,32px);
  font:400 .78rem/1.5 var(--mono,ui-monospace);color:rgba(234,243,240,.42);
  border-top:1px solid rgba(255,255,255,.07);margin-top:18px;
  padding-bottom:clamp(16px,2.4vw,24px)}

/* ============================================================================
   THE SPOTLIGHT — a vendor who has not opened yet
   They have nothing to put in a grid, so they get a card of their own above the
   categories: bounded, rimmed with light, and sitting on a darkened stretch of
   cave so it reads as a plate set into the page rather than another band.
   Everything is scoped under .fv, which only exists when the layer is on.
   ========================================================================== */
.fv{position:relative;margin:clamp(30px,4.4vw,60px) 0 clamp(10px,2vw,26px);
  padding:clamp(30px,4vw,56px) clamp(14px,2.4vw,28px);overflow:hidden;isolation:isolate;
  /* the ground behind the card is dropped hard so the card itself is the light */
  background:linear-gradient(180deg,rgba(3,1,10,.78),rgba(3,1,10,.90))}
.fv-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 110% at 26% 50%, rgba(16,132,116,.22), transparent 66%),
    radial-gradient(46% 110% at 74% 44%, rgba(var(--glow-m),.20), transparent 66%);
  animation:fv-breathe 11s ease-in-out infinite}
@keyframes fv-breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.fv-aura{animation:none}}

/* ---------------------------------------------------------------- the card */
.fv-in{position:relative;max-width:1140px;margin:0 auto;
  padding:clamp(24px,3vw,42px) !important;
  border-radius:clamp(18px,2.2vw,26px);
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(16,132,116,.16), transparent 58%),
    radial-gradient(110% 140% at 92% 100%, rgba(var(--glow-m),.16), transparent 60%),
    linear-gradient(165deg, rgba(24,16,44,.96), rgba(10,6,22,.98));
  box-shadow:
    0 40px 90px -36px rgba(0,0,0,.95),
    0 0 90px -34px rgba(var(--glow-m),.7),
    inset 0 1px 0 rgba(255,255,255,.07);
  display:grid;grid-template-columns:minmax(0,286px) minmax(0,1fr);
  gap:clamp(22px,3.4vw,44px);align-items:center}
/* a lit rim around the whole plate, brightest where the two brand colours meet */
.fv-in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(140deg,
    rgba(63,214,190,.85), rgba(var(--glow-v),.55) 38%,
    rgba(255,255,255,.10) 58%, rgba(var(--glow-m),.80));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
@media(max-width:760px){.fv-in{grid-template-columns:1fr;gap:22px;justify-items:center;
  text-align:center}}

/* their card, lifted off the plate */
.fv-card{position:relative;width:100%;max-width:286px;aspect-ratio:3/4;border-radius:14px;
  overflow:hidden;background:var(--void,#0a0618);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 26px 56px -24px rgba(0,0,0,.95),
             0 0 0 1px rgba(16,132,116,.34),
             0 0 44px -18px rgba(var(--glow-m),.8)}
.fv-card img{width:100%;height:100%;object-fit:cover;display:block}
.fv-tbc{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.26em;
  color:#fff;background:linear-gradient(112deg,#108474,#7C3AED);
  border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:6px 16px;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.9)}

.fv-kick{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);
  font-size:11.4px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:#3FD6BE}
.fv-kick::before{content:"";width:22px;height:1px;background:currentColor;flex:none;
  box-shadow:0 0 8px currentColor}
@media(max-width:760px){.fv-kick::before{display:none}}
.fv h2{font-family:var(--display);font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.04;
  letter-spacing:-.015em;margin:12px 0 0;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.75)}
.fv-meta{margin:10px 0 0;font-family:var(--mono);font-size:11.6px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(226,216,250,.70)}
.fv-bio{margin:16px 0 0;font-size:15.2px;line-height:1.62;max-width:56ch;
  color:rgba(233,226,252,.88)}
@media(max-width:760px){.fv-bio{margin-inline:auto}}

.fv-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
@media(max-width:760px){.fv-cta{justify-content:center}}
.fv-soon{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11.6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:rgba(16,132,116,.20);
  border:1px solid rgba(63,214,190,.5);border-radius:999px;padding:11px 20px}
.fv-soon i{width:7px;height:7px;border-radius:50%;background:#3FD6BE;flex:none;
  box-shadow:0 0 10px #3FD6BE;animation:fv-pulse 2.2s ease-in-out infinite}
@keyframes fv-pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.fv-soon i{animation:none;opacity:1}}
.fv-go{font-family:var(--mono);font-size:11.6px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#CBB6FF;text-decoration:none;transition:color .18s}
.fv-go:hover{color:#FF9BEA}