/* =========================================================================
   Isla Noctura — shop. Living 3D cards over the moonlit-night language.
   ========================================================================= */

.shop-sec-head { margin-top: 42px; }
.shop-sec-head:first-child { margin-top: 0; }

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.item {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .16s, transform .16s;
}
.item:hover { border-color: var(--line-2); transform: translateY(-1px); }

.item-body { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px 14px; }

.item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-top h3 { font-size: 16.5px; }

.pill {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--silver-dim);
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}

.item-tag {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--line-2); color: var(--silver-dim);
}
.item-tag.rare { color: var(--warn); border-color: rgba(227,183,120,.4); }

.item-meta { font-size: 13px; color: var(--silver-dim); margin: 0; }

.item-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 4px;
}
.item-price { font: 600 15.5px/1 var(--ui); color: var(--moon); white-space: nowrap; }
.item-price.price-ok  { color: var(--live); }
.item-price.price-bad { color: var(--down); }
.item-buy { font-size: 12px; color: var(--silver-mut); text-align: right; }
.item-buy code {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent-hi);
  background: var(--surface-3); padding: 2px 5px; border-radius: 4px;
}

/* ---------- the living stage ---------- */
.shopview {
  position: relative; height: 218px; flex: none;
  background:
    radial-gradient(70% 58% at 50% 78%, rgba(58,84,108,.28), transparent 72%),
    linear-gradient(180deg, var(--bg-2), var(--ink));
  border-bottom: 1px solid var(--line);
}
.shopview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* idle = waiting for the observer; a calm shore, never a blank */
.shopview[data-view="idle"]::after,
.shopview[data-view="missing"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: radial-gradient(circle at 38% 34%, rgba(159,182,201,.25), transparent 62%);
}
.shopview[data-view="missing"]::before {
  content: "preview unavailable";
  position: absolute; left: 0; right: 0; top: calc(50% + 34px);
  text-align: center;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--silver-mut);
}

.shopview[data-view="gated"] { display: grid; place-items: center; }
.shopview-gate {
  display: inline-block; max-width: 26ch; text-align: center;
  font: 600 12.5px/1.5 var(--ui); color: var(--silver-dim);
  padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: rgba(12,21,33,.72);
}
.shopview-gate:hover { color: var(--moon); border-color: var(--stone); }

/* ---------- admin price editing ---------- */
.price-edit {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-left: -4px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 6px; color: var(--silver-mut); cursor: pointer;
}
.price-edit:hover { color: var(--moon); border-color: var(--stone); }
.price-input {
  width: 108px; padding: 5px 8px;
  background: var(--surface-3); color: var(--moon);
  border: 1px solid var(--stone); border-radius: 6px;
  font: 600 14px/1 var(--ui);
}
.admin-note { margin-top: 26px; font-size: 13px; }

/* the price sits with its pencil */
.item-foot { flex-wrap: wrap; }
.item-foot .item-price + .price-edit { flex: none; }

@media (max-width: 640px) {
  .items { grid-template-columns: 1fr 1fr; }
  .shopview { height: 172px; }
}
@media (max-width: 460px) {
  .items { grid-template-columns: 1fr; }
}