/* Only explicitly marked page cards participate. Collections, popup cards and
   canvas/workspace layouts keep their own sizing and scrolling. */
html:has([data-page-card-active]) {
    height: 100%;
    scrollbar-gutter: auto;
}

body:has([data-page-card-active]) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

html body > main:has([data-page-card-active]),
html:root body > .container[data-page-card-host]:has(> [data-page-card-active]) {
    --page-card-bottom-gap: 1rem;
    box-sizing: border-box;
    height: calc(100vh - var(--tnx-guest-banner-height, 0px));
    height: calc(100dvh - var(--tnx-guest-banner-height, 0px));
    min-height: 0;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 1rem var(--page-card-bottom-gap);
    overflow: hidden;
    flex: none;
}

/* A shop host can contain a form without itself becoming a second form card. */
html:root body > .container[data-page-card-host]:has(> [data-page-card-active]) {
    max-width: none;
    background: transparent;
    box-shadow: none;
}

html body > main > [data-page-card-host]:has(> [data-page-card-active]) {
    height: 100%;
    min-height: 0;
    width: 100%;
}

html body.shop-page > #overlay:has(> [data-page-card-host] > [data-page-card-active]) {
    padding: 1rem;
}

/* Specificity also covers the form-card rule and the optional design schemes. */
html:root body [data-page-card][data-page-card-active]:is(.container, .big-card) {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin-block: 0 !important;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

html:root body [data-page-card][data-page-card-active][data-page-card-scroll] {
    overflow: hidden;
    scrollbar-gutter: auto;
}

/* Shop detail columns share one viewport, just like entry.php. The contact
   footer is placed inside this viewport by PageCard.js so it remains reachable. */
html body.shop-page [data-page-card-active] .entry-layout > :is(.left-section, .right-section) {
    max-height: none;
    overflow: visible;
}

html body.shop-page [data-page-card-active] > .big-card-header {
    position: sticky;
    top: -10px;
    z-index: 2;
    background: var(--border-color);
}

@media (max-width: 719px) {
    html body.shop-page > #overlay:has(> [data-page-card-host] > [data-page-card-active]) {
        padding: 1rem 0.5rem 0;
    }
    html body > main:has([data-page-card-active]),
    html:root body > .container[data-page-card-host]:has(> [data-page-card-active]) {
        --page-card-bottom-gap: 0px;
        width: 100% !important;
        padding-inline: 0.5rem;
    }

    html:root body [data-page-card][data-page-card-active]:is(.container, .big-card) {
        width: 100% !important;
        max-width: none !important;
        padding: 0;
        border: 0;
        /* Optional design schemes must not reintroduce the mobile card frame. */
        border-radius: 0 !important;
        background: transparent;
        box-shadow: none;
        scrollbar-gutter: auto;
    }

    html body.shop-page [data-page-card-active] > .big-card-header {
        top: 0;
        background: var(--bg-color);
    }
}