/* -------------------------------------------------- */
/* screen.js */
.pg-stack {
    width: 100%;
}

.pg-menu-list button {
    margin-bottom: 8px;
}

/* -------------------------------------------------- */
/* mobile fullscreen overlay + sticky footer (safer on Android/iOS) */
@media (max-width: 640px) {

    /* lock background scroll when overlay is open */
    body.pg-scroll-locked {
        overflow: hidden;
    }

    .pg-customise-panel.is-open {
        position: fixed;
        inset: 0;
        z-index: 1050;
        /* background: #fff; */
        padding: 12px;
        overflow: hidden;
    }

    .pg-customise-panel.is-open .pg-customise-card {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;

        /* avoid 100vh quirks; rely on parent fixed inset */
        min-height: 0;
    }

    .pg-customise-panel.is-open .pg-customise-body {
        flex: 1 1 auto;
        overflow: auto;
        min-height: 0;
        /* allow flex child to shrink for scrolling */
        -webkit-overflow-scrolling: touch;
    }

    .pg-customise-panel.is-open .pg-customise-footer {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        /* background: #fff; */
        padding: 12px;
        border-top: 1px solid var(--border);

        /* keep buttons clear of system UI */
        padding-bottom: calc(12px + env(safe-area-inset-bottom) + 12px);
    }
}


/* -------------------------------------------------- */
.btn.btn-category {
    border: 1px solid var(--border);
    background: var(--surface);
}

.btn.btn-category.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 50%, transparent);
}

.btn.btn-item {
    border-radius: 999px;
}

.btn.btn-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 80%, transparent);
}

.btn.btn-choice {
    border: 1px solid var(--border);
    background: var(--surface);
    /* border-radius: 999px; */
    gap: 0px;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--text);
    /* font-size: 12px; */
    min-width: 80px;
    min-height: 50px;
    font-size: 0.9rem;
}

.btn.btn-choice.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 50%, transparent);
}

.btn.btn-choice .amount-delta {
    font-size: 0.875rem;
    /* color: var(--muted); */
}


.qty-controls {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
}

/* -------------------------------------------------- */
.option-choice-wrap {
    /* flex: 1; */
    min-width: 60px;
}