/* ── the store status banner ───────────────────────────────────────────────
   A bar across the top of every page while the store is coming soon or
   paused. Injected straight after <body> unless the theme placed it itself,
   and its own file for the same reason the discount-code banner is: it is on
   every page of the site, and the storefront sheet is only on storefront
   routes. Every token reads the storefront's value when that sheet is
   present, the theme's hook when it is not, and a plain default after that.

   The staff preview is drawn in the warning colour, so an owner who is
   looking at a store that works for them is not misled into thinking it works
   for everybody. */
.kahunacart-store-status {
    --kcs-bg: var(--kc-bg, var(--kahunacart-bg, Canvas));
    --kcs-accent: var(--kc-accent, var(--kahunacart-accent, light-dark(#0b57d0, #7cacf8)));
    --kcs-ink: var(--kc-accent-ink, var(--kahunacart-accent-ink, var(--kcs-accent)));
    --kcs-warn: var(--kc-warning, var(--kahunacart-warning, light-dark(#a15c00, #f2b45a)));

    display: flex;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
    color: var(--kcs-ink);
    background: color-mix(in srgb, var(--kcs-accent) 13%, var(--kcs-bg));
    border-block-end: 1px solid color-mix(in srgb, var(--kcs-accent) 30%, transparent);
}
.kahunacart-store-status--preview {
    color: var(--kcs-warn);
    background: color-mix(in srgb, var(--kcs-warn) 14%, var(--kcs-bg));
    border-block-end-color: color-mix(in srgb, var(--kcs-warn) 35%, transparent);
}
.kahunacart-store-status-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    margin: 0;
    max-inline-size: 70rem;
}
.kahunacart-store-status-lead {
    font-weight: 700;
}
.kahunacart-store-status a {
    color: inherit;
    text-decoration: underline;
}