/*
 * ==========================================================
 * VIBE STORE UI 2.0
 * ==========================================================
 */

/* VIBE_STORE_UI_V20 */

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


.vstore-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;

  gap:16px;
}


.vstore-kicker{
  color:var(--vb-accent);

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

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


.vstore-title{
  margin-top:5px;

  color:var(--vb-text);

  font-size:
    clamp(
      27px,
      2.4vw,
      36px
    );

  font-weight:950;

  line-height:1.08;

  letter-spacing:-.045em;
}


.vstore-description{
  max-width:720px;

  margin-top:8px;

  color:var(--vb-muted);

  font-size:14px;

  line-height:1.55;
}


.vstore-balance{
  min-width:190px;

  padding:14px 16px;

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

  border-radius:14px;

  background:
    var(--vb-surface-1);
}


.vstore-balance-label{
  color:var(--vb-muted);

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

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


.vstore-balance-value{
  margin-top:5px;

  color:var(--vb-text);

  font-size:21px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


.vstore-actions{
  display:flex;
  flex-wrap:wrap;

  gap:7px;
}


.vstore-stats{
  display:grid;

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

  gap:10px;
}


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

  font-size:11px;
  font-weight:800;
}


.vstore-stat-value{
  margin-top:5px;

  color:var(--vb-text);

  font-size:21px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


.vstore-toolbar{
  display:grid;

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

  gap:9px;
}


.vstore-grid{
  display:grid;

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

  gap:12px;
}


.vstore-item{
  display:flex;
  flex-direction:column;

  min-height:310px;
}


.vstore-item-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:10px;
}


.vstore-item-name{
  color:var(--vb-text);

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

  line-height:1.25;
}


.vstore-item-key{
  margin-top:5px;

  color:
    color-mix(
      in srgb,
      var(--vb-muted) 75%,
      transparent
    );

  font-size:11px;
}


.vstore-item-desc{
  min-height:62px;

  margin-top:14px;

  color:var(--vb-muted);

  font-size:13px;
  line-height:1.5;
}


.vstore-item-meta{
  display:grid;

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

  gap:8px;

  margin-top:14px;
}


.vstore-meta{
  padding:10px;

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

  border-radius:10px;

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


.vstore-meta-label{
  color:var(--vb-muted);

  font-size:11px;
}


.vstore-meta-value{
  margin-top:4px;

  color:var(--vb-text);

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

  font-variant-numeric:
    tabular-nums;
}


.vstore-price{
  margin-top:16px;

  color:var(--vb-text);

  font-size:24px;
  font-weight:950;

  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.vstore-price-sub{
  margin-top:3px;

  color:var(--vb-muted);

  font-size:11px;
}


.vstore-item-actions{
  display:grid;

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

  gap:8px;

  margin-top:auto;

  padding-top:16px;
}


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

  padding:36px 15px;

  color:var(--vb-muted);

  text-align:center;

  font-size:13px;
}


@media(max-width:1100px){

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

}


@media(max-width:760px){

  .vstore-stats,
  .vstore-grid,
  .vstore-toolbar{
    grid-template-columns:1fr;
  }


  .vstore-item{
    min-height:auto;
  }

}