/* Base tokens + shared components */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --bg: #ffffff;
  --fg: #111;
  --muted: #6b7280;

  --brand: #0d6efd;
  --brand-ink: #fff;

  --danger: #dc3545;
  --danger-ink: #fff;

  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --radius: 16px;

  --thumb-size: 72px;
}

html,body{margin:0;padding:0}
body{font-family:var(--font-sans); color:var(--fg); background:var(--bg)}

.site-header{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:700; font-size:clamp(20px,3vw,28px);
  padding:18px 12px;
}
.header-logo{max-height:64px; height:64px; width:auto}

.site-nav{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  padding:8px 12px 16px;
}
.nav-button{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#f3f4f6; color:#111; text-decoration:none;
  transition:transform .06s ease;
}
.nav-button:hover{ transform:translateY(-1px) }
.active-nav-button{ background:var(--brand); color:var(--brand-ink) }

.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; border:none; cursor:pointer;
  background:#e5e7eb;
}
.button-primary{ background:var(--brand); color:var(--brand-ink) }
.button-secondary{ background:#e5e7eb; color:#111 }
.button-danger{ background:var(--danger); color:var(--danger-ink) }

.status-message{
  position:fixed; left:50%; top:14px; transform:translateX(-50%);
  background:#111; color:#fff; padding:8px 12px; border-radius:999px;
  box-shadow:var(--shadow); z-index:9999; display:none;
}

.scroll-to-top-btn{
  position:fixed; right:16px; bottom:16px; display:none;
  width:44px; height:44px; border-radius:999px; background:#111; color:#fff;
  align-items:center; justify-content:center; box-shadow:var(--shadow);
}

/* Thumbs used in both store+admin lists */
.thumb{ width:var(--thumb-size); height:var(--thumb-size); border-radius:10px; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.thumb.placeholder span{ font-size:10px; color:var(--muted); padding:6px; text-align:center; word-break:break-all }