/* A small pile of playable photo prints, shared by every checkout. */
body.has-checkout-examples #checkout #show-example{display:none!important}
body.has-checkout-examples #checkout .checkout-right{display:grid;grid-template-columns:minmax(0,1fr)}
body.has-checkout-examples #checkout .checkout-example-heading{display:block;grid-column:1;grid-row:1}
body.has-checkout-examples #checkout .checkout-right>h2:not(.checkout-example-heading){grid-column:1;grid-row:3;max-width:none;margin:4px 0 18px}
.checkout-example-cards{grid-column:1/-1;grid-row:2;display:flex;align-items:center;isolation:isolate;min-width:0;padding:18px 9px 22px;margin:0 0 4px}
.checkout-example-card{position:relative;flex:0 0 calc((100% + 48px)/5);max-width:110px;min-width:0;padding:5px 5px 7px;background:#fffdf7;border:1px solid #e5d8c6;border-radius:2px;box-shadow:1px 3px 5px #48382729;transform:translateY(var(--photo-offset)) rotate(var(--photo-tilt));cursor:pointer;transition:transform .16s,box-shadow .16s;color:#4b4245}
.checkout-example-card+.checkout-example-card{margin-left:-12px}
.checkout-example-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.checkout-example-envelope{position:absolute;left:0;right:0;bottom:-4px;height:49%;pointer-events:none;background-position:center bottom;background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 -1px 1px #45352118)}
.checkout-example-card-caption{display:flex;align-items:center;justify-content:center;min-height:30px;padding-top:5px;font-size:11px;line-height:1.15;text-align:center;overflow-wrap:normal}
.checkout-example-card-caption{position:relative;z-index:1}
.checkout-example-play{position:absolute;top:35%;left:calc(50% - 14px);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fffef2ed;color:#41343b;font-size:12px;box-shadow:0 1px 5px #0003;padding-left:2px}
.checkout-example-card:focus-visible{z-index:6;outline:2px solid #e63372;outline-offset:3px;transform:translateY(-6px) rotate(0deg)}
@media(hover:hover){.checkout-example-card:hover{z-index:6;transform:translateY(-7px) rotate(0deg);box-shadow:2px 7px 12px #48382735}}
body.has-checkout-examples #example-dialog{width:min(420px,calc(100vw - 24px));background:#fffaf2;border-radius:8px;color:#30363a;overflow:auto}
body.has-checkout-examples #example-dialog video{width:100%;height:min(70dvh,630px);max-height:calc(90dvh - 70px);object-fit:contain;background:#16111f}
.checkout-example-caption{padding:14px 16px;font-size:14px;line-height:1.4;font-weight:600}
@media(max-width:800px){
 body.has-checkout-examples #checkout .checkout-right>h2:not(.checkout-example-heading){margin:0 0 13px}
 .checkout-example-cards{padding:17px 5px 20px}
 .checkout-example-card{flex-basis:calc((100% + 32px)/5);padding:3px 3px 5px}
 .checkout-example-card+.checkout-example-card{margin-left:-8px}
 .checkout-example-card-caption{font-size:10px;min-height:28px}
 .checkout-example-play{width:24px;height:24px;left:calc(50% - 12px);font-size:10px}
}
@media(prefers-reduced-motion:reduce){.checkout-example-card{transition:none}}
/* Desktop keeps the original gift above the title; mobile uses its inline copy. */
.plan-video-group{white-space:nowrap}
body.has-checkout-examples #checkout .plan h3{padding-right:0}
body.has-checkout-examples #checkout .plan h3 .checkout-plan-art{display:none}
body.has-checkout-examples #checkout .plan .radio-dot::after{position:absolute;top:50%;left:50%;width:60%;height:60%;margin:0;transform:translate(-50%,-50%)}
@media(max-width:800px){
 body.has-checkout-examples #checkout .checkout-left{padding:12px 16px 10px}
 body.has-checkout-examples #checkout-title{font-size:15px;line-height:1.25}
 body.has-checkout-examples #checkout .checkout-paper-bow{width:34px;height:34px;right:41px;top:3px}
 body.has-checkout-examples #checkout .person{gap:11px;margin:12px 0 9px}
 body.has-checkout-examples #checkout .person img{width:54px;height:72px;border-bottom-width:8px}
 body.has-checkout-examples #checkout .person h2{font-size:16px;line-height:1.2}
 body.has-checkout-examples #checkout .person .quote{font-size:11px;line-height:1.35;max-height:45px;margin-top:4px}
 body.has-checkout-examples #checkout .voice-preview{margin:6px 0;gap:10px}
 body.has-checkout-examples #checkout .voice-heading{font-size:12px;line-height:1.25}
 body.has-checkout-examples #checkout .voice-play{width:40px;height:40px;min-width:40px}
 body.has-checkout-examples #checkout .checkout-text-actions{margin-top:5px}
 body.has-checkout-examples #checkout .text-action{font-size:12px}
 body.has-checkout-examples #checkout .checkout-right{padding:12px 16px 18px}
 body.has-checkout-examples #checkout .checkout-example-heading{font-size:12px}
 .checkout-example-cards{padding:11px 5px 14px;margin-bottom:0}
 .checkout-example-card{max-width:64px;padding:3px 3px 4px}
 .checkout-example-card img{aspect-ratio:1/1.08}
 .checkout-example-card-caption{font-size:9px;min-height:23px;padding-top:3px}
 .checkout-example-play{width:22px;height:22px;left:calc(50% - 11px);top:29%;font-size:9px}
 body.has-checkout-examples #checkout .checkout-right>h2:not(.checkout-example-heading){font-size:17px;line-height:1.2;margin:8px 0 15px}
 body.has-checkout-examples #checkout .plans{gap:9px}
 body.has-checkout-examples #checkout .plan{min-height:154px;padding:9px 10px 8px}
 body.has-checkout-examples #checkout .plan h3{font-size:14px;line-height:1.15;padding-right:13px}
 body.has-checkout-examples #checkout .plan>.checkout-plan-art{display:none}
 body.has-checkout-examples #checkout .plan .plan-name-group{display:block;margin-bottom:3px}
 body.has-checkout-examples #checkout .plan .plan-video-group{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
 body.has-checkout-examples #checkout .plan h3 .checkout-plan-art{display:block;flex:0 0 27px;width:27px;height:23px;margin:0}
 body.has-checkout-examples #checkout .plan .radio-dot{width:14px;height:14px;top:10px;right:8px}
 body.has-checkout-examples #checkout .plan strong{font-size:25px;line-height:1.1;margin:7px 0 2px}
 body.has-checkout-examples #checkout .plan small{font-size:15px}
 body.has-checkout-examples #checkout .plan p,body.has-checkout-examples #checkout .plan del{font-size:10px;line-height:1.3;margin-top:2px;margin-bottom:2px}
 body.has-checkout-examples #checkout .plan .plan-foot{font-size:9px;line-height:1.3;padding-top:5px;margin-top:auto}
 body.has-checkout-examples #checkout #buy-generate{margin-top:12px;height:48px;min-height:46px;padding:9px 8px;font-size:14px}
 body.has-checkout-examples #checkout .payment-caption{font-size:10px;margin-top:7px}
}
@media(max-width:360px){
 body.has-checkout-examples #checkout .checkout-left,body.has-checkout-examples #checkout .checkout-right{padding-left:12px;padding-right:12px}
 body.has-checkout-examples #checkout .plan h3{font-size:13px;padding-right:10px}
 body.has-checkout-examples #checkout .plan h3 .checkout-plan-art{flex-basis:24px;width:24px;height:21px;margin:0}
 body.has-checkout-examples #checkout #buy-generate{font-size:12px}
}
/* Compact spacing for short phones; longer/error states remain scrollable. */
@media(max-width:800px) and (max-height:620px){
 body.has-checkout-examples #checkout .checkout-left{padding-top:10px;padding-bottom:7px}
 body.has-checkout-examples #checkout .person{margin:9px 0 6px;gap:9px}
 body.has-checkout-examples #checkout .person img{width:48px;height:62px}
 body.has-checkout-examples #checkout .person h2{font-size:14px}
 body.has-checkout-examples #checkout .person .quote{max-height:30px;font-size:10px}
 body.has-checkout-examples #checkout .voice-heading{font-size:11px;line-height:1.2}
 body.has-checkout-examples #checkout .voice-info .voice-promise,body.has-checkout-examples #checkout #voice-status{font-size:9px;line-height:1.25;margin-top:3px}
 body.has-checkout-examples #checkout .voice-preview{margin:4px 0}
 body.has-checkout-examples #checkout .text-action{font-size:11px}
 body.has-checkout-examples #checkout .checkout-right{padding-top:9px}
 .checkout-example-cards{padding-top:6px;padding-bottom:7px}
 .checkout-example-card img{aspect-ratio:1/.88}
 body.has-checkout-examples #checkout .plan{min-height:138px;padding-top:7px;padding-bottom:7px}
 body.has-checkout-examples #checkout .plan strong{font-size:23px;margin-top:5px}
 body.has-checkout-examples #checkout #buy-generate{padding-top:9px;padding-bottom:9px;margin-top:10px;height:44px;min-height:42px}
 body.has-checkout-examples #checkout #buy-generate .gift-button-icon{width:24px;height:24px;flex-basis:24px}
}