/* ============================================================ * main.css —— 全局布局与组件（全部以 vars.css 为唯一基准，禁止页面自定字号/颜色） * 三端自适应：桌面(>1024) / 平板(768–1024) / 手机(<768) * ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* v281 兼容性铁律：禁止手机浏览器（UC/夸克/部分国产壳）自动放大字体导致的布局爆行 —— 字体被 boost 后公告条折行、header-actions 被挤到第二行（用户 2026-10-14 截图案例）。 */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; color: var(--c-title); font-weight: var(--fw-bold); } h2.page-title { font-size: var(--fs-title); color: var(--c-link); margin-bottom: var(--sp-4); } /* 页面大标题 16px（用户 2026-10-13 v228：Track Your Order/Your Cart 等全站 page-title 统一 --fs-title） */ h3.section-title { font-size: var(--fs-title); color: var(--c-title); margin-bottom: var(--sp-3); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* 表单控件默认走系统独立字体 → 强制继承，全站统一 */ button, input, select, textarea { font-family: inherit; } /* ---------- 顶部公告条 ---------- */ .announce { background: var(--c-announce-bg); color: var(--c-announce-text); font-size: var(--fs-announce); text-align: center; padding: var(--sp-2); } /* ---------- 顶栏 ---------- */ .site-header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--c-border); } .header-inner { padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); } /* 搜索页专属：导航栏底部内边距收紧，与面包屑条 padding-top 合计≈10px（用户 2026-10-13 v231；仅 .search-page 生效，其它页 header 不变） */ body.search-page .header-inner { padding-bottom: 14px; } /* 搜索框下边框↔面包屑粉条上边框 = 14+1px 边框 = 15px（用户 2026-10-13 v236，桌面手机同值） */ .logo { font-size: 24px; font-weight: 800; color: #0b78ad; white-space: nowrap; letter-spacing: -.3px; } @media (min-width: 769px) { .logo { position: relative; top: -6px; } /* 桌面端品牌文字底边与导航分类文字底边对齐（24px/1.8 行高比 16px 多垫 ~5.8px，实测补偿 -6px；用户 2026-10-13 v250） */ } /* 桌面导航：通栏单行——占满 Logo 与搜索框之间全部宽度，项间均匀铺开 */ .nav { display: flex; align-items: center; flex: 1; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-width: 0; margin-left: var(--sp-5); } /* 品牌↔Home 拉开 24px（用户 2026-10-13 v249；手机端 nav 隐藏不受影响） */ .nav-item { display: flex; align-items: center; } .nav::-webkit-scrollbar { display: none; } .nav a { font-size: var(--fs-nav); font-weight: var(--fw-bold); color: var(--c-title); white-space: nowrap; padding: var(--sp-1) 0; } .nav a:hover, .nav a.active { color: var(--c-primary); } .search-box { display: flex; flex: 0 1 260px; min-width: 140px; } /* ≤1700 屏：导航 16px 下收紧项间距与搜索框，保证 1366 及以上单行通栏 （导航为 space-between 单行时自动铺开，故 gap 取最小值只在窄屏生效，宽屏视觉不变） */ @media (max-width: 1700px) and (min-width: 1024px) { .header-inner { gap: var(--sp-3); } .nav { gap: 2px 1px; margin-left: var(--sp-3); } /* 窄桌面品牌距收紧 12px，保导航单行不换行 */ .search-box { flex-basis: 120px; min-width: 100px; } } /* ≤1400 屏：进一步压缩间距与搜索框 */ @media (max-width: 1400px) and (min-width: 1024px) { .header-inner { gap: var(--sp-1); } .nav { gap: 2px 1px; margin-left: var(--sp-2); } /* ≤1400 收 8px */ .search-box { flex-basis: 110px; min-width: 100px; } .header-actions { gap: var(--sp-3); } } .search-box input { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); outline: none; background: var(--c-bg-soft); } .search-box input:focus { background: #fff; border-color: #0b78ad; } .search-box button { font-size: var(--fs-body); padding: 0 var(--sp-5); border: none; cursor: pointer; background: #0b78ad; color: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .search-box button:hover { background: #09628c; } .header-actions { display: flex; align-items: center; gap: var(--sp-4); white-space: nowrap; } .header-actions a { font-size: var(--fs-body); color: var(--c-text-sub); } .header-actions a:hover { color: var(--c-primary); } .cart-link { position: relative; } .cart-count { display: inline-block; min-width: 18px; text-align: center; font-size: var(--fs-small); background: var(--c-primary); color: #fff; border-radius: 9px; padding: 0 5px; margin-left: 4px; vertical-align: middle; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 22px; color: var(--c-text); } /* ---------- 移动端抽屉 ---------- */ /* 桌面导航 mega 下拉（fixed 定位，防 .nav overflow 裁剪） */ .nav-item { position: relative; } .mega { display: none; position: fixed; z-index: 70; left: 12px; right: 12px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--sp-3) var(--sp-5); max-height: calc(100vh - var(--header-h, 120px) - 24px); overflow-y: auto; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: var(--sp-4) var(--sp-5); } .mega.show { display: grid; } .mega-col { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--c-border); padding-left: var(--sp-4); } .mega-col:first-child { border-left: none; padding-left: 0; } /* 二级：中黑 #374151 + 底部分隔线，作列标题（.nav a 特异度高，需 .nav 前缀压过） */ .nav .mega-l2 { font-size: var(--fs-l2); font-weight: 700; color: var(--c-ink-2); padding: 0 0 var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 2px solid var(--c-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav .mega-l2:hover { color: var(--c-primary); } /* 三级：浅黑 #6b7280 + 圆点缩进列表 */ .nav .mega-l3 { font-size: var(--fs-l3); font-weight: 700; color: var(--c-ink-3); padding: 4px 0 4px var(--sp-2); position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav .mega-l3::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--c-border); transform: translateY(-50%); } .nav .mega-l3:hover { color: var(--c-primary); } /* 抽屉三级折叠树 */ .dr-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--c-border); } .dr-item .dr-l1 { border-bottom: none; } .dr-toggle { background: none; border: none; font-size: 14px; color: var(--c-text-sub); cursor: pointer; padding: var(--sp-3) var(--sp-2); transition: transform .2s; } .dr-toggle.open { transform: rotate(180deg); } .dr-subs { display: none; padding-left: var(--sp-4); } .dr-subs.open { display: block; } .dr-l2 { border-bottom: 1px dashed var(--c-border); padding: var(--sp-1) 0; } /* 抽屉二级/三级分类：只覆盖字号/字重/颜色（需 .drawer 前缀压过 .drawer a 的特异度）； padding / border 仍沿用 .drawer a 的值，避免布局位移 */ .drawer .dr-l2-link { display: block; font-size: var(--fs-l2); font-weight: 700; color: var(--c-ink-2); } .drawer .dr-l3 { display: block; font-size: var(--fs-l3); font-weight: 700; color: var(--c-ink-3); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 62%; max-width: 260px; background: #fff; z-index: 50; /* 侧边抽屉变窄（用户 2026-10-13 v227：78%/320 → 62%/260） */ transform: translateX(-100%); transition: transform .25s ease; padding: var(--sp-5) var(--sp-4); overflow-y: auto; } .drawer.open { transform: translateX(0); } .drawer .close { position: absolute; top: var(--sp-3); right: var(--sp-4); background: none; border: none; color: var(--c-title); font-size: 22px; cursor: pointer; } .drawer a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); color: var(--c-title); font-size: var(--fs-nav); font-weight: var(--fw-bold); } .drawer-link { margin-top: var(--sp-4); } /* ---------- 容器 ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5) var(--sp-4); } /* ---------- Hero ---------- */ .hero { background: linear-gradient(120deg, #eaf5fb 0%, #fff 55%); border-bottom: 1px solid var(--c-border); } .hero .wrap { padding: var(--sp-7) var(--sp-4); } .hero h1 { font-size: var(--fs-hero); line-height: var(--lh-body); max-width: 640px; } .hero p { font-size: var(--fs-body); color: var(--c-text-sub); max-width: 600px; margin: var(--sp-3) 0 var(--sp-5); } .hero .btn { font-size: var(--fs-body); } .hero-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); position: relative; z-index: 1; } .hero-tags span { font-size: var(--fs-body); font-weight: var(--fw-bold); background: #fff; border: 1px solid var(--c-border); border-radius: 999px; padding: var(--sp-1) var(--sp-3); color: var(--c-text); } /* ---------- Hero 轮播（首页专用） ---------- */ .hero-carousel { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-border); background: #fff; } /* 动态渐变背景层：色调随当前幻灯片商品图联动（JS 双缓冲交叉淡入） */ .hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, #eaf5fb 0%, #fff 55%); } .hero-carousel .slides { position: relative; z-index: 1; } .hero-carousel .slide { display: none; } .hero-carousel .slide.active { display: block; animation: caro-fade .6s ease; } @keyframes caro-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .slide-inner { display: flex; align-items: flex-start; gap: var(--sp-6); padding: var(--sp-7) var(--sp-4); } /* 桌面：文案/气泡/配图三者顶部对齐同一水平线（用户 2026-10-13 v217，原 center） */ .slide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; } /* 桌面：标题/描述/按钮三行上下均匀分布（与配图框 260px 等高；用户 2026-10-13 v218） */ .slide-text h1 { font-size: 20px; font-weight: 700; line-height: var(--lh-body); max-width: 560px; } /* 桌面 20px（用户 2026-10-13 v205），手机端 media query 保持 16px */ .slide-text p { font-size: var(--fs-body); color: var(--c-text-sub); max-width: 520px; margin: var(--sp-3) 0 var(--sp-5); } /* 轮播优惠徽章（v206）：白底描边气泡样式（用户 2026-10-13：红底胶囊改气泡），左下小尾巴；百分比红字 */ .slide-cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .hero-disc { position: absolute; left: 50%; top: var(--sp-7); bottom: auto; transform: translateX(-50%); /* 桌面：气泡顶边与文案标题、配图框顶边齐平（=slide-inner 上内边距 48px；用户 2026-10-13 v217） */ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 26px; border-radius: 999px; color: #fff; z-index: 3; background: linear-gradient(135deg, #ff5f6d 0%, #e63946 55%, #c91f2e 100%); box-shadow: 0 10px 26px rgba(230, 57, 70, .4); font-size: 19px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; text-align: center; } .hero-disc::before, .hero-disc::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-bottom: 0; border-left: 0; } .hero-disc::before { bottom: -16px; left: 26px; border-top: 16px solid #d92b3a; border-right: 12px solid transparent; } /* 尾巴外缘（渐变下缘红，v208） */ .hero-disc::after { bottom: -12px; left: 29px; border-top: 13px solid #c91f2e; border-right: 9px solid transparent; } /* 尾巴内芯（渐变右角色） */ .hero-disc b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.5px; color: #ffd400; } /* 百分比黄色（用户 2026-10-13 v208） */ .hero-disc .hd-cat { font-style: normal; } /* 徽章栏目名前缀（v216：Apparel Top Discount - 93%） */ a.hero-disc { text-decoration: none; color: #fff; } /* 气泡改链接（v226：点击跳对应栏目），外观不变 */ .slide-img a { display: inline-block; } /* 配图商品链接（v226） */ .hero-disc[hidden] { display: none; } /* 轮播"View details >>"文字链（用户 2026-10-13 v203）：粉红加粗无背景，桌面 20px / 手机 14px */ .hero-link { display: inline-block; font-size: 20px; font-weight: 800; color: #ff4d6d; text-decoration: none; letter-spacing: .3px; background: none; padding: 0; } .hero-link:hover, .hero-link:active, .hero-link:focus { color: #e63946; text-decoration: none; } /* 悬停/点击均不加下划线（用户 2026-10-13 v246） */ .slide-img { flex: 0 0 500px; height: 260px; position: relative; border-radius: var(--radius); background: linear-gradient(140deg, #dceef8, #fff); display: flex; align-items: center; justify-content: center; gap: var(--sp-3); border: 1px solid var(--c-border); overflow: hidden; } /* 桌面配图框加宽 360→440（用户 2026-10-13 v214：3 图含旋转完整展示不被裁） */ .slide-img img { width: 116px; height: 116px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow); } .slide-img img.layer-0 { transform: rotate(-6deg) translateY(6px); } .slide-img img.layer-1 { transform: rotate(3deg) translateY(-8px); } .slide-img img.layer-2 { transform: rotate(8deg) translateY(10px); opacity: .95; } .hero-carousel .hero-tags { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36%; z-index: 5; } /* 桌面：三行均匀分布——标签行居中（v213 上移） */ .hero-carousel .hero-tags span { background: rgba(255,255,255,.92); } .caro-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-border); background: rgba(255,255,255,.9); color: var(--c-title); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, box-shadow .2s; opacity: 0; } .hero-carousel:hover .caro-arrow { opacity: 1; } .caro-arrow:hover { background: #fff; box-shadow: var(--shadow); } .caro-arrow.prev { left: var(--sp-3); } .caro-arrow.next { right: var(--sp-3); } .caro-dots { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); display: flex; gap: var(--sp-2); z-index: 6; } /* 桌面：三行均匀分布——圆点底行（v211） */ .caro-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(31,35,40,.25); cursor: pointer; padding: 0; transition: background .2s, transform .2s; } .caro-dots button.active { background: var(--c-primary); transform: scale(1.25); } /* ---------- 类目条 ---------- */ .cat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); } .cat-tile { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); text-align: center; transition: box-shadow .2s, transform .2s; display: block; } .cat-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .cat-tile .emoji { font-size: 26px; } .cat-tile .label { display: block; margin-top: var(--sp-2); font-size: var(--fs-title); color: var(--c-title); font-weight: var(--fw-bold); } /* ---------- 区块标题 ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); } .section-head .more { font-size: var(--fs-small); font-weight: 700; color: var(--c-link); } /* View all 加粗（用户 2026-10-13 v225） */ .section-head .more:hover { text-decoration: underline; } /* ---------- 商品网格（桌面固定 6 列；平板 3 列、手机 2 列见响应式段） ---------- */ .grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(6, minmax(0, 1fr)); } .card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s; display: flex; flex-direction: column; } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: #f3d0d2; } .card .thumb { position: relative; aspect-ratio: 1 / 1; background: var(--c-bg-soft); overflow: hidden; } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .card:hover .thumb img { transform: scale(1.07); } .badge { position: absolute; top: var(--sp-2); left: var(--sp-2); font-size: var(--fs-small); font-weight: 700; color: #fff; background: var(--c-badge); border-radius: var(--radius-sm); padding: 2px var(--sp-2); transition: transform .25s; } .card:hover .badge { transform: scale(1.06); } .badge.new { background: var(--c-badge-new); } .badge.offer { background: #0ea5e9; } .badge.disc { left: auto; right: var(--sp-2); background: var(--c-badge); } .save-line { font-size: var(--fs-small); font-weight: 700; color: var(--c-badge-new); margin-top: 2px; } .store-name { font-size: var(--fs-small); color: var(--c-text-sub); margin-top: var(--sp-1); } .card .info { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; } .card .name { font-size: var(--fs-title); color: var(--c-title); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; transition: color .2s; } .card:hover .name { color: var(--c-title); } .rating { display: flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--c-text-sub); margin-bottom: var(--sp-2); } /* 手机端：所有栏目商品列表卡片标题统一 15px（首页/分类/搜索/详情页猜你喜欢，2026-10-12） */ @media (max-width: 767px) { .card .name { font-size: 15px; } } .rating .stars { color: var(--c-rating); letter-spacing: 1px; } .pdp-rating .sold-count { margin-left: auto; color: var(--c-text-sub); } .pdp-rating > b { color: var(--c-title); } .sold-num { color: var(--c-title); font-weight: 700; } .price-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: auto; } /* Risk-free / You save / 金额 一组：整组推到行右缘，组内均匀分布 */ .price-tags { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-left: auto; flex: 1; min-width: 0; } .price { font-size: var(--fs-title); color: var(--c-price); font-weight: 800; } .price-old { font-size: var(--fs-small); color: var(--c-price-old); text-decoration: line-through; } .add-btn { margin-top: var(--sp-3); width: 100%; font-size: var(--fs-body); cursor: pointer; padding: var(--sp-2); border: none; border-radius: var(--radius-sm); background: var(--c-primary); color: #fff; transition: background .2s, opacity .25s, transform .25s; } .add-btn:hover { background: var(--c-primary-dark); } /* hover 动效仅给支持指针的设备；触屏保持常显，避免加购按钮不可用 */ @media (hover: hover) and (pointer: fine) { .add-btn { opacity: 0; transform: translateY(8px); } .card:hover .add-btn { opacity: 1; transform: none; } } /* ---------- 按钮 / 表单 ---------- */ .btn { display: inline-block; font-size: var(--fs-body); cursor: pointer; padding: var(--sp-3) var(--sp-5); border: none; border-radius: var(--radius-sm); background: var(--c-primary); color: #fff; text-align: center; } .btn:hover { background: var(--c-primary-dark); } .btn-ghost { background: #fff; color: var(--c-text); border: 1px solid var(--c-border); } .btn-ghost:hover { background: var(--c-bg-soft); } .btn[disabled] { opacity: .6; cursor: not-allowed; } .field { margin-bottom: var(--sp-3); } .field label { display: block; font-size: var(--fs-title); color: var(--c-title); font-weight: var(--fw-bold); margin-bottom: var(--sp-1); } .field input, .field textarea, .field select { width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); outline: none; background: #eff6ff; } .field input:focus, .field textarea:focus, .field select:focus { border-color: #0b78ad; background: #fff; } .field .err { color: var(--c-badge); font-size: var(--fs-small); margin-top: var(--sp-1); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } /* grid 子项默认 min-width:auto 会被 input 固有宽度撑破（小屏横向溢出根因） */ .grid-2 > *, .checkout-grid > * { min-width: 0; } .field input, .field textarea, .field select { min-width: 0; } /* ---------- 详情页 ---------- */ .detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; } .detail .gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-bg-soft); } .detail .gallery .thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } .detail .gallery .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--c-border); } .detail .title { font-size: var(--fs-h2); color: var(--c-title); margin-bottom: var(--sp-2); } .detail .price { font-size: var(--fs-h2); color: var(--c-price); font-weight: 800; margin: var(--sp-2) 0; } .detail .price-old { font-size: var(--fs-body); color: var(--c-price-old); text-decoration: line-through; margin-left: var(--sp-2); } .detail .desc { color: var(--c-text-sub); margin: var(--sp-3) 0; } .variants { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; align-content: start; } /* 规格列数自适应：短标题多列均分、中长 2 列、长标题也按容器尽量多列（允许折行），grid 1fr 铺满不留白 */ .variants.var-len-s { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .variants.var-len-m { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .variants.var-len-l { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); } .variants.var-len-l .variant { white-space: normal; } .variant { font-size: var(--fs-body); font-weight: 700; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; background: #fff; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-title); } .variant.active { border-color: #0b78ad; color: var(--c-title); font-weight: 700; } /* 带缩略图的规格卡片：图在上、名在下，纵向排列 */ /* 规格卡片：图在上、名在下；内边距四边统一 10px（图到卡片边框四周都是 10px） */ .variant.has-img { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; white-space: normal; text-align: center; } /* 规格图：1:1 正方形，铺满内容区（= 卡片宽 - 20px padding），因此四周到边框恒为 10px；padding 加大后图片随之变小 */ .variant.has-img .v-thumb { width: 100%; aspect-ratio: 1 / 1; flex: none; object-fit: cover; border-radius: var(--radius-sm); background: var(--c-bg-soft); } .variant.has-img .v-name { font-size: var(--fs-small); line-height: var(--lh-body); width: 100%; overflow: visible; } .variant.has-img.active .v-thumb { box-shadow: 0 0 0 2px #0b78ad inset; } /* 桌面端规格卡片图固定为左栏缩略图尺寸 84px（用户 2026-10-13：原来铺满卡片太大）； 并把含图规格网格收窄到 104px/列（= 84px 图 + 左右各 10px 内边距），消除卡片留白。 手机端（<768）不受影响：仍走 width:100% 自适应 + 4 列网格。 */ @media (min-width: 768px) { .variant.has-img .v-thumb { width: 84px; height: 84px; aspect-ratio: auto; } .variants.var-len-s { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } } .buy-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; } /* ---------- 详情页 PDP（三栏：画廊 | 信息 | 购买面板跨行；About 横跨左+中两列通栏） ---------- */ .pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 460px; grid-template-areas: "crumb crumb buy" "gallery info buy" "about about buy"; column-gap: var(--sp-5); row-gap: 15px; align-items: start; } /* 行间距 15px：面包屑↔画廊（用户 2026-10-13 v235）；列距不变 */ .breadcrumb.pdp-crumb { grid-area: crumb; margin: 0; line-height: 1.2; } /* 双类特异度压过 .breadcrumb{margin-bottom:8px}（v237 漏网：8+15=23px 非 15px）；行高 1.2 防半行距撑大视觉间距（v237/v239 用户实测投诉） */ /* 手机端商品名段隐藏见下方媒体查询 */ /* grid 子项默认 min-width:auto 会被图片/表格撑破列宽（手机端横向溢出根因），统一允许收缩 */ .pdp > * { min-width: 0; } .pdp-gallery { grid-area: gallery; display: flex; gap: var(--sp-3); align-items: flex-start; } .pdp-main { position: relative; flex: 1; min-width: 0; height: 520px; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-soft); } .pdp-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pdp-track::-webkit-scrollbar { display: none; } .pdp-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; } /* 视频主图格（轨道第一格） */ .pdp-track .track-video { flex: 0 0 100%; width: 100%; height: 100%; position: relative; scroll-snap-align: start; background: var(--c-bg-soft); } .track-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .track-video .vid-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; } .track-video.playing .vid-cover, .track-video.playing .vid-play { display: none; } .track-video .vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .track-video .vid-play:hover { background: rgba(0, 0, 0, .75); } .pop-tag { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; background: var(--c-badge-new); color: #fff; font-size: var(--fs-small); font-weight: 700; padding: 3px var(--sp-2); border-radius: var(--radius-sm); } .pdp-thumbs { display: flex; flex-direction: column; gap: var(--sp-2); flex: none; width: 84px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; } .pdp-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--c-border); cursor: pointer; transition: border-color .2s, transform .2s; background: #fff; } .pdp-thumbs img:hover { border-color: #f3b0b3; transform: translateY(-1px); } .pdp-thumbs img.active { border-color: var(--c-primary); } /* 缩略图视频格 */ .pdp-thumbs .thumb-video { position: relative; width: 84px; height: 84px; flex: none; border-radius: var(--radius-sm); border: 2px solid var(--c-border); cursor: pointer; overflow: hidden; background: #000; } .pdp-thumbs .thumb-video img { width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; } .pdp-thumbs .thumb-video .tv-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: rgba(0, 0, 0, .35); } .pdp-thumbs .thumb-video.active { border-color: var(--c-primary); } /* 通栏 Review 模块（You may also like 上方，仅电脑端） */ .pdp-reviews-block { margin-top: var(--sp-5); } .pdp-reviews-block .rv-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .rv-card { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); min-width: 0; } .rv-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); } .rv-head .stars { color: var(--c-rating); font-size: var(--fs-body); letter-spacing: 1px; } .rv-dim { color: var(--c-border); } .rv-name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-title); overflow-wrap: anywhere; } .rv-head .vp { font-size: var(--fs-small); } .rv-txt { margin: 0; font-size: var(--fs-body); color: var(--c-text); line-height: var(--lh-body); overflow-wrap: anywhere; word-break: break-word; } /* 超长无空格词（俄语评价整句无空格）强制断行，防撑破卡片致手机端横向溢出（用户 2026-10-13 v201） */ .rv-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; border: 1px solid var(--c-border); } .rv-country { font-size: var(--fs-small); color: var(--c-text-sub); } .rv-date { font-size: var(--fs-small); color: var(--c-text-sub); margin-left: auto; } .rv-imgs { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); } .rv-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--c-border); } @media (max-width: 1024px) { .pdp-reviews-block .rv-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .pdp-reviews-block { display: none; } } /* 手机端：Review 块上间距与其它区块（You may also like 等）一致 */ @media (max-width: 767px) { #rq-block { margin-top: var(--sp-7); } } .pdp-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; } /* 电脑端：Review 卡片底边与主图底边 JS 精确对齐（alignRq），此处仅去卡片下边距 */ @media (min-width: 768px) { .pdp-info #rq-block { margin-bottom: 0; } .pdp-info #rq-block .review-quote { margin-bottom: 0; } } .pdp-opt { margin-bottom: var(--sp-4); } .pdp-opt > label { display: block; font-size: var(--fs-title); color: var(--c-title); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); } /* Quantity 标题与步进器同行：标题左、控件右 */ .pdp-opt.qty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .pdp-opt.qty-row > label { margin-bottom: 0; } .pdp-opt.qty-row .qty-box { flex: none; } /* 已选规格：蓝字小字无边框，弹性收缩防手机溢出 */ .sel-variant { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 700; color: #0b78ad; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdp-opt .variants { margin: 0; } .qty-box { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; } .qty-box button { width: 38px; height: 38px; border: none; background: var(--c-bg-soft); font-size: var(--fs-title); cursor: pointer; color: var(--c-title); } .qty-box button:hover { background: #eceef1; } /* 数量到达下限（批发态 = 起订量）时减号禁用：只能加不能减（用户 2026-10-14 v266 指定） */ .qty-box button:disabled, .qty-box button:disabled:hover { opacity: .35; cursor: not-allowed; background: var(--c-bg-soft); } .qty-box input { width: 56px; height: 38px; border: none; border-left: 1px solid var(--c-border); border-right: 1px solid var(--c-border); text-align: center; font-size: var(--fs-body); outline: none; background: #fff; } .qty-box input::-webkit-outer-spin-button, .qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .trust-list { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-border); } .trust-list li { font-size: var(--fs-body); color: var(--c-text-sub); padding: var(--sp-1) 0; } @media (min-width: 768px) { .trust-list { display: flex; align-items: center; gap: var(--sp-5); } } .pdp-rating { font-size: var(--fs-body); margin-bottom: var(--sp-2); } .pdp-rating a { color: var(--c-link); } .verified-badge { display: inline-block; font-size: var(--fs-small); color: var(--c-link); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 1px var(--sp-2); margin-left: var(--sp-2); } .pdp-title { font-size: var(--fs-pdp-title); color: var(--c-title); font-weight: var(--fw-strong); line-height: var(--lh-body); margin-bottom: var(--sp-3); } /* 内联 Review 块（信息区）：卡片格式同通栏；桌面只显示最新 1 条，手机端 4 条全显 */ #rq-block .rv-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } #rq-block .rv-cards .rv-card:nth-child(n+2) { display: none; } @media (max-width: 767px) { #rq-block .rv-cards .rv-card:nth-child(n+2) { display: block; } } .about-body { font-size: var(--fs-title); line-height: var(--lh-body); color: var(--c-text); } .about-body img { max-width: 100%; width: 100%; height: auto; border-radius: var(--radius-sm); margin: var(--sp-3) 0; } /* CJ 详情内嵌表格/视频防撑破窄列（手机端横向溢出兜底） */ .about-body table { max-width: 100%; overflow-x: auto; display: block; border-collapse: collapse; } .about-body iframe, .about-body video, .about-body embed, .about-body object { max-width: 100%; } .about-body ul, .about-body ol { padding-left: var(--sp-5); } .about-body p { margin: var(--sp-3) 0; } .pdp-buy { grid-area: buy; min-width: 0; border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); background: #fff; position: sticky; top: calc(var(--header-h, 100px) + 4px); } .pdp-buy .price { font-size: var(--fs-hero); } .pdp-price { margin: 0 0 var(--sp-2); } /* 页面内价格行：仅手机端在 Rating 行下方常驻显示（见下方 767 断点）； 桌面端不显示本行 → 桌面价格仍只在右栏购买面板内，布局零变化 */ .pdp-price-inline { display: none; } .risk-free { font-size: var(--fs-small); color: var(--c-badge-new); background: #ecfdf3; border-radius: 999px; padding: 2px var(--sp-2); } .save-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); } .save-tag { font-size: var(--fs-small); font-weight: 700; color: var(--c-badge-new); background: #ecfdf3; border-radius: var(--radius-sm); padding: 2px var(--sp-2); white-space: nowrap; } .pdp-buy .qty-box { border-color: #2bb673; box-shadow: 0 0 0 1px #2bb673 inset; } .stock-line { font-size: var(--fs-body); color: var(--c-badge-new); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); } .btn-cart, .btn-buy { display: block; width: 100%; padding: var(--sp-4); font-size: var(--fs-title); font-weight: var(--fw-bold); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); border: none; cursor: pointer; } .btn-buy { background: #0b78ad; color: #fff; } .btn-buy:hover { background: #09628c; } .btn-cart { background: #fff; color: #0b78ad; border: 1px solid #0b78ad; } .btn-cart:hover { background: #eaf6fb; } /* ===== 零售/批发模式切换标签 + 阶梯表（新增 UI；零售态不渲染内容，零售模块逻辑/布局零影响） ===== */ .ws-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); } /* 纯文字标签（用户 2026-10-13 指定）：无背景无边框，选中项蓝色加粗即可。 字号 16px 桌面/手机一致（用户 2026-10-13 指定，不随断点变化）。 */ .ws-tab { flex: 1 1 0; min-width: 0; font-size: 16px; font-weight: 500; color: var(--c-text-sub); background: none; border: 0; border-radius: 0; padding: 6px var(--sp-3); cursor: pointer; text-align: center; line-height: 1.2; transition: color .15s; } .ws-tab.active { color: var(--c-link); font-weight: 700; } .ws-tab.disabled { opacity: .45; cursor: not-allowed; } /* 电脑端（≥769）：模式切换标签移到购买面板卡片「上边框之外的上方」（用户 2026-10-13 v252 指定）。 几何铁律（v264 用户定稿）：面包屑与标签的「盒顶边」在同一条线上，两者各自上下间距**都是 15px** —— 面包屑：上间距 = main#root > .wrap 的 padding-top 15px；下间距 = margin-bottom 0 + .pdp row-gap 15 = 15px。 标签： 上间距 = 盒顶 ↔ 顶栏底边 = 15px（盒顶与面包屑盒顶同线）； 下间距 = 盒底 ↔ 卡片上边框 = 15px（--ws-gap 取 16：绝对定位包含块是卡片内边距盒， 16 = 15px 视觉间隙 + 卡片自身 1px 上边框）。 ⚠️ 为此桌面端把 .ws-tab 上下内边距清零 → 盒高 = 文字行盒 19.2px = 面包屑盒高 16.8 + 2.4， 两个盒顶对齐后视觉就是「同一条线 + 上下各 15px」。手机端内边距 6px 保持不变。 --ws-strip = 卡片上外边距（相对网格第 1 行顶，即面包屑行顶）： 34.2 = 标签盒高 19.2 + 标签上间距 15 → 卡片上边框 = 面包屑行顶 + 34.2， 此时标签盒底 = 卡片上边框 − 15（下间距 15）。⚠️ 一个值同时锁住「上 15 / 下 15」，勿擅改。 吸顶基准（v265 用户指定）：滚动时「标签盒顶 = 视口顶 + 15px」→ top = 15 + --ws-strip = 49.2px。 ⚠️ 原规则 top: calc(var(--header-h, 100px) + 4px) = 108.8px 会让标签顶停在 74.6px，顶部空白过大； 本页 #site-header 实为 position:static（.site-header{position:sticky} 因元素无该 class 不生效）， 页头会随页面滚走、不占视口，故吸顶基准不能再叠加 header 高度。 */ @media (min-width: 769px) { .pdp-buy { --ws-strip: 34.2px; --ws-gap: 16px; margin-top: var(--ws-strip); top: calc(15px + var(--ws-strip)); } .pdp-buy > .ws-tabs { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 100%; margin: 0 0 var(--ws-gap); } .pdp-buy > .ws-tabs .ws-tab { padding-top: 0; padding-bottom: 0; } } .ws-block { margin: 0 0 var(--sp-3); } .ws-min { font-size: var(--fs-small); font-weight: 700; color: var(--c-text-sub); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 4px var(--sp-3); margin-bottom: var(--sp-2); } .ws-min-warn { color: #b45309; background: #fffbeb; border-color: #fde68a; } /* 起订量提示「行内版」：随价格同排、右对齐（用户 2026-10-13 指定；v258 起电脑端+手机端统一）。 批发态起订量提示一律并入价格行；ws-block 内旧的整行提示条 .ws-min-bar 全端隐藏（占位保留便于回退）。 零售态不渲染该节点 → 零售逻辑/布局零改动。 */ /* v260：起订量 chip 与价格「同一水平线」（用户 2026-10-13 指定：往上移、与价格对齐）。 .price-row 是 align-items:baseline，inline-block 的基线对齐会把 chip 压到价格基线下方 （实测 chip 中心比价格中心低 7.8px 桌面 / 3.8px 手机）；改 align-self:center 后 chip 居中于价格行盒 = 价格视觉中心（误差 ≈1px）。行高仍由价格决定 → 行高与其它元素位置零变动。 */ .ws-min-inline { display: inline-block; margin: 0 0 0 auto; white-space: nowrap; align-self: center; } .ws-block .ws-min-bar { display: none; } .ws-tiers { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .ws-tiers th, .ws-tiers td { text-align: left; padding: 6px var(--sp-3); border-bottom: 1px solid var(--c-border); } .ws-tiers th { color: var(--c-text-sub); font-weight: 600; } .ws-tiers td:last-child, .ws-tiers th:last-child { text-align: right; } .ws-tiers tbody tr:last-child td { border-bottom: none; } .ws-tiers tr.active td { background: #ecfdf3; color: #166534; font-weight: 700; } /* v267：手机端数量阶梯表所有行（表头 th + 数据行 td）高度各 +5px —— 垂直内边距 6px → 8.5px（上下各 +2.5px，合计 +5px）；电脑端 ≥769 不生效、行高不变 */ @media (max-width: 768px) { .ws-tiers th, .ws-tiers td { padding-top: 8.5px; padding-bottom: 8.5px; } /* v268（用户 2026-10-14 指定，仅手机端）：阶梯表「标题行」（Quantity / Unit price 表头行） 文字上下净空白各 15px —— 改前实测 上方 24.5px（.sheet-foot 的 16px flex 间隙 + 8.5px 内边距）/ 下方 8.5px（表头行下内边距），现改为上下对称 15px。 ① 下方：表头行内下内边距 8.5px → 15px（到那条下边框线）； ② 上方：表头行内上内边距同样 8.5px → 15px，同时把价格行与表格之间的 16px 间隙抵消 （-16px = .sheet-foot 的 gap），否则上方会变成 16+15=31px； ③ 数据行（td）仍为 8.5px（v267 值不变），电脑端 ≥769 完全不生效（表头行仍 6px、间隙仍 8px）。 */ .ws-tiers th { padding-top: 15px; padding-bottom: 15px; } .ws-tiers { margin-top: -16px; } /* v268（用户 2026-10-14 指定，仅手机端）：最下面一行（1001–100000）也显示下边框 → 阶梯表闭合； 基础规则 .ws-tiers tbody tr:last-child td{border-bottom:none} 由本块覆盖（同选择器、后声明）。 电脑端不受影响（最后一行仍无下边框）。 */ .ws-tiers tbody tr:last-child td { border-bottom: 1px solid var(--c-border); } } /* v269（用户 2026-10-14 指定，仅电脑端 ≥769）：阶梯表「标题行」（Quantity / Unit price 表头行） 文字上下净空白各 15px —— 改前实测 上方 14px（#buy-price 的 8px 下外边距 + 表头行 6px 内边距）/ 下方 6px（表头行下内边距），现改为上下对称 15px。 ① 下方：表头行内下内边距 6px → 15px（到那条下边框线）； ② 上方：表头行内上内边距同样 6px → 15px，同时用 margin-top:-8px 抵消 #buy-price 的 8px 下外边距，否则上方会变成 8+15=23px； ③ 数据行（td）内边距仍 6px（不变），行高不变；手机端 ≤768 不生效（走 v267/v268 规则）。 */ @media (min-width: 769px) { .ws-tiers th { padding-top: 15px; padding-bottom: 15px; } .ws-tiers { margin-top: -8px; } /* v269（用户 2026-10-14 指定，仅电脑端 ≥769）：最下面一行（1001–100000）也显示下边框 → 阶梯表闭合； 基础规则 .ws-tiers tbody tr:last-child td{border-bottom:none} 由本块覆盖（同选择器、后声明）。 手机端不受影响（v268 已在 ≤768 块内闭合）。 */ .ws-tiers tbody tr:last-child td { border-bottom: 1px solid var(--c-border); } /* v275（用户 2026-10-14 指定，仅电脑端 ≥769）：数量阶梯表 3 个数据行高度各 +5px —— 数据行 td 垂直内边距 6px → 8.5px（上下各 +2.5px）；表头行 th 保持 15/15 不动； 手机端 ≤768 不受影响（v267 已在 ≤768 块内做过同款 +5px）。与 v267 手机端口径一致。 */ .ws-tiers td { padding-top: 8.5px; padding-bottom: 8.5px; } } /* 区块小标题（规格与 .field label 一致：16px/600/var(--c-title) 黑亮，暗色 #e2e8f0） */ .sg-title { font-size: 16px; font-weight: 600; color: var(--c-title); margin-top: 17px; margin-bottom: 10px; } body.dark .sg-title { color: #e2e8f0; } .mini-badges { display: flex; gap: var(--sp-2); flex-wrap: nowrap; margin-top: 0; margin-bottom: 17px; } .mini-badges span { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); color: var(--c-badge-new); background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); padding: 2px var(--sp-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .viewing-line { font-size: var(--fs-small); color: var(--c-text-sub); text-align: center; margin-bottom: var(--sp-3); } .secure-checkout { font-size: var(--fs-body); color: var(--c-badge-new); margin-top: 5px; margin-bottom: 13px; } .pay-icons { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; margin-top: 5px; margin-bottom: var(--sp-3); } .pay-icons .pi { flex: 0 1 auto; min-width: 0; font-size: 10px; font-weight: 800; color: #1d3557; background: #fff; border: 1px solid var(--c-border); border-radius: 3px; padding: 2px 6px; letter-spacing: .3px; white-space: nowrap; } .pay-icons .pi.mc { color: #eb8c00; } .pay-icons .pi.amex { color: #2e77bc; } .pay-icons .pi.gpay { color: #5f6368; } .pay-icons .pi.apple { color: #333; } .pay-icons .pi.disc { color: #e26f2a; } .chat-box { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3); font-size: var(--fs-small); color: var(--c-text-sub); margin-top: 17px; margin-bottom: var(--sp-4); } .chat-box a { color: var(--c-link); font-weight: var(--fw-bold); } .pdp-faq .faq-item { background: #eef6fb; border: none; border-radius: var(--radius); margin-bottom: var(--sp-2); } .pdp-faq summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); cursor: pointer; font-size: var(--fs-body); color: var(--c-title); list-style: none; } .pdp-faq summary::-webkit-details-marker { display: none; } .faq-diamond { color: var(--c-link); } .faq-q { flex: 1; } .faq-arrow { color: var(--c-link); font-size: var(--fs-title); transition: transform .2s; } .faq-item[open] .faq-arrow { transform: rotate(90deg); } .faq-a { padding: 0 var(--sp-3) var(--sp-3); font-size: var(--fs-body); color: var(--c-text-sub); line-height: var(--lh-body); } .pdp-related { margin-top: var(--sp-7); } .pdp-about { grid-area: about; margin-top: 5px; border-top: 1px solid var(--c-border); padding-top: var(--sp-5); padding-left: 10px; padding-right: 10px; } /* margin-top 5px + 网格行距 15px = 标签行底边↔About 上边线 20px（用户 2026-10-13 v240，三端同值） */ /* ---------- 骨架屏 ---------- */ .card.sk { pointer-events: none; } .card.sk .sk-img { aspect-ratio: 1 / 1; background: linear-gradient(90deg, #f0f1f3 25%, #e6e7ea 37%, #f0f1f3 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; } .card.sk .sk-info { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); } .card.sk .sk-line { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #f0f1f3 25%, #e6e7ea 37%, #f0f1f3 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; } .card.sk .sk-line.w80 { width: 80%; } .card.sk .sk-line.w60 { width: 60%; } .card.sk .sk-line.w40 { width: 40%; } @keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------- 分类页（仿 inspireuplift：横幅 + 面包屑 + 筛选条 + 数字分页） ---------- */ .cat-banner { background: linear-gradient(120deg, #fff1f1 0%, #fff 60%); border-bottom: 1px solid var(--c-border); } .cat-banner .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } /* 条内上下 10px（v230 保持） */ /* 搜索页筛选容器：wrap 上内边距 24→15px = 粉色条底边↔选项框顶边的白色间距（用户 2026-10-13 v233） */ body.search-page main > .wrap { padding-top: 15px; } /* 面包屑 / 件数 / 排序工具条：全行统一 12px / 400 / #14181f（用户 2026-10-12 定） */ .breadcrumb { font-size: var(--fs-filter); font-weight: 400; color: var(--c-text); margin-bottom: var(--sp-2); } .cat-banner .breadcrumb { margin-bottom: 0; } .breadcrumb a { color: var(--c-text); font-weight: 400; } .breadcrumb a:hover { color: var(--c-link); } .breadcrumb span { margin: 0 var(--sp-1); color: var(--c-text); font-weight: 400; } .breadcrumb b { color: var(--c-text); font-weight: 400; } /* 详情页顶部：导航栏下内边距 12 + 1px 边框 + wrap 上内边距 2 = 面包屑上间距 15px（用户 2026-10-13 v235，手机端基准） */ main#root > .wrap { padding-top: 2px; } /* 电脑端（≥769）：详情页面包屑「上间距 = 15px、下间距 = 15px」（用户 2026-10-14 v264 指定，以面包屑自身为基准）； 面包屑与 Retail/Wholesale 标签仍同处一条水平线（两者盒顶边对齐，随 .pdp 网格顶同步位移）；手机端（≤768）保持原值不变（上 15 / 下 15 已由 12+1+2 / row-gap 15 天然成立）。 —— 上间距 15px = 顶栏（#site-header）底边 ↔ 面包屑盒顶 = main#root > .wrap 的 padding-top。 —— 下间距 15px = 面包屑盒底 ↔ 商品图区（.pdp-gallery）顶 = .breadcrumb.pdp-crumb margin-bottom 0 + .pdp row-gap 15。 —— 标签底 ↔ 购买面板卡片上边框 = 15px（--ws-gap 16，含卡片自身 1px 边框）；标签盒顶上探量由 --ws-strip 34.2 锁死（= 19.2 + 15）。 字号：12px（--fs-filter）→ 14px（--fs-body）；仅详情页面包屑，手机端与搜索页保持 12px。 只作用于详情页（main#root 仅 product.html 使用）；双类选择器 .breadcrumb.pdp-crumb 压过 .breadcrumb 基础规则。 */ @media (min-width: 769px) { main#root > .wrap { padding-top: 15px; } /* v271：下间距 15 → 30px（用户指定，只调左侧）：margin-bottom 15 + row-gap 15 = 30； 右侧购买卡片顶锚在网格第一行顶（--ws-strip 不变），行一被撑高只把左侧 gallery 推下，卡片与标签位置零变化 */ .breadcrumb.pdp-crumb { margin-bottom: 15px; font-size: var(--fs-body); } } /* 详情页面包屑：手机端一行显示，商品标题过长截断省略号（用户 2026-10-13 v235，替代旧的隐藏规则） */ @media (max-width: 768px) { .pdp-crumb { display: flex; align-items: center; white-space: nowrap; overflow: hidden; } .pdp-crumb a, .pdp-crumb .crumb-sep { flex: 0 0 auto; } .pdp-crumb .crumb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 支付 7 图标手机收紧内距/字号，保证一行铺满不换行 */ .pay-icons .pi { padding: 2px 3px; font-size: 9px; letter-spacing: 0; } .mini-badges { gap: var(--sp-1); } .mini-badges span { padding: 2px 4px; } } .cat-banner-title { font-size: var(--fs-hero); color: var(--c-title); margin-bottom: var(--sp-1); } .cat-banner-sub { font-size: var(--fs-filter); font-weight: 400; color: var(--c-text); margin: 0; } .filter-bar { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); flex-wrap: nowrap; margin: 0 0 15px; } /* 选项框下边↔商品列表上边框 15px（v233，两端同步） */ /* Price / Rating 胶囊下拉 */ .pill-dd { position: relative; } .pill { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-filter); font-weight: 400; color: var(--c-text); background: transparent; border: 1px solid var(--c-border); border-radius: 999px; height: 32px; padding: 0 var(--sp-4); cursor: pointer; white-space: nowrap; } .pill:hover { border-color: var(--c-border); } .pill .caret { font-size: var(--fs-filter); line-height: 1; color: var(--c-text); } .pill-dd.open .pill { border-color: var(--c-border); } .dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 180px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: var(--sp-1); } .pill-dd.open .dd-menu { display: block; } .dd-menu button { display: block; width: 100%; text-align: left; border: none; background: none; font-size: var(--fs-filter); font-weight: 400; color: var(--c-text); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .dd-menu button:hover { background: var(--c-bg-soft); color: var(--c-link); } .filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .chip { font-size: var(--fs-body); color: var(--c-text-sub); border: 1px solid var(--c-border); border-radius: 999px; padding: var(--sp-1) var(--sp-4); background: #fff; transition: border-color .2s, color .2s; } .chip:hover { border-color: var(--c-primary); color: var(--c-primary); } .chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: var(--fw-bold); } /* Sort 下拉已由原生