/* ============================================================================
   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,0) 0,rgba(3,1,10,.80) clamp(30px,4.5vw,64px),rgba(3,1,10,.90) 60%,rgba(3,1,10,.90) 100%)}
.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:980px;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,clamp(210px,27vw,300px)) 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(120,240,220,.55) 0%, rgba(190,170,255,.42) 40%,
    rgba(255,180,235,.38) 70%, rgba(255,120,210,.50) 100%);
  -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:minmax(0,1fr);gap:22px;justify-items:center;
  text-align:center}}

/* their card, lifted off the plate */
.fv-card{position:relative;width:100%;max-width:300px;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:auto;right:11px;transform:none;
  font-family:var(--mono);font-size:11.6px;font-weight:700;letter-spacing:.18em;
  color:#fff;background:rgba(12,10,22,.86);
  border:1px solid rgba(255,255,255,.22);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.6px;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-meta span{white-space:nowrap}
.fv-meta span+span::before{content:"\00b7";margin:0 .7em;opacity:.55}
@media(max-width:560px){.fv-meta span{display:block}
  .fv-meta span+span::before{content:none;margin:0}}
.fv-bio{margin:16px 0 0;font-size:15.2px;line-height:1.62;max-width:60ch;
  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:rgba(233,226,252,.82)}
.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{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11.6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;border:1px solid rgba(63,214,190,.55);
  border-radius:999px;padding:12px 22px;background:rgba(16,132,116,.22);
  transition:background var(--t-2) var(--e-out),border-color var(--t-2) var(--e-out),
             transform var(--t-2) var(--e-out)}
.fv-go:hover{background:rgba(16,132,116,.34);border-color:rgba(63,214,190,.85);
  transform:translateY(-1px)}

/* ==========================================================================
   STOREFRONT - these apply to EVERY vendor, not just a branded one.
   ========================================================================== */

/* .phead is used here as a plain section title. cave-v3 gives it a dark
   gradient slab that is invisible on a black page but appears the moment the
   shaft lights up, taking unreadable grey type with it. */
#cc-store .phead::before,#cc-store .phead::after{display:none!important}
#cc-store .phead span{color:var(--ink)!important;text-shadow:none!important}

/* The rating pill prints its star as class="star", which style.css owns as the
   twinkling starfield point: absolutely positioned, white radial blob, animated
   forever. Two classes beat a bare .star, so no !important is needed. */
.videntbadge .star{position:static;background:none;border-radius:0;opacity:1;
  animation:none;will-change:auto}

/* The newsletter band is built with inline colours picked for a white page, so
   its heading sits at 1.1:1 in both themes. Style attributes need !important. */
.vnews h3{color:var(--ink)!important}
.vnews p{color:var(--ink-2)!important}
#cc-vnews-email,.vrev-in{background:var(--surface)!important;color:var(--ink)!important;
  border-color:var(--line)!important}

/* A vendor with no artwork used to render as an empty outlined box with the
   alt text spilling out of the corner. Fill the plate with a lettermark. */
