/* ===========================================================
   新增：产品中心（products.html）长滚动重排样式（哥 2026-08-05）
   设计：保留 .page-city 深灰/白灰背景（page_city.jpg）完全不动；
         .left-yy（左侧返回条）与 .header（顶部导航）保持固定；
         内部新增 .ww-products-scroll 滚动容器，软件 / Skill / HTML 作品
         合并为同一长页向下滑动；最底部加 index 同款 .footer。
   说明：本文件仅在 products.html 引入，覆盖 main.css 中 .page-city 相关定位；
         css 加载顺序在 main.css 之后，故同特异性选择器以本文件为准。
   =========================================================== */

/* 滚动容器：撑满 .page-city，内部纵向滚动，隐藏滚动条但保留滚动
   二次修改：bottom 留出 footer 高度，避免内容被底部遮住（哥 2026-08-05 下午） */
.page-city .ww-products-scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 5.21vw;
    overflow-y: auto;
    overflow-x: hidden;
}
.page-city .ww-products-scroll::-webkit-scrollbar {
    display: none;
}
.page-city .ww-products-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 修改：产品中心容器由「绝对居中单屏」改为「相对流、水平居中、纵向排布」（哥 2026-08-05）
   原 main.css 中 .page-city .ww-product-center 的 position:absolute / top:50% / left:50% /
   transform:translate(-50%,-50%) 在此被覆盖为常规文档流，使其可在滚动容器内纵向延伸。
   二次修改：去掉大标题后顶部内边距略减（哥 2026-08-05） */
.page-city .ww-product-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 62.5vw;
    max-width: 100%;
    margin: 0 auto;
    padding: 2.4vw 0 1.5vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3.4vw;
    z-index: 2;
}

/* 页面大标题 */
.page-city .ww-page-head {
    text-align: center;
    margin-bottom: 0.4vw;
}
.page-city .ww-page-head h1 {
    font-size: 3vw;
    color: #fff;
    letter-spacing: 0.4vw;
    text-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.35);
}
.page-city .ww-page-head .ww-sub {
    font-size: 1.05vw;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3vw;
    margin-top: 0.7vw;
}

/* 分类区块标题（白字 + 主题色竖条） */
.page-city .ww-cat-head {
    display: flex;
    align-items: center;
    gap: 1vw;
    font-size: 1.9vw;
    color: #fff;
    margin-bottom: 1.8vw;
}
.page-city .ww-cat-head::before {
    content: "";
    width: 0.55vw;
    height: 1.9vw;
    border-radius: 999px;
    background: var(--themeColor);
}
.page-city .ww-cat-head .ww-en {
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.15vw;
}

/* 分类区块 */
.page-city .ww-section {
    position: relative;
}

/* 修改：卡片列表由「绝对居中」补充 flex-wrap，保证卡片较多时自动换行（哥 2026-08-05）
   二次修改：卡片从左到右连续排列，不再居中（哥 2026-08-05）
   三次修改：改为横向单行，产品过多时自动出现横向滚动条往右划（哥 2026-08-11）
   四次修改：显式声明 display:flex + flex-flow:row nowrap，强制所有卡片在同一行向右堆叠（哥 2026-08-11）
   五次修改：把隐藏滚动条改成可见自定义滚动条，深色轨道+主题色滑块，方便拖动（哥 2026-08-11） */
.page-city .ww-product-list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1.2vw;
    gap: 2.5vw;
    /* 自定义横向滚动条：深色轨道 + 主题色滑块 */
    scrollbar-width: thin;
    scrollbar-color: var(--themeColor) rgba(255, 255, 255, 0.08);
}
.page-city .ww-product-list::-webkit-scrollbar {
    height: 0.45vw;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}
.page-city .ww-product-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}
.page-city .ww-product-list::-webkit-scrollbar-thumb {
    background: var(--themeColor);
    border-radius: 999px;
}
.page-city .ww-product-list::-webkit-scrollbar-thumb:hover {
    background: #7CECFC;
}
/* 新增开始：产品卡片在横向滚动行中保持固定尺寸不压缩（哥 2026-08-11） */
.page-city .ww-product-card {
    flex-shrink: 0;
}
/* 新增结束 */

/* 修改：products.html 内的 index 同款 footer 固定在 .page-city 底部，宽度 100%
   （哥 2026-08-05 下午二次修改：和子产品页一样铺满整屏）。
   三次修改：footer z-index 高于左侧 .left-yy，避免被左侧栏压住（哥 2026-08-05） */
.page-city > .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5.21vw;
    margin-top: 0;
    flex: none;
    z-index: 30;
}