#gift-detail.gift-flip-modal{position:fixed;inset:0;margin:auto;width:min(520px,calc(100% - 32px));max-width:520px;height:fit-content;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:transparent;overflow:visible;perspective:1200px}
.gift-flip-stage{position:relative;transform-style:preserve-3d;transform-origin:center}
.gift-flip-back{position:relative;background:var(--gift-paper,#FFF6EA);border:1px solid #dcc8a5;border-radius:16px;padding:26px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gift-flip-back .sheet-grip{display:none}.gift-flip-back .detail-symbol{font-size:48px}.gift-flip-back .dialog-header{align-items:center}
.gift-flip-stage>.gift-flip-front{position:absolute;inset:0;margin:0;width:100%;height:100%;border-radius:16px;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;background:var(--gift-paper)}
.gift-flip-front[hidden]{display:none!important}.gift-flip-back .close-button{flex-shrink:0}
@media(max-width:700px){.gift-flip-back{padding:20px}#gift-detail.gift-flip-modal h2{font-size:30px}}

/* Fade the scrim independently so its opacity follows both sides of the flip. */
#gift-detail.gift-flip-modal::backdrop{opacity:1;transition:opacity var(--gift-backdrop-duration,450ms) cubic-bezier(.45,0,.55,1)}
#gift-detail.gift-flip-modal.gift-backdrop-enter::backdrop,
#gift-detail.gift-flip-modal.gift-backdrop-exit::backdrop{opacity:0}
@media(prefers-reduced-motion:reduce){#gift-detail.gift-flip-modal::backdrop{transition-duration:100ms}}

#gift-detail.gift-flip-modal[open]{animation:none}