.vbanner .vb-mark{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;
  font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:.02em;color:rgba(255,255,255,.92);
  text-shadow:0 2px 26px rgba(0,0,0,.6);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(124,58,237,.55), transparent 62%),
    radial-gradient(110% 90% at 80% 95%, rgba(226,80,200,.42), transparent 64%),
    linear-gradient(165deg,#1a1233,#0a0618)}

/* ---------------------------------------------------------------- density
   The hero spent 512px of desktop and 898px of phone before the first thing a
   visitor can buy. vendor.html's inline <style> loads after every stylesheet,
   so each of these needs the #cc-store qualifier to land. */
@media(min-width:821px){
  #cc-store .vhero2 .wrap{padding-block:34px}
  #cc-store .vhero2-grid{gap:30px}
  #cc-store .vbanner{width:264px}
  #cc-store .vident h1{margin-bottom:10px}
  #cc-store .vident-badges{margin-bottom:14px}
  #cc-store .vfollow-row{margin-bottom:14px}
}
@media(max-width:820px){
  #cc-store .vhero2 .wrap{padding-block:26px}
  #cc-store .vbanner{width:min(230px,58vw)}
  /* three stacked full-width buttons become one row plus a pair */
  #cc-store .vident .vactions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #cc-store .vident .vactions .btn-follow{grid-column:1/-1;width:auto}
  #cc-store .vident .vactions .btn2{width:auto}
}

/* ==========================================================================
   FEATURED SLOT, SECOND PASS - make it read as an exhibit, not another card.
   Everything here is additive over the plate that was already there.
   ========================================================================== */

/* A shaft of light falling on the plate from the roof of the chamber, which is
   what a cave would actually do to the one thing it wanted you to look at. */
.fv-spot{position:absolute;left:50%;top:-6%;width:min(1180px,96%);height:78%;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:
    radial-gradient(56% 80% at 50% 0%, rgba(120,240,215,.26), transparent 66%),
    radial-gradient(34% 94% at 50% 0%, rgba(255,255,255,.13), transparent 70%),
    radial-gradient(78% 60% at 50% 4%, rgba(var(--glow-m),.14), transparent 74%);
  -webkit-mask:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);
          mask:linear-gradient(180deg,#000 0,#000 52%,transparent 100%)}

/* the plate itself: lifted, warmer at the rim, and it answers the pointer */
.fv-in{transition:transform var(--t-3) var(--e-out),box-shadow var(--t-3) var(--e-out)}
.fv-in:hover{transform:translateY(-3px);
  box-shadow:0 52px 110px -38px rgba(0,0,0,.98),
             0 0 120px -30px rgba(var(--glow-m),.85),
             inset 0 1px 0 rgba(255,255,255,.10)}
/* a slow travelling highlight along the rim so the plate is never quite still */
.fv-in::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;opacity:.85;
  background:linear-gradient(115deg,transparent 32%,rgba(190,255,240,.55) 47%,
             rgba(255,180,235,.45) 53%,transparent 68%);
  background-size:280% 100%;
  -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 (prefers-reduced-motion:no-preference){
  .fv-in::after{animation:fv-sweep 9s linear infinite}
}
@keyframes fv-sweep{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* the corner marker: this is the one vendor being shown off */
.fv-flag{position:absolute;top:0;left:clamp(24px,4vw,54px);transform:translateY(-50%);
  z-index:3;font-family:var(--mono);font-size:10.6px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:#04231E;
  background:linear-gradient(112deg,#7BF3DC,#3FD6BE 58%,#9FE4FF);
  border-radius:999px;padding:7px 16px;white-space:nowrap;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.9),0 0 26px -6px rgba(63,214,190,.7)}
@media(max-width:760px){.fv-flag{left:50%;transform:translate(-50%,-50%)}}

/* their artwork, set into a lit mount rather than dropped on the plate */
.fv-card{transition:transform var(--t-3) var(--e-out),box-shadow var(--t-3) var(--e-out)}
.fv-in:hover .fv-card{transform:translateY(-2px) scale(1.014);
  box-shadow:0 34px 66px -24px rgba(0,0,0,.98),
             0 0 0 1px rgba(63,214,190,.55),
             0 0 60px -14px rgba(var(--glow-m),.9)}
.fv-mount{position:absolute;inset:-10px;border-radius:19px;z-index:-1;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(63,214,190,.42),rgba(var(--glow-v),.30) 30%,
             rgba(var(--glow-m),.38) 62%,rgba(63,214,190,.42));
  filter:blur(13px);opacity:.85}
/* one pass of light across the art on hover */
.fv-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.fv-sheen::before{content:"";position:absolute;top:-60%;bottom:-60%;width:38%;left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-16deg);transition:left var(--t-5) var(--e-out)}
.fv-in:hover .fv-sheen::before{left:120%}
@media (prefers-reduced-motion:reduce){.fv-sheen::before{display:none}}

/* their reach, in their own figures, filling the dead space under the bio */
.fv-stats{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fv-stats li{display:flex;flex-direction:column;gap:3px;padding:10px 15px;
  border-radius:12px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);min-width:0}
.fv-stats b{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.01em;
  color:#EAF6FF;line-height:1}
.fv-stats span{font-family:var(--mono);font-size:10.4px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(226,216,250,.68);white-space:nowrap}
@media(max-width:760px){.fv-stats{justify-content:center}}
@media(max-width:430px){.fv-stats li{flex:1 1 100%;flex-direction:row;align-items:baseline;
  justify-content:space-between;gap:12px}}

/* the name carries a little more weight now it is the headline of an exhibit */
.fv h2{font-size:clamp(2.05rem,4.1vw,3rem)}
.fv-kick{color:#7BF3DC}

/* The status chip sat at the old quality next to the new flag. Same weight,
   deliberately a holding colour rather than the mint of "featured". */
.fv-tbc{background:linear-gradient(112deg,rgba(38,26,10,.94),rgba(20,13,4,.94))!important;
  border:1px solid rgba(255,196,110,.55)!important;color:#FFDFB0!important;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.95),0 0 20px -6px rgba(255,180,80,.45)!important}