/* Gift card section — 3D card + request form */
.gift-section { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--c-bg), color-mix(in srgb, var(--c-accent) 9%, var(--c-bg))); }
.gift-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); align-items: center; }
.gift-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }

/* ---- the card ---- */
.gc-scene { width: min(100%, 500px); perspective: 1200px; position: relative; padding: 18px 0 34px; }
.gc-tilt { --rx: 0deg; --ry: 0deg; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); will-change: transform; animation: gcFloat 7s ease-in-out infinite; }
.gc-scene.is-active .gc-tilt { transition: transform .08s linear; animation: none; }
.gc-flip { position: relative; aspect-ratio: 1.586 / 1; transform-style: preserve-3d; transition: transform .9s var(--ease-out); cursor: pointer; }
.gc-flip.is-flipped { transform: rotateY(180deg); }
.gc-face {
  position: absolute; inset: 0; border-radius: 22px; padding: clamp(18px, 4.6vw, 30px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; color: #f6ecd8;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c-accent) 38%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 78%, #fff 8%) 0%, var(--c-primary) 45%, color-mix(in srgb, var(--c-primary) 70%, #000) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 40px 70px -28px rgba(10, 20, 12, .65), 0 14px 26px -14px rgba(10, 20, 12, .5);
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.gc-back { transform: rotateY(180deg); justify-content: flex-start; padding-top: 0; }
.gc-pattern { position: absolute; inset: 0; opacity: .18; pointer-events: none; background:
  radial-gradient(circle at 85% 20%, transparent 0 46px, var(--c-accent) 47px 48px, transparent 49px 66px, var(--c-accent) 67px 68px, transparent 69px 90px, var(--c-accent) 91px 92px, transparent 93px),
  radial-gradient(circle at 10% 110%, transparent 0 60px, var(--c-accent) 61px 62px, transparent 63px 90px, var(--c-accent) 91px 92px, transparent 93px); }
.gc-shine { position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: soft-light; transition: opacity .4s;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, .85), transparent 45%); opacity: .55; }
.gc-row, .gc-mid, .gc-back-body, .gc-strip { position: relative; }
.gc-front .gc-top, .gc-front .gc-mid, .gc-front .gc-bot { transform: translateZ(38px); }
.gc-front .gc-amount { transform: translateZ(22px); }
.gc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gc-logo { color: #f6ecd8; max-width: 55%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.gc-logo img { max-height: 44px; width: auto; }
.gc-logo .logo-text { color: #f6ecd8; }
.gc-title { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-accent); border: 1px solid color-mix(in srgb, var(--c-accent) 70%, transparent); padding: 5px 12px; border-radius: 30px; white-space: nowrap; }
.gc-mid { text-align: center; }
.gc-tagline { margin: 0 0 4px; font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 2.6vw, 1.25rem); color: #efe2c6; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.gc-amount { display: inline-flex; align-items: flex-start; gap: 4px; font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(3rem, 11vw, 5.2rem);
  background: linear-gradient(180deg, #fff3cf 0%, var(--c-accent) 48%, #8b6a36 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.gc-cur { font-size: .45em; margin-top: .18em; }
.gc-bot { align-items: flex-end; }
.gc-to small { display: block; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, #f6ecd8 65%, transparent); }
.gc-to strong { display: block; font-family: var(--font-display); font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 500; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-msg { margin: 0; max-width: 22ch; text-align: right; font-size: .78rem; line-height: 1.4; color: #e4d4b3; font-style: italic; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gc-strip { height: 46px; margin: 26px -30px 18px; background: rgba(0, 0, 0, .55); }
.gc-back-body { font-size: .86rem; line-height: 1.55; color: #eadfc6; }
.gc-back-body strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--c-accent); font-weight: 500; }
.gc-back-body p { margin: 6px 0 0; }
.gc-web { color: var(--c-accent); letter-spacing: .08em; font-size: .78rem; }
.gc-floor { position: absolute; left: 8%; right: 8%; bottom: 6px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(15, 25, 17, .42), transparent 70%); filter: blur(8px); animation: gcShadow 7s ease-in-out infinite; }
.gc-flip-btn { background: none; border: 1px solid var(--c-line); color: var(--c-muted); padding: 8px 18px; border-radius: 30px; font: inherit; font-size: .85rem; cursor: pointer; transition: all .25s; }
.gc-flip-btn:hover { color: var(--c-primary); border-color: var(--c-accent); }
@keyframes gcFloat { 0%, 100% { transform: rotateX(4deg) rotateY(-9deg) translateY(0); } 50% { transform: rotateX(-3deg) rotateY(9deg) translateY(-10px); } }
@keyframes gcShadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.88); opacity: .6; } }
.gc-flip.pop { animation: gcPop .45s var(--ease-out); }
@keyframes gcPop { 50% { transform: scale(1.035); } }

