:root {
  --bg: #f7f4ee;
  --card: #fffaf2;
  --text: #221c16;
  --muted: #766a60;
  --line: #e6dccc;
  --accent: #9f6b35;
  --accent-dark: #6f4523;
  --danger: #8a2d2d;
  --shadow: 0 18px 40px rgba(44, 32, 20, 0.10);
  --radius: 22px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at top, #fff7ea 0, var(--bg) 42%, #efe7dc 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
.hero { padding: 50px 18px 30px; text-align: center; }
.hero__inner { max-width: 780px; margin: 0 auto; }
h1 {
  margin: 0;
  font-size: clamp(2.25rem, 8vw, 4.75rem);
  letter-spacing: -0.06em;
  line-height: .95;
}
.wrap { width: min(1180px, calc(100% - 28px)); margin: 0 auto 70px; }
button, a.shopButton { font: inherit; }
.status { margin: 26px 0; color: var(--muted); text-align: center; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { overflow: hidden; display: flex; flex-direction: column; background: var(--card); border: 1px solid rgba(142, 115, 83, .18); border-radius: var(--radius); box-shadow: var(--shadow); }
.imageLink { color: inherit; text-decoration: none; }
.imageWrap { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #eadfce, #fffaf2); display: grid; place-items: center; }
.productImage { width: 100%; height: 100%; object-fit: contain; padding: 18px; mix-blend-mode: multiply; }
.cardBody { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.shop { margin: 0 0 5px; color: var(--accent-dark); font-size: .83rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.title {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
  min-height: 2.8em;
  font-weight: 800;
}
.price { margin: 13px 0 0; font-weight: 900; font-size: 1.05rem; }
.actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: auto; padding-top: 18px; }
a.shopButton, .buyButton, .releaseButton { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border-radius: 12px; border: 0; padding: 10px 13px; text-decoration: none; font-weight: 850; cursor: pointer; }
a.shopButton { background: var(--text); color: #fff; }
.buyButton { background: var(--accent); color: #fff; }
.buyButton:disabled { background: #cfc6b8; color: #5f564d; cursor: not-allowed; opacity: 1; }
.releaseButton { display: none; background: #eee1d0; color: var(--danger); }
.badge { position: absolute; top: 13px; right: 13px; display: none; padding: 7px 10px; border-radius: 999px; color: #fff; background: var(--danger); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.boughtInfo { display: none; margin: 12px 0 0; color: var(--danger); font-size: .9rem; font-weight: 750; }
.card.is-bought { opacity: .72; }
.card.is-bought .boughtBadge { display: inline-flex; }
.card.is-bought .buyButton { display: inline-flex; background: #cfc6b8; color: #5f564d; cursor: not-allowed; }
body.is-admin .card.is-bought .releaseButton { display: inline-flex; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hero { padding-top: 38px; } .grid { grid-template-columns: 1fr; } }
.imagePlaceholder { color: var(--muted); font-weight: 800; opacity: .75; }
.personNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.personTab {
  min-width: 96px;
  min-height: 42px;
  border: 1px solid rgba(142, 115, 83, .28);
  border-radius: 999px;
  background: #fffaf2;
  color: var(--accent-dark);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(44, 32, 20, 0.06);
}
.personTab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
@media (max-width: 420px) {
  .personNav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personTab { width: 100%; }
}

.imageLink.is-disabled, a.shopButton.is-disabled { pointer-events: none; cursor: default; }
.card.is-bought a.shopButton.is-disabled { background: #cfc6b8; color: #5f564d; }
.linkNotice[hidden] { display: none; }
.linkNotice { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.linkNotice__backdrop { position: absolute; inset: 0; background: rgba(34, 28, 22, .58); }
.linkNotice__dialog { position: relative; width: min(480px, 100%); padding: 24px; border-radius: 18px; background: var(--card); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.linkNotice__dialog h2 { margin: 0 0 10px; font-size: 1.35rem; }
.linkNotice__dialog p { margin: 0; color: var(--text); }
.linkNotice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.linkNotice__cancel, .linkNotice__confirm { min-height: 44px; border: 0; border-radius: 12px; padding: 10px 13px; font: inherit; font-weight: 850; cursor: pointer; }
.linkNotice__cancel { background: #eee1d0; color: var(--text); }
.linkNotice__confirm { background: var(--accent); color: #fff; }
body.has-link-notice { overflow: hidden; }
@media (max-width: 420px) { .linkNotice__actions { grid-template-columns: 1fr; } }