.zf-stock-notice {
    position: fixed;
    inset: auto 0 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 0.75rem max(1.25rem, env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    color: #fff;
    background: var(--zf-primary, #008b9b);
    border-top: 3px solid var(--zf-secondary, #006476);
    box-shadow: 0 -4px 20px rgb(0 0 0 / 12%);
}
.zf-stock-notice[hidden] { display: none; }
.zf-storefront .zf-stock-notice,
.zf-storefront .zf-stock-notice__message,
.zf-storefront .zf-stock-notice__icon,
.zf-storefront .zf-stock-notice__close { color: #fff; }
.zf-stock-notice__icon { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; }
.zf-stock-notice__message { flex: 1; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.zf-stock-notice__close {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-left: 1px solid currentColor;
    cursor: pointer;
}
.zf-stock-notice__close svg { width: 1.5rem; height: 1.5rem; }
.zf-stock-notice__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 480px) {
    .zf-stock-notice { gap: 0.75rem; padding-inline: 1rem; }
    .zf-stock-notice__message { font-size: 0.875rem; }
}