/* ==========================================================================
   Gift page
   ========================================================================== */
body { background: var(--champagne-100); }
.btn-row--center { justify-content: center; }

/* Header */
.ghead { background: var(--emerald-900); color: var(--ink-light); text-align: center; padding: calc(var(--nav-h) + var(--space-block)) 0 var(--space-section); }
.ghead__inner { max-width: 820px; }
.ghead__title { font-size: var(--fs-h2); font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 1.5rem; }
.ghead__title em { color: var(--champagne-500); }
.ghead__text { color: var(--ink-light-muted); max-width: 56ch; margin: 0 auto 2.25rem; }

.acct-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius-pill); background: rgba(28, 26, 23, 0.06); margin-bottom: 1.5rem; }
.acct-tabs[hidden] { display: none; }
.acct-tabs button { border: 0; background: transparent; padding: 0.45rem 1rem; border-radius: var(--radius-pill); font-family: var(--sans); font-size: 0.8rem; cursor: pointer; }
.acct-tabs button[aria-selected="true"] { background: var(--emerald-700); color: var(--ink-light); }

.copy {
  border: 1px solid rgba(28, 26, 23, 0.2); background: transparent; border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.copy:hover { border-color: var(--wine-700); color: var(--wine-700); }


/* List */
.list { padding: var(--space-section) 0; scroll-margin-top: var(--nav-h); }
.list__head { text-align: center; max-width: 720px; margin: 0 auto var(--space-block); }
.list__head .label { color: var(--wine-700); }
.list__title { font-size: clamp(2.2rem, 5vw, 3.75rem); color: var(--emerald-700); margin-bottom: 1rem; }
.list__title em { color: var(--wine-700); }
.list__text { color: var(--ink-dark-muted); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
.chip {
  border: 1px solid rgba(28, 26, 23, 0.18); background: transparent; color: var(--ink-dark);
  padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); font-size: 0.9rem; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { border-color: var(--emerald-700); }
.chip[aria-pressed="true"] { background: var(--emerald-700); border-color: var(--emerald-700); color: var(--ink-light); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.gift {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 24px; padding: 0.75rem 0.75rem 1.25rem;
  border: 1px solid rgba(201, 168, 106, 0.35);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.gift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(28, 26, 23, 0.1); }
.gift[hidden] { display: none; }
.gift__visual {
  aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--champagne-100), var(--champagne-300));
}
.gift__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.gift:hover .gift__visual img { transform: scale(1.03); }
.gift__visual .gift__icon {
  display: block; width: 38%; height: auto; aspect-ratio: 1; object-fit: contain;
  transition: transform 0.6s var(--ease-out);
}
.gift:hover .gift__visual .gift__icon { transform: scale(1.08) translateY(-2px); }
.gift__body { padding: 0 0.6rem; display: flex; flex-direction: column; flex: 1; }
.gift .label { color: var(--wine-700); margin-bottom: 0.4rem; }
.gift h3 { font-size: 1.75rem; color: var(--ink-dark); margin-bottom: 0.35rem; }
.gift__price { font-family: var(--sans); font-size: 0.9rem; color: var(--wine-700); margin: 0 0 0.5rem; }
.gift__note { font-size: 0.92rem; color: var(--ink-dark-muted); margin: 0 0 1.1rem; }
.gift__actions { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.gift__actions .btn { flex: 1; padding: 0.8rem 1rem; font-size: 0.9rem; }
.gift--other { background: var(--emerald-700); color: var(--ink-light); border-color: var(--emerald-700); }
.gift--other .gift__visual { background: radial-gradient(circle at 50% 40%, var(--emerald-500), var(--emerald-900)); }
.gift--other h3 { color: var(--ink-light); }
.gift--other .label { color: var(--champagne-500); }
.gift--other .gift__note { color: var(--ink-light-muted); }

/* Modals */
.modal__title { font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--emerald-700); margin: 0 0 0.5rem; padding-right: 2.5rem; }
.modal .label { color: var(--wine-700); }
.modal__intro { color: var(--ink-dark-muted); }
.pay__price { font-family: var(--sans); font-size: 0.85rem; color: var(--wine-700); margin: 0 0 1.25rem; }
.pay__acct { background: var(--surface); border: 1px solid rgba(201, 168, 106, 0.55); border-radius: 18px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.pay__bank { font-size: 0.9rem; color: var(--ink-dark-muted); margin: 0 0 0.35rem; }
.pay__num { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pay__number { font-family: var(--sans); font-size: clamp(1.2rem, 4.5vw, 1.5rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--emerald-700); word-break: break-all; }
.pay__ref { font-size: 0.8rem; color: var(--ink-dark-muted); margin: 0.6rem 0 0; }
.pay__ref span { font-family: var(--sans); color: var(--ink-dark); }
.pay__done { width: 100%; }
.pform { display: grid; gap: 0.4rem; }
.pform label { font-size: 0.85rem; font-weight: 500; color: var(--ink-dark); margin-top: 0.6rem; }
.pform input, .pform textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink-dark);
  background: #fff; border: 1px solid rgba(28, 26, 23, 0.18); border-radius: 12px; padding: 0.75rem 0.9rem;
}
.pform input:focus, .pform textarea:focus { border-color: var(--emerald-700); }
.pform .btn-row { margin-top: 1.25rem; }
.pthanks p { color: var(--ink-dark-muted); }
.pthanks__retry { font-size: 0.9rem; }
.pthanks .btn { margin-top: 0.5rem; }

.footer__thanks { font-family: var(--serif); font-size: 1.4rem; color: var(--ink-light); margin-bottom: 0.25rem; }