/* ---- panel & form ---- */
.gift-panel .section-head { margin-bottom: 18px; }
.gift-points { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.gift-points li { display: flex; gap: 10px; align-items: baseline; color: var(--c-muted); }
.gift-points i { color: var(--c-accent); font-size: .8rem; }
.gc-form { position: relative; display: grid; gap: 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(18px, 3.4vw, 30px); box-shadow: var(--shadow); }
.gc-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gc-form .field { display: grid; gap: 5px; }
.gc-form label, .gc-amounts legend { font-size: .82rem; letter-spacing: .04em; color: var(--c-muted); }
.gc-form input[type=text], .gc-form input[type=email], .gc-form input[type=tel], .gc-form textarea {
  width: 100%; font: inherit; font-size: .95rem; padding: 11px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; color: var(--c-text); }
.gc-form input:focus, .gc-form textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 20%, transparent); }
.gc-amounts { border: 0; padding: 0; margin: 0; min-width: 0; }
.gc-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-top: 8px; }
.gc-chip { position: relative; cursor: pointer; }
.gc-chip input { position: absolute; opacity: 0; inset: 0; }
.gc-chip-body { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; transition: all .25s var(--ease); text-align: center; }
.gc-chip-body strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; color: var(--c-primary); line-height: 1.1; }
.gc-chip-body small { font-size: .7rem; letter-spacing: .06em; color: var(--c-muted); }
.gc-chip:hover .gc-chip-body { border-color: var(--c-accent); transform: translateY(-2px); }
.gc-chip input:checked + .gc-chip-body { background: var(--c-primary); border-color: var(--c-primary); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--c-primary) 90%, transparent); }
.gc-chip input:checked + .gc-chip-body strong { color: var(--c-accent); }
.gc-chip input:checked + .gc-chip-body small { color: #efe2c6; }
.gc-chip input:focus-visible + .gc-chip-body { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gc-form-foot { display: grid; gap: 10px; justify-items: start; }
.gc-note { margin: 0; font-size: .8rem; color: var(--c-muted); }
.gc-form .field.has-error input, .gc-form .field.has-error textarea { border-color: #b8614b; }
.gc-form .field-error, .field-error-slot { color: #b8614b; font-size: .8rem; }
.gc-success { position: absolute; inset: 0; border-radius: inherit; background: var(--c-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 6px; }
.gc-success[hidden] { display: none; }
.gc-success i { font-size: 2rem; color: var(--c-accent); }
.gc-success h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }
.gc-success p { margin: 0; color: var(--c-muted); max-width: 36ch; }

@media (max-width: 900px) {
  .gift-grid { grid-template-columns: 1fr; }
  .gift-stage { position: static; }
}
@media (max-width: 520px) { .gc-form .form-row { grid-template-columns: 1fr; } .gc-strip { margin-inline: -18px; } }
@media (prefers-reduced-motion: reduce) { .gc-tilt, .gc-floor { animation: none; } .gc-flip { transition: none; } }