.gsl-popups {
    display: contents;
}

dialog.gsl-popup {
    box-sizing: border-box;
    width: min(100% - (var(--wp--custom--spacing--lg, 1.875rem) * 2), var(--gsl-popup-width, 42rem));
    max-width: var(--gsl-popup-width, 42rem);
    max-height: calc(100dvh - (var(--wp--custom--spacing--lg, 1.875rem) * 2));
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wp--custom--color--on-surface, #3A3A38);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

dialog.gsl-popup[open] {
    opacity: 1;
    transform: scale(1);
}

dialog.gsl-popup::backdrop {
    background: color-mix(in srgb, var(--wp--custom--color--primary, #3A3A38) 55%, transparent);
}

html:has(dialog.gsl-popup[open]),
body:has(dialog.gsl-popup[open]),
html.gsl-popup-open,
body.gsl-popup-open {
    overflow: hidden;
}

.gsl-popup--small {
    --gsl-popup-width: 28rem;
}

.gsl-popup--medium {
    --gsl-popup-width: 42rem;
}

.gsl-popup--large {
    --gsl-popup-width: 64rem;
}

.gsl-popup--fullscreen {
    --gsl-popup-width: calc(100vw - (var(--wp--custom--spacing--lg, 1.875rem) * 2));
    width: var(--gsl-popup-width);
    height: calc(100dvh - (var(--wp--custom--spacing--lg, 1.875rem) * 2));
}

.gsl-popup__panel {
    position: relative;
    max-height: inherit;
    overflow: auto;
    background: var(--wp--custom--color--surface-alt, var(--wp--custom--color--surface, #F3F0EB));
    color: var(--wp--custom--color--on-surface, #3A3A38);
    box-shadow: 0 1.25rem 4rem color-mix(in srgb, var(--wp--custom--color--primary, #3A3A38) 25%, transparent);
}

.gsl-popup--fullscreen .gsl-popup__panel {
    height: 100%;
}

.gsl-popup__header {
    padding: var(--wp--custom--spacing--lg, 1.875rem) var(--wp--custom--spacing--lg, 1.875rem) 0;
}

.gsl-popup__title {
    margin: 0;
    font-family: var(--wp--custom--heading--family, inherit);
    font-size: var(--wp--preset--font-size--heading-3, 1.5rem);
    font-weight: var(--wp--custom--heading--weight, 400);
    line-height: var(--wp--custom--heading--line-height, 1.1);
}

.gsl-popup__content {
    padding: var(--wp--custom--spacing--lg, 1.875rem);
}

/* Sticky, not absolute: the panel is the scroll container, so an absolute
   button scrolled out of view with long content (e.g. stacked Quick View on
   tablets). The negative bottom margin keeps it out of the content flow, and
   the soft chip keeps it legible over content scrolling underneath. */
.gsl-popup__close {
    position: sticky;
    inset-block-start: var(--wp--custom--spacing--xs, 0.625rem);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-block: var(--wp--custom--spacing--xs, 0.625rem) calc(-2rem - var(--wp--custom--spacing--xs, 0.625rem));
    margin-inline: auto var(--wp--custom--spacing--xs, 0.625rem);
    border: 0;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--wp--custom--color--surface-alt, #FDFCFB) 80%, transparent);
    color: currentColor;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--heading-4, 1.375rem);
    line-height: 1;
}

.gsl-popup__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}