.gift-head { padding-bottom: 62px; }
.gift-section { padding-top: 24px; }
.gift-flow-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 34px; align-items: start; max-width: 1120px; }
.gift-form-card { border: 1px solid var(--border-faint); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(30,24,16,0.74), rgba(23,18,10,0.42)); padding: 30px; box-shadow: var(--shadow-card); }
.gift-step { font-family: var(--font-display); font-size: 22px; color: #fbf1de; margin-bottom: 22px; }
.gift-step-contact { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--border-faint); }
.gift-field { display: block; margin-bottom: 18px; }
.gift-field > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.gift-field input, .gift-field textarea { width: 100%; border: 1px solid var(--border-faint); border-radius: 11px; background: rgba(12,9,5,.72); color: var(--text-primary); padding: 13px 14px; font: 15px var(--font-body); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.gift-field input:focus, .gift-field textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-faint); }
.gift-field textarea { resize: vertical; min-height: 88px; }
.gift-amount-wrap { display: flex; align-items: center; border: 1px solid var(--border-faint); border-radius: 11px; background: rgba(12,9,5,.72); overflow: hidden; }
.gift-amount-wrap > span { padding-left: 14px; color: var(--ember-bright); font-weight: 700; }
.gift-amount-wrap input { border: 0; background: transparent; box-shadow: none !important; }
.gift-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 20px; }
.gift-presets button { min-height: 44px; border: 1px solid var(--border-faint); border-radius: 999px; background: transparent; color: var(--text-muted); padding: 8px 12px; font: 700 12px var(--font-body); cursor: pointer; }
.gift-presets button:hover, .gift-presets button.is-active { border-color: var(--ember); color: var(--ember-bright); background: var(--ember-faint); }
.gift-payment-note { font-size: 13px; line-height: 1.65; color: var(--text-muted); margin: 24px 0 18px; }
.gift-submit { width: 100%; }
.gift-error { min-height: 20px; color: var(--state-danger); font-size: 13px; margin-bottom: 8px; }
.gift-success { margin-top: 22px; padding: 22px; border: 1px solid rgba(106,170,96,.35); border-radius: 12px; background: rgba(106,170,96,.08); }
.gift-success-title { color: var(--state-success); font-weight: 700; margin-bottom: 8px; }
.gift-success p { color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.gift-success .btn { width: 100%; }
.gift-preview-column { position: sticky; top: 104px; }
.gift-preview-label { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.gift-preview { position: relative; container-type: inline-size; aspect-ratio: 195 / 90; border: clamp(10px,1.4vw,17px) solid #211813; border-radius: 2px; padding: 0; color: #2b211b; background-color: #f1e4d1; background-image: repeating-linear-gradient(0deg,rgba(166,104,61,.025) 0,rgba(166,104,61,.025) 1px,transparent 1px,transparent 4px); box-shadow: inset 0 0 0 2px #a85e31,inset 0 0 0 7px #f1e4d1,inset 0 0 0 8px rgba(168,94,49,.55),0 28px 80px rgba(0,0,0,.48); overflow: hidden; }
.gift-preview::before,.gift-preview::after { content:""; position:absolute; width:clamp(90px,28cqw,190px); height:clamp(90px,28cqw,190px); border:1px solid rgba(168,94,49,.23); border-radius:44% 56% 52% 48%; pointer-events:none; }
.gift-preview::before { left:-105px; bottom:-70px; box-shadow:0 0 0 12px rgba(168,94,49,.12),0 0 0 25px rgba(168,94,49,.09),0 0 0 40px rgba(168,94,49,.07); }
.gift-preview::after { right:-88px; top:-105px; box-shadow:0 0 0 12px rgba(168,94,49,.12),0 0 0 25px rgba(168,94,49,.09),0 0 0 40px rgba(168,94,49,.07); }
.gift-preview-brand { position:absolute; top:7.5%; left:0; right:0; color:#9d542b; font:500 clamp(12px,3.5cqw,25px) var(--font-body); letter-spacing:.22em; line-height:1; text-align:center; }
.gift-preview-volcano { position:absolute; top:15%; left:50%; transform:translateX(-50%); width:min(36%,220px); height:auto; margin:0; overflow:visible; }
.gift-preview-volcano path { fill:none; stroke:#a85e31; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.gift-preview-title { position:absolute; top:37.5%; left:0; right:0; font:500 clamp(8px,2cqw,14px) var(--font-body); text-transform:uppercase; letter-spacing:.25em; line-height:1; text-align:center; white-space:nowrap; }
.gift-preview-title::after { content:"◇"; display:block; color:#a85e31; font-size:10px; letter-spacing:0; text-align:center; margin-top:2px; }
.gift-preview-message { position:absolute; top:46.5%; left:50%; transform:translateX(-50%); width:80%; color:#2a211c; font:400 clamp(13px,4.2cqw,28px) var(--font-display); line-height:.94; margin:0; text-align:center; }
.gift-preview-details { position:absolute; top:65.5%; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:1fr; gap:2px; width:70%; margin:0; }
.gift-preview-details > div { display:grid; grid-template-columns:90px 1fr; align-items:end; }
.gift-preview-details span { color:#302720; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(6px,1.45cqw,10px); font-weight:700; }
.gift-preview-details strong { display:block; border-bottom:1px solid #493e36; padding:0 8px 2px; font:400 clamp(9px,2.4cqw,16px) var(--font-body); line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gift-preview-code { position:absolute; top:82%; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:90px 1fr; align-items:center; width:70%; margin:0; text-transform:uppercase; }
.gift-preview-code > span { font-size:clamp(6px,1.45cqw,10px); font-weight:700; letter-spacing:.18em; }
.gift-preview-code > strong { border:1px solid #a85e31; padding:clamp(3px,.75cqw,6px) 8px; text-align:center; font-size:clamp(6px,1.45cqw,10px); font-weight:500; line-height:1; letter-spacing:.12em; color:#80644f; }
.gift-preview-url { position:absolute; left:0; right:0; bottom:3%; margin:0; color:#9d542b; font-size:clamp(6px,1.35cqw,10px); line-height:1; letter-spacing:.2em; text-align:center; }
.gift-preview-note { position:absolute; left:5%; bottom:3%; max-width:22%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#80644f; font:italic clamp(6px,1.15cqw,8px) var(--font-display); }
.gift-how { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.gift-how div { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border-faint); border-radius: 10px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.gift-how strong { color: var(--ember-bright); }
@media (max-width: 900px) { .gift-flow-grid { grid-template-columns: 1fr; } .gift-preview-column { position: static; order: -1; width:min(100%,760px); margin-inline:auto; } }
@media (max-width: 560px) { .gift-form-card { padding: 22px 18px; } .gift-preview { aspect-ratio:1.85/1; border-width:10px; } .gift-preview-details,.gift-preview-code { width:82%; } .gift-preview-details > div,.gift-preview-code { grid-template-columns:64px 1fr; } .gift-how { grid-template-columns: 1fr; } .gift-presets button { flex: 1; } }
@media (max-width: 350px) { .gift-preview-code { top:85.5%; } .gift-preview-code > strong { padding:2px 6px; } .gift-preview-url,.gift-preview-note { bottom:1%; } }