/**
 * Product Comparisons frontend base.
 * Container system mirrored from the goniometer buying-guide template.
 * All section visuals live in each section's own CSS file.
 */

.product-comparison-page {
    width: 100% !important;
    background: #ffffff !important;
}

.product-comparison-page,
.product-comparison-page * {
    box-sizing: border-box;
}

/* Shared shell used by the hero and FAQ sections. */
.product-comparison-shell {
    width: min(100%, 1280px);
    margin-inline: auto;
}

/* Section container system (identical behavior to the buying guide). */
.container-validation-database-box,
.container-product-comparisons-fullwidth {
    --vd-section-max-width: 1280px;
    --vd-section-padding-x: 0px;
    --vd-section-padding-y: 96px;
    --vd-section-padding-top: var(--vd-section-padding-y);
    --vd-section-padding-bottom: var(--vd-section-padding-y);
    --vd-section-gap: 96px;
    --vd-section-padding-x-mobile: 20px;
    --vd-section-padding-y-mobile: 70px;
    --vd-section-padding-top-mobile: var(--vd-section-padding-y-mobile);
    --vd-section-padding-bottom-mobile: var(--vd-section-padding-y-mobile);
    --vd-section-bg: transparent;
    box-sizing: border-box !important;
    background: var(--vd-section-bg) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--vd-section-gap) !important;
}

.container-validation-database-box {
    width: min(100%, var(--vd-section-max-width)) !important;
    margin-inline: auto !important;
    padding: var(--vd-section-padding-top) var(--vd-section-padding-x) var(--vd-section-padding-bottom) !important;
}

.container-product-comparisons-fullwidth {
    width: 100% !important;
    padding: var(--vd-section-padding-top) var(--vd-section-padding-x) var(--vd-section-padding-bottom) !important;
}

.container-product-comparisons-inner {
    width: min(100%, var(--vd-section-max-width, 1280px)) !important;
    margin-inline: auto !important;
}

/* Authors: identical box geometry to the buying-guide author section. */
.product-comparison-authors-container {
    --vd-section-max-width: 1280px;
    --vd-section-padding-x: 0px;
    --vd-section-padding-top: 0px;
    --vd-section-padding-bottom: 32px;
    --vd-section-padding-x-mobile: 20px;
    --vd-section-padding-top-mobile: 0px;
    --vd-section-padding-bottom-mobile: 24px;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: min(100%, var(--vd-section-max-width)) !important;
    margin-inline: auto !important;
    padding: var(--vd-section-padding-top) var(--vd-section-padding-x) var(--vd-section-padding-bottom) !important;
    background: #ffffff !important;
}

.product-comparison-authors,
.product-comparison-authors > .use-case-template-section,
.product-comparison-authors .use-case-template-container,
.product-comparison-authors .use-case-template-section-separator {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-comparison-fallback {
    padding: 72px 20px !important;
}

@media (max-width: 767px) {
    .container-validation-database-box,
    .container-product-comparisons-fullwidth {
        padding: var(--vd-section-padding-top-mobile) var(--vd-section-padding-x-mobile) var(--vd-section-padding-bottom-mobile) !important;
        gap: calc(var(--vd-section-gap) * 0.6) !important;
    }

    .container-product-comparisons-inner {
        width: 100% !important;
    }

    .product-comparison-authors-container {
        padding: var(--vd-section-padding-top-mobile) var(--vd-section-padding-x-mobile) var(--vd-section-padding-bottom-mobile) !important;
    }
}