/* 仅负责 PC 液体背景，画布不接收点击或拖动，不参与原有布局。 */
.drawer_fluid_canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .nav_drawer.drawer_fluid_enabled > .drawer_fluid_canvas,
    .product_picker.drawer_fluid_enabled > .drawer_fluid_canvas { display: block; }
    .nav_drawer.open.drawer_fluid_enabled > .drawer_fluid_canvas {
        opacity: var(--drawer-fluid-opacity, 0.65);
    }
    .product_picker.is-open.drawer_fluid_enabled > .drawer_fluid_canvas {
        opacity: var(--product-fluid-opacity, 0.65);
    }
    .nav_drawer.drawer_fluid_enabled > .drawer_inner { z-index: 1; }
    .product_picker.drawer_fluid_enabled > :is(.product_picker_logo, .product_picker_heading, .product_picker_carousel, .product_picker_footer) {
        position: relative;
        z-index: 1;
    }
    .product_picker.drawer_fluid_enabled > .product_picker_close { z-index: 2; }
    .product_picker.drawer_fluid_enabled::before { display: none; }
}

/* 与 index.css 的移动端范围一致，JS 同时移除画布并释放网格。 */
@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse), (hover: none), (pointer: coarse) {
    .nav_drawer.drawer_fluid_enabled > .drawer_fluid_canvas,
    .product_picker.drawer_fluid_enabled > .drawer_fluid_canvas { display: none; }
}
.drawer_measure .drawer_fluid_canvas { display: none; }

@media (prefers-reduced-motion: reduce) {
    .drawer_fluid_canvas { transition: none; }
}