:root {
    --font-sans: "Inter", "Segoe UI", sans-serif;
    --site-shell-max-width: 72rem;
    --site-shell-inline-padding: 1.25rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    color: #0f172a;
    background: #fff;
}

main {
    flex: 1 0 auto;
}

body > footer,
body > .site-footer {
    margin-top: auto;
}


.shop-alert-stack {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.shop-alert {
    justify-self: flex-start;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--line-strong) !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08) !important;
    padding: 0.75rem 1rem !important;
}

.shop-alert--success {
    background: white !important;
    border-color: transparent !important;
    color: black !important;
}

.shop-alert--error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.shop-alert--warning {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

.site-shell,
main,
.site-main,
.page-content,
article.web-page,
article.web-blog-post,
body > article,
body > section,
body > main > section {
    width: 100%;
    max-width: var(--site-shell-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-shell-inline-padding);
    padding-right: var(--site-shell-inline-padding);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0.67em 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 0.83em;
}

h6 {
    font-size: 0.67em;
}

:focus-visible {
    outline: none;
}