/**
 * Shared base of the brand pages (categories with the "category-full-width" layout: DBMK 34, B&Z 48, Fred Allard 50,
 * Montblanc 51) and of the CMS pages pre-owned, Partnerringe, Uhrenatelier and Service ("cms-full-width"). Loaded only via their layout handles, before the page's own
 * kz-brand-*.css. The layout handles take the .container off category.view.container, so rows span the viewport.
 */

:is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) {
    --kz-gutter: 1.5rem;
    --kz-light: #f4f1ea;
    --kz-page: 100%; /* max-width of the theme .container per breakpoint (below) */
    /* inline padding that lines full-width row text up with the contained rows (% = row width) */
    --kz-edge: max(var(--kz-gutter), (100% - var(--kz-page)) / 2 + var(--kz-gutter));

    /* Vertical rhythm: last band directly on the footer. The space above the title comes from the theme
       (page-layout.css: .page-main margin-top), so CMS pages, where #maincontent holds the title, keep their top margin. */
    & .category-view > .page-main {
        margin-block: 0;
    }

    & #maincontent {
        margin-bottom: 0;

        & .columns {
            row-gap: 0; /* empty sidebar-additional (compare/wishlist) row on desktop */
        }
    }
}

/* Native Page Builder parallax (jarallax) stays still for reduced motion */
@media (prefers-reduced-motion: reduce) {
    :is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) [id^="jarallax-container"] > * {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        transform: none !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* theme .container max-widths (Tailwind breakpoints) */
@media (min-width: 40rem) {
    :is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) {
        --kz-page: 40rem;
    }
}

@media (min-width: 48rem) {
    :is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) {
        --kz-page: 48rem;
    }
}

@media (min-width: 64rem) {
    :is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) {
        --kz-page: 64rem;
    }
}

@media (min-width: 80rem) {
    :is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) {
        --kz-page: 80rem;
    }
}

@media (min-width: 96rem) {
    :is(.page-layout-category-full-width, .cms-preowned-watches, .cms-partnerringe, .cms-uhrenatelier-goldschmiede, .cms-service) {
        --kz-page: 96rem;
    }
}