/* Shop (coming soon): the announcement is a note pinned to a cork board, with a "coming soon" stamp. */
.p-shop main > .section { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 72px); }
.p-shop .content-card--gold {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px) clamp(30px, 4vw, 40px);
  background: #fbf0cf;
  border: 0;
  border-radius: 6px;
  rotate: -1deg;
  box-shadow: 0 0 0 clamp(14px, 2.4vw, 22px) #ecd9ae, 0 0 0 calc(clamp(14px, 2.4vw, 22px) + 8px) #c99a45, 0 30px 44px -26px rgba(60, 40, 10, .6);
}
.p-shop .content-card--gold::before { content: ""; position: absolute; top: -12px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 32% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }
.p-shop .content-card--gold::after { content: "Coming soon"; position: absolute; right: -14px; top: 18px; padding: 6px 14px; border: 3px double var(--brick-ink); border-radius: 8px; color: var(--brick-ink); font: 800 14px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; rotate: 8deg; background: rgba(255, 252, 245, .85); }
.p-shop .content-card--gold h2 { font-family: var(--f-hand); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); color: var(--gold-dark); }
@media (prefers-reduced-motion: no-preference) {
  .p-shop .content-card--gold { animation: osv-shop-pin 1s .2s var(--ease) both; transform-origin: 50% -10px; }
  @keyframes osv-shop-pin { 0% { transform: translateY(-16px) rotate(-4deg); opacity: 0; } 60% { transform: rotate(2deg); opacity: 1; } 100% { transform: none; } }
}
@media (max-width: 560px) { .p-shop .content-card--gold::after { right: 8px; top: -30px; } }