
.smpm-popup{
    position:fixed;
    z-index:999999;
    width:var(--popup-w);
    max-width:calc(100vw - 24px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
}
.smpm-popup.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.smpm-popup__box{
    position:relative;
    width:100%;
    border-radius:var(--popup-radius);
    box-shadow:var(--popup-shadow);
}
.smpm-popup__content{
    background:var(--popup-bg);
    border-radius:var(--popup-radius);
    padding:30px 24px 24px;
    text-align:center;
    overflow:hidden;
}
.smpm-popup__image-link{display:block;line-height:0;text-decoration:none}
.smpm-popup__image{display:block;width:100%;height:auto;border-radius:var(--popup-radius)}

.smpm-popup__eyebrow{
    font-family:var(--eyebrow-family);
    font-size:var(--eyebrow-size);
    font-weight:var(--eyebrow-weight);
    font-style:var(--eyebrow-style);
    line-height:var(--eyebrow-line);
    letter-spacing:var(--eyebrow-space);
    text-transform:var(--eyebrow-transform);
    color:var(--eyebrow-color);
}
.smpm-popup__title{
    margin-top:5px;
    font-family:var(--title-family);
    font-size:var(--title-size);
    font-weight:var(--title-weight);
    font-style:var(--title-style);
    line-height:var(--title-line);
    letter-spacing:var(--title-space);
    text-transform:var(--title-transform);
    color:var(--title-color);
}
.smpm-popup__sub{
    margin:22px 0 9px;
    font-family:var(--sub-family);
    font-size:var(--sub-size);
    font-weight:var(--sub-weight);
    font-style:var(--sub-style);
    line-height:var(--sub-line);
    letter-spacing:var(--sub-space);
    text-transform:var(--sub-transform);
    color:var(--sub-color);
}
.smpm-popup__discount-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}
.smpm-popup__discount-row.has-promo-box{
    display:inline-flex;
    background:var(--promo-bg);
    border:var(--promo-border-width) var(--promo-border-style) var(--promo-border);
    border-radius:var(--promo-radius);
    padding:var(--promo-py) var(--promo-px);
}
.smpm-popup__discount{
    font-family:var(--discount-family);
    font-size:var(--discount-size);
    font-weight:var(--discount-weight);
    font-style:var(--discount-style);
    line-height:var(--discount-line);
    letter-spacing:var(--discount-space);
    text-transform:var(--discount-transform);
    color:var(--discount-color);
}
.smpm-popup__suffix{
    font-family:var(--suffix-family);
    font-size:var(--suffix-size);
    font-weight:var(--suffix-weight);
    font-style:var(--suffix-style);
    line-height:var(--suffix-line);
    letter-spacing:var(--suffix-space);
    text-transform:var(--suffix-transform);
    color:var(--suffix-color);
}
.smpm-popup__footer{
    margin-top:18px;
    padding-top:13px;
    border-top:1px solid rgba(255,255,255,.12);
    font-family:var(--footer-family);
    font-size:var(--footer-size);
    font-weight:var(--footer-weight);
    font-style:var(--footer-style);
    line-height:var(--footer-line);
    letter-spacing:var(--footer-space);
    text-transform:var(--footer-transform);
    color:var(--footer-color);
}
.smpm-popup__button{
    display:inline-block;
    width:var(--button-width);
    box-sizing:border-box;
    margin-top:18px;
    padding:var(--button-py) var(--button-px);
    border:var(--button-border-width) solid var(--button-border);
    border-radius:var(--button-radius);
    background:var(--button-bg);
    color:var(--button-color)!important;
    text-decoration:none!important;
    font-family:var(--button-family);
    font-size:var(--button-size);
    font-weight:var(--button-weight);
    font-style:var(--button-style);
    line-height:var(--button-line);
    letter-spacing:var(--button-space);
    text-transform:var(--button-transform);
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.smpm-popup__button:hover,
.smpm-popup__button:focus{
    background:var(--button-hover-bg);
    color:var(--button-hover-color)!important;
    border-color:var(--button-hover-border);
    transform:translateY(-1px);
}
.smpm-popup__close{
    position:absolute;
    top:calc(var(--close-size) / -2.25);
    right:calc(var(--close-size) / -2.25);
    z-index:3;
    width:var(--close-size)!important;
    height:var(--close-size)!important;
    min-width:var(--close-size)!important;
    min-height:var(--close-size)!important;
    padding:0!important;
    border:var(--close-border-width) solid var(--close-border)!important;
    border-radius:50%!important;
    background:var(--close-bg)!important;
    color:var(--close-color)!important;
    box-shadow:0 3px 12px rgba(0,0,0,.22);
    cursor:pointer;
    font-size:var(--close-icon)!important;
    font-family:Arial,sans-serif!important;
    font-weight:400!important;
    line-height:calc(var(--close-size) - 2px)!important;
    text-align:center!important;
    appearance:none;
}
.smpm-popup__close:hover,
.smpm-popup__close:focus{
    background:var(--close-hover-bg)!important;
    color:var(--close-hover-color)!important;
}

.smpm-slide-up{transform:translateY(24px)}
.smpm-slide-up.is-visible{transform:translateY(0)}
.smpm-fade{transform:none}
.smpm-slide-left{transform:translateX(28px)}
.smpm-slide-left.is-visible{transform:translateX(0)}
.smpm-zoom{transform:scale(.92)}
.smpm-zoom.is-visible{transform:scale(1)}

@media(max-width:767px){
    .smpm-popup{width:var(--popup-mobile)}
    .smpm-popup__content{padding:24px 17px 19px}
    .smpm-popup__eyebrow{font-size:var(--eyebrow-mobile)}
    .smpm-popup__title{font-size:var(--title-mobile)}
    .smpm-popup__sub{font-size:var(--sub-mobile)}
    .smpm-popup__discount{font-size:var(--discount-mobile)}
    .smpm-popup__suffix{font-size:var(--suffix-mobile)}
    .smpm-popup__footer{font-size:var(--footer-mobile)}
    .smpm-popup__button{font-size:var(--button-mobile)}
}
@media(prefers-reduced-motion:reduce){
    .smpm-popup{transition:none;transform:none!important}
}
