/* ===== 1920 Design Scale Adapter =====
 * Keep the desktop layout authored against a 1920px design canvas.
 * On PC (>1200px) the body content scales proportionally.
 * On tablet & mobile (<=1200px) the canvas is dropped entirely:
 * layouts come from css/mobile.css + each page's own media rules.
 */
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.design-scale-stage {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.design-scale-root {
    width: 1920px;
    margin: 0;
    zoom: var(--page-scale, 1);
}

/* Desktop keeps the existing root-level scale. */
.page-scale-content {
    width: auto;
    zoom: 1;
}

/* On screens wider than the design canvas, keep the 1920 layout at 1:1
   and center it instead of stretching the design. */
@media (min-width: 1920px) {
    .design-scale-root {
        margin-left: calc((100vw - 1920px) / 2);
    }
}

/* Tablet & mobile: drop the 1920 design canvas. Pages flow at viewport
   width; stacking/grids are defined in css/mobile.css and per-page
   @media rules. */
@media (max-width: 1200px) {
    html, body { overflow-x: hidden; }

    /* clip 不产生滚动容器；hidden 会让 position: sticky 的后代
       吸附到这个不滚动的盒子上而失效（产品页分类标签条依赖 sticky）。
       不支持 clip 的旧浏览器会忽略此声明，仅退化为不吸顶。 */
    html, body, .design-scale-stage {
        overflow-x: clip;
    }

    .design-scale-root,
    .page-scale-content {
        width: 100%;
        max-width: 100%;
        zoom: 1;
        margin: 0;
    }
}