/* ====== Design tokens (defaults) ====== */
:root{
  --bg: #0b0f12;
  --surface: #0f1419;
  --surface-2: #0c1217;
  --text: #eaf2f8;
  --muted: #9fb1c2;
  --accent: #23aaff;          /* per-merchant overridable */
  --accent-contrast: #001423;
  --border: #1f2a33;
  --radius: 14px;
  --gap: 14px;
  --shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* ====== Base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 110% -10%, rgba(35,170,255,.06), transparent 60%),
              radial-gradient(1000px 700px at -10% 110%, rgba(35,170,255,.05), transparent 60%),
              linear-gradient(180deg,#0a0f13,#070a0d);
  color: var(--text);
}

/* Utilities */
.container{ max-width: 1100px; padding: 18px; margin: 0 auto; }
.grid{ display:grid; gap: var(--gap); }
.grid.products{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.row{ display:flex; gap: var(--gap); flex-wrap:wrap; }
.hidden{ display:none !important; }
.truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ====== Top bar / nav ====== */
.shop-topbar{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  background: linear-gradient(180deg, rgba(35,170,255,.07), transparent);
  border-bottom:1px solid var(--border);
  position: sticky; top:0; z-index:10; backdrop-filter: blur(3px);
}
.shop-name{ font-weight:700; letter-spacing:.5px; }
.shop-actions{ margin-left:auto; display:flex; gap:8px; }

/* ====== Buttons ====== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; transition: filter .2s, box-shadow .2s, transform .03s;
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 0 0 6px rgba(35,170,255,.10); }
.btn:active{ transform: translateY(1px); }
.btn.accent{
  background: var(--accent); color: var(--accent-contrast);
  border-color: color-mix(in srgb, var(--accent), black 20%);
}

/* ====== Hero / banner ====== */
.shop-hero{
  aspect-ratio: 16 / 6; border-radius: var(--radius);
  border:1px solid var(--border); overflow: hidden;
  background: linear-gradient(180deg, #0d141b, #0a1016);
  box-shadow: var(--shadow);
  display:grid; place-items:center;
}
.shop-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-hero-fallback{
  display:grid; place-items:center; text-align:center; padding:24px;
  color:#cfe7ff;
}
.shop-title{ font-size: clamp(1.3rem, 2.5vw, 2rem); margin:0 0 6px; }
.shop-sub{ margin:0; color: var(--muted); }

/* ====== Sections ====== */
.section{ margin-top: 18px; }
.section h2{
  font-size:1rem; letter-spacing:.6px; margin:0 0 10px; color:#d9f0ff;
  text-shadow:0 0 10px rgba(35,170,255,.25);
}

/* ====== Product card ====== */
.product-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column;
}
.product-card .media{ aspect-ratio: 4 / 3; background: var(--surface-2); }
.product-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card .body{ padding:12px; display:grid; gap:6px; }
.product-title{ font-weight:600; }
.product-meta{ font-size:.92rem; color: var(--muted); }
.price{ font-weight:700; }
.actions{ margin-top:6px; display:flex; gap:8px; }

/* ====== Empty / errors ====== */
.empty{
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding:14px; color: var(--muted);
  background: linear-gradient(180deg, rgba(35,170,255,.03), transparent);
}

/* ====== Responsive tweaks ====== */
@media (max-width: 680px){
  .shop-hero{ aspect-ratio: 16 / 9; }
  }