/**
 * Klantenservice page only: the content canvas is 1220px total and centered.
 * Outer premium atmosphere is a page-editor preset, not a fixed background.
 * Does not restyle the store header, footer, other page templates, or blocks.
 */
.luxa-customer-service-page {
    --luxa-service-page-bg: #f5f0e9;
    --luxa-service-page-paper: #fffdfa;
    --luxa-service-page-line: #e9dfd1;
    --luxa-service-page-shadow: 0 18px 65px rgb(63 44 25 / .075);
    position: relative;
    isolation: isolate;
    min-height: 65vh;
    width: 100%;
    max-width: none;
    padding: 20px 0 clamp(40px, 5vw, 82px);
    background: var(--luxa-service-page-bg);
    color: var(--luxa-text, #29231c);
    overflow-wrap: break-word;
}

.luxa-customer-service-page--champagne {
    --luxa-service-page-bg:
        radial-gradient(ellipse 75% 43% at 0% 12%, rgb(217 193 160 / .23), transparent 82%),
        radial-gradient(ellipse 61% 55% at 100% 78%, rgb(225 207 172 / .14), transparent 85%),
        linear-gradient(125deg, #f4eee6, #faf7f2 58%, #efe7dd);
    --luxa-service-page-paper: #fffdfa;
    --luxa-service-page-line: #e9dfd1;
}

.luxa-customer-service-page--sand {
    --luxa-service-page-bg:
        radial-gradient(ellipse 72% 62% at 2% 9%, rgb(203 165 116 / .18), transparent 76%),
        radial-gradient(ellipse 77% 60% at 98% 90%, rgb(199 167 133 / .14), transparent 83%),
        linear-gradient(135deg, #e9ded1, #f3ece2 48%, #e3d5c6);
    --luxa-service-page-paper: #fffcf8;
    --luxa-service-page-line: #e3d4c2;
    --luxa-service-page-shadow: 0 20px 65px rgb(69 43 22 / .085);
}

.luxa-customer-service-page--graphite {
    --luxa-service-page-bg:
        radial-gradient(ellipse 65% 60% at -10% -10%, rgb(170 139 89 / .19), transparent 78%),
        radial-gradient(ellipse 60% 64% at 112% 95%, rgb(146 115 73 / .13), transparent 83%),
        linear-gradient(135deg, #292623 0%, #211f1d 48%, #35302b 100%);
    --luxa-service-page-paper: #fffcf8;
    --luxa-service-page-line: #c5ae8a;
    --luxa-service-page-shadow: 0 22px 75px rgb(0 0 0 / .28);
}

/* Exactly one centered content canvas for EVERY block, including shortcode. */
.luxa-customer-service-page__canvas {
    position: relative;
    width: min(1220px, calc(100% - 40px));
    max-width: 1220px;
    min-width: 0;
    margin: 0 auto;
}

.luxa-customer-service-page__article {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--luxa-service-page-line);
    border-radius: 16px;
    background: var(--luxa-service-page-paper);
    box-shadow: var(--luxa-service-page-shadow);
}

.luxa-customer-service-page__content {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: clamp(18px, 2.5vw, 32px);
}

.luxa-customer-service-page__content > :first-child { margin-block-start: 0; }
.luxa-customer-service-page__content > :last-child { margin-block-end: 0; }

/* The Gutenberg alignfull choice must not escape the 1220px page canvas. */
.luxa-customer-service-page__content > :is(.alignwide, .alignfull),
.luxa-customer-service-page__content > .wp-block-group:is(.alignwide, .alignfull) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.luxa-customer-service-page__content :where(img, video, iframe, .wp-block-shortcode) {
    max-width: 100%;
}

.luxa-customer-service-page__content :where(.wp-block-shortcode, .ecom-service-contact) {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
}

/* Native premium Gutenberg sections remain inside this same canvas. */
.luxa-customer-service-page__content > .luxa-block {
    max-width: 100%;
}
.luxa-customer-service-page__content .luxa-block__container {
    max-width: 100%;
}

@media (max-width: 780px) {
    .luxa-customer-service-page__canvas {
        width: calc(100% - 28px);
    }
    .luxa-customer-service-page__content {
        padding: 20px 16px;
    }
    .luxa-customer-service-page__article {
        border-radius: 12px;
    }
}

@media print {
    .luxa-customer-service-page { background: white; padding: 0; }
    .luxa-customer-service-page__canvas { width: 100%; max-width: 100%; }
    .luxa-customer-service-page__article { border: 0; border-radius: 0; box-shadow: none; }
    .luxa-customer-service-page__content { padding: 0; }
}