/* The one alert of the storefront (both engines): green success, red error, blue info. Fixed colours so it reads the same in light and dark. */
.sc-alert{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:2147483000;box-sizing:border-box;width:min(calc(100vw - 24px),520px);display:flex;align-items:flex-start;gap:10px;padding:12px 8px 12px 14px;border-radius:10px;color:#fff;font-size:15px;font-weight:600;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.28);animation:sc-alert-in .18s ease-out}
.sc-alert-success{background:#15803d}
.sc-alert-error{background:#c8231a}
.sc-alert-info{background:#1d4ed8}
.sc-alert>i{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;font-weight:800;line-height:1}
.sc-alert-success>i{color:#15803d}
.sc-alert-error>i{color:#c8231a}
.sc-alert-info>i{color:#1d4ed8}
.sc-alert>span{flex:1;min-width:0;overflow-wrap:anywhere}
html body .sc-alert>button{flex:none;width:28px;height:28px;min-height:0;margin:-3px 0;padding:0;border:0;border-radius:6px;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:none}
html body .sc-alert>button:hover{background:rgba(255,255,255,.18)}
@keyframes sc-alert-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.sc-alert{animation:none}}
/* Size / colour still to choose: the box the shopper has to fix. */
.sc-variant-picker:has([role=alert]:not(:empty)) select{border:2px solid var(--rd)!important}
.sc-variant-picker:has([role=alert]:not(:empty)) [role=alert]{font-weight:600}