/* Shared by the actual storefront popup and its admin preview. */
dialog.promo-popup{position:fixed;inset:0;box-sizing:border-box;width:min(var(--popup-width,480px),calc(100vw - 48px),calc((100dvh - 64px)*var(--popup-ratio,1)));max-width:none;max-height:calc(100dvh - 64px);height:fit-content;margin:auto;padding:0;border:0;border-radius:16px;background:transparent;color:#fff;overflow:visible;box-shadow:none}
dialog.promo-popup[open]{animation:promoPopupIn .3s cubic-bezier(.2,.75,.2,1) both}
.promo-popup::backdrop{background:rgba(24,29,20,.57);backdrop-filter:blur(2px)}
.promo-popup .promo-popup-image{display:block;width:100%;height:auto;max-height:calc(100dvh - 64px);object-fit:contain;border-radius:16px;box-shadow:0 18px 65px #1118}
.promo-popup .promo-popup-link{display:block;border-radius:16px;outline-offset:5px}
.promo-popup .promo-popup-close{position:absolute;z-index:2;top:-15px;right:-15px;display:grid;place-items:center;width:38px;height:38px;padding:8px;border:2px solid #fff;border-radius:50%;background:#354024c9;color:#fff;cursor:pointer;box-shadow:0 3px 12px #0003;transition:background .18s,transform .18s}
.promo-popup .promo-popup-close:hover{background:#354024;transform:rotate(8deg)}
.promo-popup .promo-popup-close:focus-visible{outline:3px solid #eee47d;outline-offset:3px}
.promo-popup-close svg{display:block;width:100%;height:100%;pointer-events:none}
.promo-popup .promo-popup-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body.promo-popup-open{overflow:hidden}
@keyframes promoPopupIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){dialog.promo-popup[open]{animation:none}.promo-popup .promo-popup-close{transition:none}}

/* Keep the modal and its backdrop mounted until the exit motion finishes. */
dialog[open].is-closing{pointer-events:none;animation:dialogExitCenter .22s cubic-bezier(.4,0,.6,1) both!important}
.cart-dialog[open].is-closing:not(.is-empty){animation-name:dialogExitDrawer!important}
dialog[open].is-closing::backdrop{animation:dialogExitBackdrop .22s ease both!important}
@keyframes dialogExitCenter{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes dialogExitDrawer{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(56px)}}
@keyframes dialogExitBackdrop{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog[open].is-closing,dialog[open].is-closing::backdrop{animation:none!important}}