.modal-macadamia{--anim:.25s forwards ease-in-out;position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.modal-macadamia.is-visible{display:flex;animation:mm-in var(--anim)}
.modal-macadamia.is-hiding{animation:mm-out var(--anim)}
@keyframes mm-in{from{opacity:0}to{opacity:1}}
@keyframes mm-out{from{opacity:1}to{opacity:0}}

.modal-macadamia__overlay{position:fixed;inset:0;background-color:rgba(20,20,20,.6);cursor:pointer}

.modal-macadamia__content{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow-y:auto;background-color:#fff;border-radius:16px;box-sizing:border-box}

.modal-macadamia__close{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(255,255,255,.9);border:none;border-radius:50%;cursor:pointer;color:#141414;padding:0;transition:background-color .2s}
.modal-macadamia__close:hover{background:#fff}

.modal-macadamia__media{background-color:#fff;border-radius:16px 16px 0 0;overflow:hidden}
.modal-macadamia__image{display:block;width:100%;height:auto}

.modal-macadamia__body{display:flex;flex-direction:column;align-items:center;padding:8px 36px 36px;text-align:center;box-sizing:border-box}

.modal-macadamia__tag{display:inline-block;margin:0 0 14px;padding:4px 14px;background-color:#fce3ec;color:#b3255b;border-radius:999px;font-family:var(--text-font-family);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.modal-macadamia__title{margin:0 0 10px;font-family:var(--heading-font-family);font-weight:var(--heading-font-weight);font-size:clamp(22px,4vw,28px);line-height:1.15;color:#141414}

.modal-macadamia__text{margin:0 0 24px;font-family:var(--text-font-family);font-size:15px;line-height:1.6;color:#141414;opacity:.8}

.modal-macadamia__btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 20px;background-color:#ea417c;color:#fff;border-radius:var(--button-border-radius);font-family:var(--text-font-family);font-weight:700;font-size:16px;letter-spacing:.02em;text-decoration:none;transition:background-color .2s;box-sizing:border-box}
.modal-macadamia__btn:hover{background-color:#f06b9e;color:#fff}

@media(max-width:480px){
  .modal-macadamia__body{padding:4px 24px 28px}
}