/*
 * ==========================================================
 * VIBE CARD MARKET UI 2.0
 * ==========================================================
 */

/* VIBE_CARD_MARKET_UI_V20 */

.vcm{
  display:flex;
  flex-direction:column;
  gap:18px;
}


.vcm-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}


.vcm-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}


.vcm-stat-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
}


.vcm-stat-value{
  margin-top:7px;

  font-size:
    clamp(18px,1.45vw,25px);

  font-weight:850;
  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.vcm-stat-label{
  color:var(--vb-muted);

  font-size:14px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}


.vcm-toolbar{
  display:grid;

  grid-template-columns:
    minmax(180px,1fr)
    170px
    190px;

  gap:8px;
}


.vcm-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.vcm-card{
  position:relative;

  min-width:0;

  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 35%
    ),
    var(--vb-surface);

  transition:
    transform
      var(--vb-motion-normal)
      var(--vb-ease),
    border-color
      var(--vb-motion-normal)
      var(--vb-ease),
    box-shadow
      var(--vb-motion-normal)
      var(--vb-ease);
}


.vcm-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(178,113,255,.25);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.18);
}


.vcm-media{
  position:relative;

  aspect-ratio:
    4 / 5;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(154,94,255,.11),
      rgba(255,255,255,.018)
    );
}


.vcm-media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.vcm-placeholder{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  color:
    rgba(255,255,255,.18);

  font-size:36px;
  font-weight:900;
}


.vcm-rarity{
  position:absolute;

  top:10px;
  left:10px;

  padding:
    4px
    7px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;

  background:
    rgba(8,10,15,.82);

  backdrop-filter:
    blur(12px);

  color:
    var(--vb-text);

  font-size:13px;
  font-weight:850;

  letter-spacing:.09em;
  text-transform:uppercase;
}


.vcm-rarity[data-rarity="common"]{
  color:#c8ced8;
}


.vcm-rarity[data-rarity="rare"]{
  color:#65a9ff;
}


.vcm-rarity[data-rarity="epic"]{
  color:#c178ff;
}


.vcm-rarity[data-rarity="legendary"]{
  color:#ffc766;
}


.vcm-serial{
  position:absolute;

  right:10px;
  bottom:10px;

  padding:
    4px
    7px;

  border-radius:8px;

  background:
    rgba(8,10,15,.84);

  color:
    rgba(255,255,255,.86);

  font-size:14px;
  font-weight:800;

  font-variant-numeric:
    tabular-nums;
}


.vcm-body{
  padding:13px;
}


