/* 四个产品页的模型画布始终铺满视口；响应式规则只调整叠加的 UI。 */
html,
body {
    height: 100vh;
    height: 100dvh;
}

body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, #ffffff, #dddddd);
}

#container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
    :root {
        --product-layout: stacked;
        --product-gutter: clamp(16px, 3vw, 32px);
        --product-logo-top: max(16px, env(safe-area-inset-top));
        --product-logo-left: max(var(--product-gutter), env(safe-area-inset-left));
        --product-logo-width: clamp(160px, 28vw, 240px);
        --product-logo-height: calc(var(--product-logo-width) * 100 / 402);
        --product-logo-title-gap: 24px;
        --toolbar-inset-top: max(16px, env(safe-area-inset-top));
        --toolbar-inset-right: max(var(--product-gutter), env(safe-area-inset-right));
        --toolbar-button-size: 44px;
        --toolbar-icon-size: 22px;
        --toolbar-gap: 12px;
        --toolbar-copy-gap: 16px;
        --detail-copy-bottom: max(24px, env(safe-area-inset-bottom));
        --product-title-size: clamp(30px, 4.8vw, 48px);
        --product-copy-size: clamp(16px, 2.2vw, 20px);
        --product-copy-gap: clamp(12px, 2vh, 20px);
        --product-copy-max-height: 34%;
    }

    .ui {
        height: 100%;
        overflow: hidden;
    }

    .main-logo {
        top: var(--product-logo-top);
        left: var(--product-logo-left);
        width: var(--product-logo-width);
        height: var(--product-logo-height);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .pages .big-title {
        box-sizing: border-box;
        font-size: var(--product-title-size);
        line-height: 1.15;
        overflow-wrap: break-word;
    }

    .pages #main-title {
        top: auto;
        bottom: max(28px, env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        width: calc(100% - 2 * var(--product-gutter));
        font-size: var(--product-title-size);
        line-height: 1.15;
        text-align: center;
    }

    /* 微导管使用横向进入动画，保留其动画的零位移定位。 */
    [data-product="Micro_Catheter"] .pages #main-title {
        left: var(--product-gutter);
    }

    .pages #page1-title,
    .pages #page2-title,
    .pages #page3-title,
    .pages .page2 #page2-title {
        top: calc(var(--toolbar-inset-top) + var(--toolbar-button-size) + var(--toolbar-gap) + var(--toolbar-button-size) / 2 - 0.6em);
        left: var(--product-logo-left);
        right: calc(var(--toolbar-inset-right) + var(--toolbar-button-size) + var(--toolbar-copy-gap));
        width: auto;
        text-align: left;
        line-height: 1.2;
    }

    .pages #page1-info,
    .pages #page2-info,
    .pages #page3-info {
        box-sizing: border-box;
        left: calc(var(--product-logo-left) + var(--product-logo-art-offset, 0px));
        right: max(var(--product-gutter), env(safe-area-inset-right));
        width: auto;
        max-height: var(--product-copy-max-height);
        font-size: var(--product-copy-size);
        line-height: 1.45;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: auto;
        touch-action: pan-y;
    }

    .pages #page1-info > div,
    .pages #page2-info > div,
    .pages #page3-info > div {
        margin-bottom: var(--product-copy-gap);
    }

    .pages [id$="-info"]:focus-visible {
        outline: 2px solid var(--toolbar-color);
        outline-offset: 3px;
    }

    .pages .dot {
        top: -2px;
        width: 5px;
        height: 5px;
        margin-right: 4px;
    }

    [data-product="Steerable_Sheath"] #page1-lunpan {
        --bend-scale: 0.8;
        --bend-value-size: 20px;
        --bend-label-size: 11px;
        top: calc(50% - 140px * var(--bend-scale));
    }
}

@media (max-width: 600px) {
    :root {
        --product-logo-width: 160px;
        --product-title-size: clamp(26px, 7vw, 34px);
        --product-copy-size: 16px;
        --product-copy-gap: 12px;
        --detail-copy-bottom: max(20px, env(safe-area-inset-bottom));
    }

    [data-product="Steerable_Sheath"] #page1-lunpan {
        --bend-scale: 0.6;
        --bend-value-size: 14px;
    }
}

/* 横屏 Pad 与低高度手机：详情标题与可滚动说明叠加在全屏画布右侧。 */
@media (min-width: 601px) and (max-width: 1024px) and (min-aspect-ratio: 5/4),
       (max-width: 1024px) and (max-height: 600px) and (min-aspect-ratio: 5/4),
       (max-width: 1366px) and (any-pointer: coarse) and (min-aspect-ratio: 5/4) {
    :root {
        --product-layout: split;
        --product-title-size: clamp(24px, 3.2vw, 36px);
        --product-copy-size: clamp(14px, 1.8vw, 18px);
        --product-copy-gap: 12px;
        --product-copy-max-height: none;
        --detail-copy-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .pages #page1-title,
    .pages #page2-title,
    .pages #page3-title,
    .pages .page2 #page2-title {
        top: calc(var(--product-logo-top) + var(--product-logo-height) + 16px);
        left: 56%;
    }

    .pages #page1-info,
    .pages #page2-info,
    .pages #page3-info {
        top: var(--detail-copy-top, 160px);
        left: 56%;
        right: calc(var(--toolbar-inset-right) + var(--toolbar-button-size) + var(--toolbar-copy-gap));
    }

    .pages #main-title {
        font-size: clamp(24px, 4vw, 40px);
        bottom: max(20px, env(safe-area-inset-bottom));
    }
}