.col-full {
    max-width: 75em;
}

body.storefront-child-urbanist {
    --child-radius-surface: 22px;
    --child-radius-control: 6px;
}

body.storefront-child-urbanist :is(.button, .child-ui-button, button[type="submit"], input[type="submit"], input[type="button"], input[type="reset"], input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], textarea, select) {
    border-radius: var(--child-radius-control);
}

/* Keep the shop-wide typography preference above component alignment overrides. */
body.storefront-child-urbanist :where(.site, .site *, dialog, dialog *) {
    text-align: justify !important;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Suppress focus rings throughout the shop, without affecting the admin toolbar. */
body.storefront-child-urbanist :where(.site, .site *, dialog, dialog *):is(:focus, :focus-visible, :focus-within),
body.storefront-child-urbanist :where(.site, .site *, dialog, dialog *):is(:focus, :focus-visible, :focus-within)::before,
body.storefront-child-urbanist :where(.site, .site *, dialog, dialog *):is(:focus, :focus-visible, :focus-within)::after {
    outline: none !important;
    box-shadow: none !important;
}

/* Hide the page scrollbar without disabling scrolling. */
html,
body {
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Lock the root without changing the scroll container used by sticky elements. */
html:has(dialog:modal, .child-header-search-backdrop.is-visible, .child-shop-select-backdrop.is-visible) {
    overflow: hidden;
    overscroll-behavior: none;
}

body:has(dialog:modal, .child-header-search-backdrop.is-visible, .child-shop-select-backdrop.is-visible) {
    overflow: clip;
}

/* Avoid an overflow scroll container that would prevent sticky positioning. */
.site {
    overflow-x: clip;
}