.card{background:#fff;border-radius:12px;width:320px;padding:.5rem 1rem 1rem;transition:height .3s;box-shadow:0 2px 8px #0000001a}h4{text-align:center;color:#888;margin-top:1rem;margin-bottom:.4rem}.options{justify-content:space-around;margin-bottom:1.5rem;display:flex}label{cursor:pointer;align-items:center;gap:.4em;display:flex}input[type=radio],input[type=checkbox]{accent-color:#888}.form-section{opacity:1;transition:height .3s;overflow:hidden}.form-section.hidden{display:none}form{flex-direction:column;gap:.6rem;display:flex}input,select{font:inherit;border:1px solid #ccc;border-radius:6px;padding:.6rem}select{width:300px}input[type=text]{width:280px}input[type=checkbox]{width:auto}:root{view-transition-name:none}:root.demo{& .card{view-transition-name:card}& #card-content{view-transition-name:content;view-transition-group:contain}& #same-address{view-transition-name:same-address}& #cash-payer{view-transition-name:cash-payer}& #shipping-section{view-transition-name:shipping-section}& #pickup-section{view-transition-name:pickup-section}& #billing-section{view-transition-name:billing-section}& #billing-addr{view-transition-name:billing-addr}& #shipping-addr{view-transition-name:shipping-addr}& span.billing{view-transition-name:billing}& span.shipping{view-transition-name:shipping}&::view-transition-group(*){animation-duration:.25s}&::view-transition{pointer-events:none}&::view-transition-old(card){display:none}&::view-transition-new(card){width:100%;height:100%;animation-name:none}&::view-transition-group(content){overflow:clip}&.pickup::view-transition-old(*):only-child{animation-name:shift-left-out}&.pickup::view-transition-new(*):only-child{animation-name:shift-left-in}&.shipping::view-transition-old(*):only-child{animation-name:shift-right-out}&.shipping::view-transition-new(*):only-child{animation-name:shift-right-in}&.cash-payer::view-transition-old(*):only-child{transform-origin:top;animation-name:shrink}&.cash-payer::view-transition-new(*):only-child{transform-origin:top;animation-name:grow}&.same-addr-in::view-transition-old(*):only-child{animation-name:melt}&.same-addr-in::view-transition-old(shipping-addr):only-child,&.same-addr-in::view-transition-old(billing-addr):only-child{animation-name:-ua-view-transition-fade-out}&.same-addr-in::view-transition-new(shipping-addr):only-child,&.same-addr-in::view-transition-new(billing-addr):only-child{animation-name:-ua-view-transition-fade-in}&.same-addr-out::view-transition-new(*):only-child{animation-name:separate}&.same-addr-in::view-transition-image-pair(billing-section){animation-name:arc-in}&.same-addr-out::view-transition-image-pair(billing-section){animation-name:arc-out}&::view-transition-old(billing-addr):only-child,&::view-transition-old(shipping-addr):only-child{animation-name:-ua-view-transition-fade-out}&::view-transition-new(billing-addr):only-child,&::view-transition-new(shipping-addr):only-child{animation-name:-ua-view-transition-fade-in}}@keyframes shrink{to{opacity:0;scale:0}}@keyframes grow{0%{opacity:0;scale:0}}@keyframes shift-left-out{to{opacity:0;transform:translate(-50%)scale(.8)}}@keyframes shift-left-in{0%{opacity:0;transform:translate(50%)scale(.8)}}@keyframes shift-right-out{to{opacity:0;transform:translate(50%)scale(.8)}}@keyframes shift-right-in{0%{opacity:0;transform:translate(-50%)scale(.8)}}@keyframes arc-in{0%{opacity:1}50%{transform:translate(-150px)}to{opacity:.5}}@keyframes arc-out{0%{opacity:.5}50%{transform:translate(-150px)}to{opacity:1}}@keyframes melt{0%{opacity:1;transform:translate(0)}50%{transform:translate(150px,-50px)}to{opacity:.5;transform:translate(0)}}@keyframes separate{0%{opacity:.5;transform:translate(0)}50%{transform:translate(150px,-50px)}to{opacity:1;transform:translate(0)}}.grid-row:where(.astro-oyxzsftr){grid-template-columns:max-content;justify-content:space-around;display:grid}
