/* Gift cards and the host pass (on top of occasion.css) */
.shop-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start; }
@media (max-width: 860px) { .shop-in { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.shop-text { display: grid; gap: 18px; }
.ticks { list-style: none; display: grid; gap: 8px; }
.ticks li::before { content: "✦ "; color: var(--gold); }
.shopcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.shopcard h2 { margin: 0; font-size: 30px; }
.shopcard label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.shopcard input, .shopcard textarea { width: 100%; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--rb); padding: 10px 12px; }
.shopcard input:focus, .shopcard textarea:focus { outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); border-color: var(--gold); }
.shopcard .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .shopcard .grid2 { grid-template-columns: 1fr; } }
.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.amounts button { border: 1px solid var(--line); background: var(--bg); border-radius: var(--rb); padding: 14px 8px; font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 600; cursor: pointer; color: var(--ink); }
.amounts button.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.err { color: #b4413f; font-weight: 600; font-size: 14px; margin: 0; }
.err:empty { display: none; }
.small { font-size: 12.5px; }