/* ═══════════ DER SHOP — Auslage von morgen + Naan-Cap-Studio ═══════════ */

.shop-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.shop-note { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 30px; }
.shop-note strong { color: var(--gold); font-family: var(--marker); font-weight: 400; }

.price { margin-top: 14px; font-family: var(--serif); color: var(--gold-hi); font-size: .95rem; letter-spacing: .06em; }
.price a { text-decoration: none; }
.price a:hover { text-decoration: underline; }
.price-note { color: var(--muted); font-family: var(--sans); font-size: .78rem; letter-spacing: 0; }

.topic-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; }
.topic-chips li {
  border: 1px dashed var(--gold-lo); border-radius: 99px; padding: 4px 11px;
  font-size: .72rem; color: var(--muted);
}

/* ─── Naan-Cap-Studio ─── */
.naancap-studio {
  margin-top: 74px; text-align: center;
  border: 1px solid var(--line); border-radius: 26px;
  padding: 46px 24px 40px;
  background: linear-gradient(170deg, rgba(16, 14, 8, .9), rgba(13, 11, 7, .95));
  position: relative; overflow: hidden;
}
.naancap-studio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 34% at 50% -6%, rgba(212, 175, 55, .1), transparent 60%);
}
.naancap-studio > * { position: relative; z-index: 1; }
.studio-title { font-family: var(--serif); letter-spacing: .1em; color: var(--gold-hi); font-size: 1.2rem; }
.studio-sub { color: var(--muted); font-size: .9rem; margin-top: 10px; }

#cap-svg { width: min(82vw, 340px); margin: 10px auto 0; display: block; color: var(--gold); }
#cap-svg path, #cap-svg circle { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.capline { stroke-width: 3; }
.capstamp { stroke-width: 1.9; opacity: .85; }

.hole { stroke-width: 2; stroke-dasharray: 3 5; opacity: .3; transition: opacity .35s; }
.hole.on, .hole.always { stroke-dasharray: none; opacity: 1; }

.zopf path {
  stroke-width: 2.6;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.05s cubic-bezier(.45, 0, .2, 1);
}
.zopf.on path { stroke-dashoffset: 0; }

.studio-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.zopf-chip {
  font: inherit; font-size: .78rem; letter-spacing: .1em;
  border: 1px solid var(--gold-lo); color: var(--gold); background: none;
  border-radius: 99px; padding: 9px 18px; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.zopf-chip:hover { border-color: var(--gold); }
.zopf-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.zopf-chip.active {
  background: rgba(212, 175, 55, .16); color: var(--gold-hi); border-color: var(--gold);
  box-shadow: 0 0 18px rgba(226, 184, 62, .2);
}
.zopf-chip.locked { cursor: default; background: rgba(212, 175, 55, .08); color: var(--gold-hi); border-style: dashed; }

.studio-name {
  margin-top: 22px; font-family: 'Vibes', cursive; font-size: 1.6rem; color: var(--gold);
  transform: rotate(-1.4deg); text-shadow: 0 0 18px rgba(226, 184, 62, .4);
  min-height: 1.4em;
}
.studio-foot { color: var(--muted); font-size: .78rem; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .zopf path, .hole, .zopf-chip { transition: none; }
}