.vcm-name{
  min-width:0;

  overflow:hidden;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:800;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vcm-sub{
  margin-top:4px;

  color:
    var(--vb-muted);

  font-size:14px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.vcm-price-row{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:10px;

  margin-top:13px;
}


.vcm-price{
  color:
    var(--vb-text);

  font-size:14px;
  font-weight:900;

  letter-spacing:-.025em;

  font-variant-numeric:
    tabular-nums;
}


.vcm-seller{
  margin-top:8px;

  color:
    var(--vb-muted);

  font-size:13px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.vcm-empty{
  grid-column:
    1 / -1;

  padding:42px 18px;

  border:
    1px solid
    var(--vb-border);

  border-radius:14px;

  color:
    var(--vb-muted);

  text-align:center;
}


.vcm-own{
  color:
    var(--vb-accent);
}


.vcm-bulk{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(120px,.75fr)
    auto;

  gap:10px;

  align-items:end;
}


.vcm-bulk-info{
  display:flex;

  gap:7px;

  flex-wrap:wrap;

  margin-top:12px;
}


.vcm-chip{
  padding:
    6px
    9px;

  border:
    1px solid
    var(--vb-border);

  border-radius:999px;

  background:
    rgba(255,255,255,.018);

  color:
    var(--vb-muted);

  font-size:14px;
}


.vcm-chip strong{
  color:
    var(--vb-text);
}


.vcm-result-note{
  margin-top:7px;

  color:
    var(--vb-muted);

  font-size:14px;
}


@media(max-width:1240px){

  .vcm-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:980px){

  .vcm-stat-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .vcm-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .vcm-toolbar,
  .vcm-bulk{
    grid-template-columns:
      1fr
      1fr;
  }

}


@media(max-width:620px){

  .vcm-stat-grid,
  .vcm-grid,
  .vcm-toolbar,
  .vcm-bulk{
    grid-template-columns:
      1fr;
  }

}


/*
 * ==========================================================
 * VIBE CARD MARKET GROUPED CATALOG 2.1
 * ==========================================================
 */

.vcm-taxonomy{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:8px;
}


.vcm-tax-node{
  min-width:0;

  min-height:66px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;

  padding:
    10px
    12px;

  border:
    1px solid
    var(--vb-border);

  border-radius:11px;

  background:
    rgba(255,255,255,.018);
}


.vcm-tax-node strong{
  overflow:hidden;

  color:
    var(--vb-text);

  font-size:13px;
  font-weight:800;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vcm-tax-label{
  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:850;

  letter-spacing:.09em;
  text-transform:uppercase;
}


.vcm-tax-node .vb-select{
  min-height:32px;

  padding-top:0;
  padding-bottom:0;

  border:0;

  background:
    rgba(255,255,255,.025);
}


.vcm-browser-tools{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    230px;

  gap:8px;

  margin-top:14px;
}


.vcm-market-list{
  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:14px;

  background:
    rgba(255,255,255,.01);
}


.vcm-market-group{
  border-bottom:
    1px solid
    var(--vb-border);
}


.vcm-market-group:last-child{
  border-bottom:0;
}


.vcm-group-main{
  display:grid;

  grid-template-columns:
    64px
    minmax(0,1fr)
    116px
    130px
    116px;

  gap:14px;

  align-items:center;

  min-height:92px;

  padding:
    11px
    13px;

  transition:
    background
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vcm-group-main:hover{
  background:
    rgba(255,255,255,.025);
}


.vcm-group-image{
  width:64px;
  height:76px;

  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:9px;

  background:
    linear-gradient(
      145deg,
      rgba(154,94,255,.11),
      rgba(255,255,255,.018)
    );
}


.vcm-group-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.vcm-group-info{
  min-width:0;
}


.vcm-breadcrumb{
  display:flex;

  align-items:center;
  flex-wrap:wrap;

  gap:5px;

  margin-bottom:7px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vcm-breadcrumb b{
  color:
    rgba(255,255,255,.20);

  font-weight:700;
}


.vcm-breadcrumb span:last-child{
  color:
    var(--vb-accent);
}


.vcm-group-name{
  overflow:hidden;

  color:
    var(--vb-text);

  font-size:13px;
  font-weight:850;

  letter-spacing:-.015em;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vcm-group-meta{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:6px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vcm-group-meta span{
  padding:
    3px
    6px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:6px;

  background:
    rgba(255,255,255,.018);
}


.vcm-group-market{
  text-align:right;
}


.vcm-group-count{
  color:
    var(--vb-text);

  font-size:14px;
  font-weight:750;
}


.vcm-group-sellers{
  margin-top:4px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vcm-group-price{
  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


.vcm-group-price small{
  display:block;

  margin-bottom:3px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vcm-group-price strong{
  color:
    var(--vb-text);

  font-size:13px;
  font-weight:900;
}


.vcm-group-toggle{
  width:100%;
}


.vcm-group-orders{
  border-top:
    1px solid
    var(--vb-border);

  background:
    rgba(0,0,0,.13);
}


.vcm-order-head,
.vcm-offer{
  display:grid;

  grid-template-columns:
    100px
    minmax(0,1fr)
    130px
    116px;

  gap:12px;

  align-items:center;

  padding:
    8px
    14px
    8px
    91px;
}


.vcm-order-head{
  min-height:31px;

  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:800;

  letter-spacing:.06em;
  text-transform:uppercase;
}


.vcm-offer{
  min-height:45px;

  border-top:
    1px solid
    rgba(255,255,255,.045);
}


.vcm-offer:hover{
  background:
    rgba(255,255,255,.018);
}


.vcm-offer-serial{
  display:flex;

  flex-direction:column;
  gap:2px;

  font-size:14px;

  font-variant-numeric:
    tabular-nums;
}


.vcm-offer-serial strong{
  color:
    var(--vb-text);
}


.vcm-offer-serial span,
.vcm-offer-seller{
  color:
    var(--vb-muted);

  font-size:13px;
}


.vcm-offer-price{
  color:
    var(--vb-text);

  font-size:14px;
  font-weight:850;

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


.vcm-offer-action{
  text-align:right;
}


@media(max-width:1100px){

  .vcm-taxonomy{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .vcm-group-main{
    grid-template-columns:
      58px
      minmax(0,1fr)
      115px
      108px;
  }


  .vcm-group-image{
    width:58px;
    height:70px;
  }


  .vcm-group-market{
    display:none;
  }


  .vcm-order-head,
  .vcm-offer{
    padding-left:85px;
  }

}


@media(max-width:760px){

  .vcm-browser-tools,
  .vcm-taxonomy{
    grid-template-columns:
      1fr;
  }


  .vcm-group-main{
    grid-template-columns:
      54px
      minmax(0,1fr)
      auto;

    gap:10px;
  }


  .vcm-group-image{
    width:54px;
    height:66px;
  }


  .vcm-group-price{
    grid-column:
      2;

    text-align:left;
  }


  .vcm-group-toggle{
    grid-column:
      3;

    grid-row:
      1 / span 2;
  }


  .vcm-order-head{
    display:none;
  }


  .vcm-offer{
    grid-template-columns:
      1fr
      auto;

    padding:
      10px
      12px;
  }


  .vcm-offer-seller{
    grid-column:
      1;
  }


  .vcm-offer-price{
    grid-column:
      2;

    grid-row:
      1;

    text-align:right;
  }


  .vcm-offer-action{
    grid-column:
      2;

    grid-row:
      2;
  }

}


/*
 * ==========================================================
 * VIBE MARKET ITEM UI 2.2
 * ==========================================================
 */

.vcm-group-name-link{
  display:block;

  text-decoration:none;
}


.vcm-group-name-link:hover{
  color:
    var(--vb-accent);
}


.vmi{
  display:flex;
  flex-direction:column;
  gap:20px;
}


.vmi-breadcrumb{
  display:flex;

  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  color:
    var(--vb-muted);

  font-size:14px;
}


.vmi-breadcrumb a{
  color:
    var(--vb-muted);

  text-decoration:none;
}


.vmi-breadcrumb a:hover{
  color:
    var(--vb-text);
}


.vmi-breadcrumb b{
  color:
    rgba(255,255,255,.18);
}


.vmi-breadcrumb strong{
  color:
    var(--vb-accent);
}


.vmi-hero{
  display:grid;

  grid-template-columns:
    minmax(230px,320px)
    minmax(0,1fr);

  gap:16px;

  align-items:start;
}


.vmi-card-image{
  overflow:hidden;

  aspect-ratio:
    4 / 5;

  border:
    1px solid
    var(--vb-border);

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(154,94,255,.12),
      rgba(255,255,255,.018)
    );
}


.vmi-card-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.vmi-summary{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:18px;
}


.vmi-title{
  margin:
    5px
    0
    0;

  color:
    var(--vb-text);

  font-size:
    clamp(
      25px,
      2.5vw,
      38px
    );

  line-height:1.08;
  font-weight:900;

  letter-spacing:-.045em;
}


.vmi-subtitle{
  display:flex;

  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:12px;

  color:
    var(--vb-muted);

  font-size:14px;
}


.vmi-rarity{
  position:static;

  display:inline-flex;
}


.vmi-facts{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:8px;
}


.vmi-fact{
  min-width:0;

  padding:
    12px;

  border:
    1px solid
    var(--vb-border);

  border-radius:11px;

  background:
    rgba(255,255,255,.016);
}


.vmi-fact span{
  display:block;

  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}


.vmi-fact strong{
  display:block;

  margin-top:7px;

  overflow:hidden;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:850;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vmi-price-panel{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  overflow:hidden;

  border:
    1px solid
    rgba(166,105,255,.16);

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(154,94,255,.065),
      rgba(255,255,255,.012)
    );
}


.vmi-price-panel>div{
  min-width:0;

  padding:
    14px;

  border-right:
    1px solid
    var(--vb-border);
}


.vmi-price-panel>div:last-child{
  border-right:0;
}


.vmi-price-panel span{
  display:block;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vmi-price-panel strong{
  display:block;

  margin-top:5px;

  color:
    var(--vb-text);

  font-size:15px;
  font-weight:900;

  font-variant-numeric:
    tabular-nums;
}


.vmi-range{
  color:
    var(--vb-muted);

  font-size:14px;
}


.vmi-range strong{
  color:
    var(--vb-text);
}


.vmi-no-chart{
  min-height:160px;

  display:grid;
  place-items:center;

  color:
    var(--vb-muted);

  text-align:center;
}


.vmi-offers,
.vmi-sales{
  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:14px;

  background:
    rgba(255,255,255,.01);
}


.vmi-offer-head,
.vmi-offer{
  display:grid;

  grid-template-columns:
    95px
    minmax(150px,1fr)
    170px
    130px
    110px;

  gap:12px;

  align-items:center;

  padding:
    9px
    13px;
}


.vmi-offer-head{
  min-height:34px;

  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}


.vmi-offer{
  min-height:50px;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.vmi-offer:hover{
  background:
    rgba(255,255,255,.02);
}


.vmi-serial{
  font-variant-numeric:
    tabular-nums;
}


.vmi-serial strong{
  color:
    var(--vb-text);

  font-size:14px;
}


.vmi-serial span{
  margin-left:3px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vmi-seller,
.vmi-listed{
  overflow:hidden;

  color:
    var(--vb-muted);

  font-size:14px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vmi-offer-price{
  color:
    var(--vb-text);

  font-size:13px;
  font-weight:850;

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


.vmi-offer-action{
  text-align:right;
}


.vmi-sale-head,
.vmi-sale{
  display:grid;

  grid-template-columns:
    minmax(180px,1fr)
    100px
    150px;

  gap:12px;

  align-items:center;

  padding:
    9px
    13px;
}


.vmi-sale-head{
  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}


.vmi-sale{
  min-height:42px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  color:
    var(--vb-muted);

  font-size:14px;
}


.vmi-sale-price{
  color:
    var(--vb-text);

  font-weight:850;

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


@media(max-width:980px){

  .vmi-hero{
    grid-template-columns:
      230px
      minmax(0,1fr);
  }


  .vmi-facts{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .vmi-offer-head,
  .vmi-offer{
    grid-template-columns:
      75px
      minmax(120px,1fr)
      110px
      100px;
  }


  .vmi-offer-head>span:nth-child(3),
  .vmi-listed{
    display:none;
  }

}


@media(max-width:720px){

  .vmi-hero{
    grid-template-columns:
      1fr;
  }


  .vmi-card-image{
    max-width:280px;
  }


  .vmi-price-panel{
    grid-template-columns:
      1fr;
  }


  .vmi-price-panel>div{
    border-right:0;

    border-bottom:
      1px solid
      var(--vb-border);
  }


  .vmi-price-panel>div:last-child{
    border-bottom:0;
  }


  .vmi-offer-head{
    display:none;
  }


  .vmi-offer{
    grid-template-columns:
      1fr
      auto;

    gap:7px;

    padding:
      11px
      12px;
  }


  .vmi-seller{
    grid-column:
      1;
  }


  .vmi-offer-price{
    grid-column:
      2;

    grid-row:
      1;

    text-align:right;
  }


  .vmi-offer-action{
    grid-column:
      2;

    grid-row:
      2;
  }


  .vmi-sale-head,
  .vmi-sale{
    grid-template-columns:
      1fr
      70px
      100px;
  }

}

/* ==========================================================
 * VIBE_MARKET_RARITY_COLORS_V1
 *
 * Common    = neutral
 * Rare      = blue
 * Epic      = violet
 * Legendary = gold
 * ========================================================== */

.vcm-rarity[data-rarity]{
  box-shadow:none !important;
}


/* COMMON */

.vcm-rarity[data-rarity="common"]{
  color:#cbd5e1 !important;
  border-color:rgba(
    148,
    163,
    184,
    .38
  ) !important;

  background:rgba(
    148,
    163,
    184,
    .10
  ) !important;
}


/* RARE */

.vcm-rarity[data-rarity="rare"]{
  color:#60a5fa !important;
  border-color:rgba(
    96,
    165,
    250,
    .48
  ) !important;

  background:rgba(
    59,
    130,
    246,
    .12
  ) !important;
}


/* EPIC */

.vcm-rarity[data-rarity="epic"]{
  color:#c084fc !important;
  border-color:rgba(
    192,
    132,
    252,
    .52
  ) !important;

  background:rgba(
    168,
    85,
    247,
    .13
  ) !important;
}


/* LEGENDARY */

.vcm-rarity[data-rarity="legendary"]{
  color:#fbbf24 !important;
  border-color:rgba(
    251,
    191,
    36,
    .55
  ) !important;

  background:rgba(
    245,
    158,
    11,
    .13
  ) !important;
}

/* ==========================================================
 * VIBE_MARKET_RARITY_COLORS_V2
 *
 * Override both:
 * - rarity badge
 * - whole market card/container
 *
 * Common    = neutral grey
 * Rare      = blue
 * Epic      = violet
 * Legendary = gold
 * ========================================================== */


/* ---------- BADGE BASE ---------- */

.vcm-rarity[data-rarity],
.vmi-rarity[data-rarity]{
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}


/* ---------- COMMON ---------- */

.vcm-rarity[data-rarity="common" i],
.vmi-rarity[data-rarity="common" i]{
  color:#cbd5e1 !important;

  background:#1e293b !important;

  border-color:#64748b !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(148,163,184,.10)
    !important;
}

.vcm-rarity[data-rarity="common" i]::before,
.vcm-rarity[data-rarity="common" i]::after,
.vmi-rarity[data-rarity="common" i]::before,
.vmi-rarity[data-rarity="common" i]::after{
  background:#94a3b8 !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* ---------- RARE ---------- */

.vcm-rarity[data-rarity="rare" i],
.vmi-rarity[data-rarity="rare" i]{
  color:#60a5fa !important;

  background:#172554 !important;

  border-color:#3b82f6 !important;
}

.vcm-rarity[data-rarity="rare" i]::before,
.vcm-rarity[data-rarity="rare" i]::after,
.vmi-rarity[data-rarity="rare" i]::before,
.vmi-rarity[data-rarity="rare" i]::after{
  background:#3b82f6 !important;
  background-image:none !important;
}


/* ---------- EPIC ---------- */

.vcm-rarity[data-rarity="epic" i],
.vmi-rarity[data-rarity="epic" i]{
  color:#d8b4fe !important;

  background:#2e1065 !important;

  border-color:#a855f7 !important;
}

.vcm-rarity[data-rarity="epic" i]::before,
.vcm-rarity[data-rarity="epic" i]::after,
.vmi-rarity[data-rarity="epic" i]::before,
.vmi-rarity[data-rarity="epic" i]::after{
  background:#a855f7 !important;
  background-image:none !important;
}


/* ---------- LEGENDARY ---------- */

.vcm-rarity[data-rarity="legendary" i],
.vmi-rarity[data-rarity="legendary" i]{
  color:#fde68a !important;

  background:#451a03 !important;

  border-color:#f59e0b !important;
}

.vcm-rarity[data-rarity="legendary" i]::before,
.vcm-rarity[data-rarity="legendary" i]::after,
.vmi-rarity[data-rarity="legendary" i]::before,
.vmi-rarity[data-rarity="legendary" i]::after{
  background:#f59e0b !important;
  background-image:none !important;
}


/* ==========================================================
 * WHOLE MARKET CARD
 *
 * The current market uses purple as its general accent.
 * Override the item container according to the rarity badge
 * contained inside it.
 * ========================================================== */


/* COMMON */

:is(
  article,
  .vb-card,
  .vcm-card,
  .vcm-item,
  .vcm-listing,
  .vcm-market-card
):has(
  .vcm-rarity[data-rarity="common" i]
){
  border-color:
    rgba(148,163,184,.30)
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(148,163,184,.65)
    !important;
}


/* RARE */

:is(
  article,
  .vb-card,
  .vcm-card,
  .vcm-item,
  .vcm-listing,
  .vcm-market-card
):has(
  .vcm-rarity[data-rarity="rare" i]
){
  border-color:
    rgba(59,130,246,.40)
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(59,130,246,.85)
    !important;
}


/* EPIC */

:is(
  article,
  .vb-card,
  .vcm-card,
  .vcm-item,
  .vcm-listing,
  .vcm-market-card
):has(
  .vcm-rarity[data-rarity="epic" i]
){
  border-color:
    rgba(168,85,247,.45)
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(168,85,247,.90)
    !important;
}


/* LEGENDARY */

:is(
  article,
  .vb-card,
  .vcm-card,
  .vcm-item,
  .vcm-listing,
  .vcm-market-card
):has(
  .vcm-rarity[data-rarity="legendary" i]
){
  border-color:
    rgba(245,158,11,.50)
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(245,158,11,.95)
    !important;
}