/* ========================================================================== IDENTITY: VELTA-UA · standalone project 本文件属「VELTA 乌克兰站」独立项目。禁止与任何其他站点（含禅风水韵）的 boundary-ok 样式表串用、互拷或合并构建；本文件内不存在外部项目的 token 与组件。 混淆红线见 ../UI设计研究报告.md §0；新增组件一律 vl- 前缀。 ========================================================================== */ /* ========================================================================== VELTA — Design System "Північна ясність" / Northern clarity A Ukrainian general-market platform that reads as a European institution: warm paper, graphite ink, one deep marine accent, editorial restraint. ========================================================================== */ /* 1. Reset ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0} ul,ol{padding:0;list-style:none} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} table{border-collapse:collapse;width:100%} /* 2. Tokens ---------------------------------------------------------------- */ :root{ /* surfaces */ --bg:#F7F5F0; --bg-2:#EFEBE2; --surface:#FFFFFF; --surface-2:#FBFAF6; /* ink */ --fg:#12161C; --fg-2:#3C434D; --muted:#656B73; --faint:#71777F; /* lines */ --line:#DFD9CB; --line-2:#CBC3B2; /* brand */ --marine:#16324E; --marine-2:#0E2237; --marine-3:#234A70; --accent:#A96C22; --accent-ink:#8C5715; /* 金色文字专用（AA 5.52:1 on paper），装饰仍用 --accent */ --accent-soft:#F1E4CE; /* semantic */ --ok:#2C6A4C; --ok-soft:#E4EFE7; --warn:#9A5A18; --danger:#A03A31; /* radius */ --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px; /* spacing */ --gutter:24px; --section:96px; /* motion */ --ease:cubic-bezier(.22,.61,.24,1); --t-fast:160ms; --t:280ms; --shadow-1:0 1px 2px rgba(18,22,28,.05),0 8px 24px -16px rgba(18,22,28,.18); --shadow-2:0 2px 6px rgba(18,22,28,.06),0 24px 48px -24px rgba(18,22,28,.22); --container:1320px; --hd-h:176px; } /* 3. Type ------------------------------------------------------------------ */ html{font-size:100%} body{ font-family:"Onest","Helvetica Neue",Arial,"Segoe UI",sans-serif; font-size:15px; line-height:1.62; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .display{ font-size:clamp(2.5rem,5.4vw,5.1rem); line-height:.98; font-weight:300; letter-spacing:-.032em; } h1,.h1{font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.04;font-weight:300;letter-spacing:-.026em} h2,.h2{font-size:clamp(1.625rem,2.4vw,2.375rem);line-height:1.1;font-weight:300;letter-spacing:-.022em} h3,.h3{font-size:1.25rem;line-height:1.3;font-weight:500;letter-spacing:-.012em} h4,.h4{font-size:1rem;line-height:1.4;font-weight:500} .eyebrow{ font-size:.6875rem;line-height:1.2;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .lede{font-size:1.0625rem;line-height:1.66;color:var(--fg-2);max-width:56ch} .small{font-size:.8125rem;line-height:1.55;color:var(--muted)} .tiny{font-size:.75rem;line-height:1.45;color:var(--muted)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .serif{font-family:"Lora",Georgia,"Times New Roman",serif} /* 4. Layout ---------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section)} .section--tight{padding-block:64px} .rule{height:1px;background:var(--line);border:0} .stack-8>*+*{margin-top:8px} .stack-16>*+*{margin-top:16px} .stack-24>*+*{margin-top:24px} .row{display:flex;align-items:center;gap:16px} .between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} .grid{display:grid;gap:24px} .grid--split{grid-template-columns:1fr 1fr} .grid > *{min-width:0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px} .sec-head__l{max-width:52ch} .sec-head .eyebrow{margin-bottom:14px} .link-arrow{ display:inline-flex;align-items:center;gap:8px; font-size:.875rem;font-weight:500;border-bottom:1px solid var(--line-2); padding-bottom:3px;transition:border-color var(--t-fast),color var(--t-fast); white-space:nowrap; } .link-arrow:hover{border-color:var(--fg);color:var(--fg)} .link-arrow svg{width:14px;height:14px;transition:transform var(--t-fast)} .link-arrow:hover svg{transform:translateX(3px)} /* 5. Buttons / forms ------------------------------------------------------- */ .btn{ --btn-bg:var(--fg);--btn-fg:#FBF9F4;--btn-bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:0 24px;border-radius:var(--r-sm); background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd); font-size:.9375rem;font-weight:500;letter-spacing:-.005em; transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast); } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn--accent{--btn-bg:var(--marine);--btn-fg:#fff} .btn--accent:hover{--btn-bg:var(--marine-2)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--line-2)} .btn--ghost:hover{--btn-bd:var(--fg);--btn-bg:transparent} .btn--light{--btn-bg:#F7F5F0;--btn-fg:var(--marine-2)} .btn--outline-light{--btn-bg:transparent;--btn-fg:#F7F5F0;--btn-bd:rgba(247,245,240,.34)} .btn--outline-light:hover{--btn-bd:#F7F5F0} .btn--sm{min-height:40px;padding:0 18px;font-size:.875rem} .btn--block{width:100%} .btn svg{width:18px;height:18px} .field{ width:100%;height:48px;padding:0 14px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-sm); font-size:.9375rem;transition:border-color var(--t-fast),box-shadow var(--t-fast); } .field::placeholder{color:var(--faint)} .field:hover{border-color:var(--line-2)} .field:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(22,50,78,.12)} /* focus visibility everywhere */ :focus-visible{outline:2px solid var(--marine);outline-offset:2px} /* 6. Header ---------------------------------------------------------------- */ .skip{position:absolute;left:-9999px;top:0;background:var(--fg);color:#fff;padding:12px 18px;z-index:200} .skip:focus{left:16px;top:16px} .topbar{background:var(--fm,var(--marine-2));color:#E9E4D8;font-size:.75rem;letter-spacing:.01em} .topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:40px} .topbar__l,.topbar__r{display:flex;align-items:center;gap:20px} .topbar a{color:#E9E4D8;opacity:.82;transition:opacity var(--t-fast)} .topbar a:hover{opacity:1} .topbar .dot{width:3px;height:3px;border-radius:50%;background:rgba(233,228,216,.4)} .topbar__trade{font-weight:500;opacity:1;display:inline-flex;align-items:center;gap:6px} .topbar__trade svg{width:13px;height:13px} .hd{position:sticky;top:0;z-index:80;background:var(--surface);border-bottom:1px solid var(--line)} .hd__main{display:flex;align-items:center;gap:32px;height:84px} .logo{display:flex;align-items:center;gap:10px;flex:0 0 auto} .logo__mark{width:26px;height:26px;flex:0 0 auto} .logo__tx{font-size:1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase} .logo__tx b{font-weight:300} .search{flex:1 1 auto;position:relative;max-width:620px} .search input{ width:100%;height:48px;padding:0 52px 0 18px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--surface-2); font-size:.9375rem;transition:background var(--t-fast),border-color var(--t-fast); } .search input::placeholder{color:var(--faint)} .search input:focus{outline:none;background:var(--surface);border-color:var(--marine)} .search__btn{position:absolute;right:4px;top:4px;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-xs);color:var(--fg-2)} .search__btn:hover{background:var(--bg-2);color:var(--fg)} .search__btn svg{width:19px;height:19px} .hd__acts{display:flex;align-items:center;gap:4px;margin-left:auto} .iconbtn{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-width:60px;height:52px;padding:0 8px;border-radius:var(--r-sm); font-size:.6875rem;color:var(--fg-2);transition:background var(--t-fast),color var(--t-fast); } .iconbtn:hover{background:var(--bg-2);color:var(--fg)} .iconbtn svg{width:21px;height:21px} /* 登录态标识（2026-11-03）：桌面端昵称染金；移动端见下方断点内的胶囊样式 */ a.iconbtn.is-user{color:var(--accent-ink)} .iconbtn__t{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iconbtn__n{ position:absolute;top:6px;right:12px;min-width:17px;height:17px;padding:0 4px; display:grid;place-items:center;border-radius:999px;background:var(--accent); color:#fff;font-size:.625rem;font-weight:600;line-height:1; } .hd__burger{display:none} /* category nav */ .catnav{position:relative;border-top:1px solid var(--line);background:var(--surface)} .catnav__in{display:flex;align-items:center;gap:4px;height:52px;overflow:visible} .catnav__item{position:static} .catnav__link{ display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 15px; font-size:.875rem;font-weight:500;color:var(--fg-2); border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast); } .catnav__link:hover,.catnav__item.is-open .catnav__link{color:var(--fg);border-color:var(--fg)} .catnav__link svg{width:12px;height:12px;opacity:.5} .catnav__sale{color:var(--accent-ink)} .catnav__spacer{margin-left:auto} .catnav__meta{display:flex;align-items:center;gap:18px;font-size:.8125rem;color:var(--muted)} .catnav__meta span{display:inline-flex;align-items:center;gap:6px} .catnav__meta svg{width:15px;height:15px} /* mega */ .mega{ position:absolute;left:0;right:0;top:100%;z-index:70; background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:var(--shadow-1); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast); } .catnav__item.is-open .mega{opacity:1;visibility:visible;transform:none} .mega__in{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:40px;padding:36px 0 40px} .mega__col .mega__h{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500} .mega__col li+li{margin-top:9px} .mega__col a{font-size:.9375rem;color:var(--fg-2);transition:color var(--t-fast)} .mega__col a:hover{color:var(--fg)} .mega__promo{background:var(--bg-2);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px} .mega__promo .mega__promo__h{font-size:1.25rem;font-weight:400;letter-spacing:-.02em;line-height:1.2;margin-top:10px} .mega__promo p{font-size:.8125rem;color:var(--muted);margin-top:8px} /* 7. Hero ------------------------------------------------------------------ */ .hero{padding-top:56px;padding-bottom:72px} .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center} .hero__copy .eyebrow{margin-bottom:22px} .hero__copy h1{margin-bottom:26px;max-width:15ch} .hero__copy .lede{margin-bottom:34px} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px} .hero__stats{display:flex;gap:40px;padding-top:26px;border-top:1px solid var(--line)} .hero__stat b{display:block;font-size:1.5rem;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .hero__stat span{font-size:.75rem;color:var(--muted);letter-spacing:.02em} .hero__media{position:relative;aspect-ratio:4/4.5;border-radius:var(--r);overflow:hidden;background:var(--bg-2)} .hero__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03)} .hero__tag{ position:absolute;left:20px;bottom:20px;right:20px; background:rgba(18,22,28,.72);color:#F5F2EA;backdrop-filter:blur(6px); padding:14px 18px;border-radius:var(--r-sm);font-size:.8125rem; display:flex;align-items:center;justify-content:space-between;gap:16px; } .hero__tag b{font-weight:500} /* 8. Bento categories ------------------------------------------------------ */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:216px;gap:16px} .cat{ position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg-2); display:flex;flex-direction:column;justify-content:flex-end;padding:22px; transition:transform var(--t),box-shadow var(--t); } .cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} .cat img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:contrast(1.05) brightness(1.02); transition:transform .8s var(--ease),filter var(--t); } .cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,22,28,0) 38%,rgba(18,22,28,.62) 100%)} .cat:hover img{transform:scale(1.04)} .cat__body{position:relative;z-index:2;color:#F7F5F0} .cat__body h3{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em} .cat__body span{display:block;font-size:.75rem;opacity:.76;margin-top:3px} .cat--lg{grid-column:span 2;grid-row:span 2} .cat--wide{grid-column:span 2} .cat--lg .cat__body h3{font-size:1.5rem;font-weight:400} /* 9. Trust band ------------------------------------------------------------ */ .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2)} .trust__grid{display:grid;grid-template-columns:repeat(4,1fr)} .trust__item{display:flex;gap:14px;padding:30px 24px;border-right:1px solid var(--line)} .trust__item:last-child{border-right:0} .trust__item svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--marine)} .trust__item b{display:block;font-size:.9375rem;font-weight:500} .trust__item span{font-size:.8125rem;color:var(--muted)} /* 10. Product card --------------------------------------------------------- */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px} .pcard{position:relative;display:flex;flex-direction:column} .pcard__media{ position:relative;aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden; background:var(--bg-2); } .pcard__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);transition:transform .7s var(--ease)} .pcard:hover .pcard__media img{transform:scale(1.035)} .pcard__badge{ position:absolute;top:12px;left:12px;padding:4px 9px;border-radius:3px; background:rgba(247,245,240,.94);color:var(--fg); font-size:.6875rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase; } .pcard__badge--trade{background:var(--marine);color:#fff} .pcard__fav{ position:absolute;top:8px;right:8px;width:34px;height:34px;display:grid;place-items:center; border-radius:50%;background:rgba(247,245,240,.9);color:var(--fg-2); opacity:0;transform:translateY(-4px);transition:opacity var(--t-fast),transform var(--t-fast); } .pcard:hover .pcard__fav,.pcard__fav:focus-visible{opacity:1;transform:none} .pcard__fav svg{width:17px;height:17px} .pcard__body{padding-top:14px} .pcard__brand{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .pcard__name{font-size:.9375rem;line-height:1.4;min-height:2.6em} .pcard__name a:hover{text-decoration:underline;text-underline-offset:3px} .pcard__price{margin-top:9px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .pcard__price b{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .pcard__price s{font-size:.8125rem;color:var(--muted)} .pcard__meta{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted)} .stock{display:inline-flex;align-items:center;gap:5px} .stock::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)} .stock--low::before{background:var(--warn)} .pcard__trade{ margin-top:10px;padding-top:10px;border-top:1px dashed var(--line); font-size:.75rem;color:var(--marine);display:flex;align-items:center;gap:6px; } .pcard__trade svg{width:13px;height:13px} /* 11. Trade band ----------------------------------------------------------- */ .trade-band{background:var(--marine-2);color:#EFEBE1} .trade-band__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .trade-band .eyebrow{color:#B9A98A} .trade-band h2{color:#F7F5F0;margin:16px 0 20px} .trade-band p{color:rgba(239,235,225,.72);max-width:48ch} .trade-list{margin:30px 0 34px;display:grid;gap:14px} .trade-list li{display:flex;gap:12px;font-size:.9375rem;color:rgba(239,235,225,.9)} .trade-list svg{width:18px;height:18px;flex:0 0 auto;color:#C9A468;margin-top:2px} .trade-card{background:rgba(247,245,240,.045);border:1px solid rgba(247,245,240,.14);border-radius:var(--r);padding:28px} .trade-card .trade-card__h{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#B9A98A;font-weight:500;margin-bottom:18px} .tier{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(247,245,240,.12)} .tier:last-child{border-bottom:0} .tier__n{font-size:.9375rem} .tier__n span{display:block;font-size:.75rem;color:rgba(239,235,225,.5)} .tier__v{font-size:1.125rem;font-variant-numeric:tabular-nums;color:#C9A468;font-weight:500} /* 12. Editorial ------------------------------------------------------------ */ .ed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .ed-card__media{aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2);margin-bottom:18px} .ed-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .ed-card:hover .ed-card__media img{transform:scale(1.03)} .ed-card .eyebrow{margin-bottom:10px} .ed-card h3{font-size:1.125rem;font-weight:400;line-height:1.35;letter-spacing:-.015em} .ed-card p{font-size:.875rem;color:var(--muted);margin-top:8px} /* 13. Newsletter / footer -------------------------------------------------- */ .news{background:var(--bg-2)} .news__in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-block:64px} .news form{display:flex;gap:10px} .news .field{background:var(--surface)} .ft{background:var(--marine-2);color:#DCD6C8;padding-top:64px} .ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px} .ft .logo__tx{color:#F7F5F0} .ft__about{font-size:.8125rem;color:rgba(220,214,200,.62);max-width:30ch;margin-top:18px;line-height:1.7} .ft .ft__h{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(220,214,200,.5);font-weight:500;margin-bottom:16px} .ft li+li{margin-top:10px} .ft a{font-size:.875rem;color:rgba(220,214,200,.82);transition:color var(--t-fast)} .ft a:hover{color:#fff} .ft__pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .paychip{ height:26px;padding:0 9px;display:grid;place-items:center;border-radius:3px; border:1px solid rgba(220,214,200,.22);font-size:.625rem;letter-spacing:.06em;color:rgba(220,214,200,.78); } .ft__bottom{border-top:1px solid rgba(220,214,200,.14);padding-block:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} .ft__bottom p,.ft__bottom a{font-size:.75rem;color:rgba(220,214,200,.5)} /* 14. Breadcrumbs / catalog ------------------------------------------------ */ .crumbs{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted);padding-top:22px;flex-wrap:wrap} .crumbs a:hover{color:var(--fg)} .crumbs svg{width:11px;height:11px;opacity:.5} .crumbs span[aria-current]{color:var(--fg-2)} .cat-head{padding:26px 0 30px;border-bottom:1px solid var(--line)} .cat-head h1{margin-bottom:12px} .cat-head .lede{font-size:.9375rem;max-width:62ch} .shop{display:grid;grid-template-columns:264px 1fr;gap:48px;padding-block:32px 88px;align-items:start} .filters{position:sticky;top:calc(var(--hd-h) + 20px)} .filters__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .filters__hd b{font-size:.875rem;font-weight:500} .filters__hd button{font-size:.75rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .fgroup{border-top:1px solid var(--line);padding:18px 0} .fgroup:last-child{border-bottom:1px solid var(--line)} .fgroup__head{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.875rem;font-weight:500} .fgroup__head svg{width:13px;height:13px;transition:transform var(--t-fast)} .fgroup.is-open .fgroup__head svg{transform:rotate(180deg)} .fgroup__body{display:none;padding-top:14px} .fgroup.is-open .fgroup__body{display:block} .check{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.875rem;color:var(--fg-2);cursor:pointer} .check input{width:16px;height:16px;accent-color:var(--marine);margin:0} .check span.count{margin-left:auto;font-size:.75rem;color:var(--muted)} .range{display:flex;align-items:center;gap:8px;margin-top:6px} .range input{width:100%;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-xs);font-size:.8125rem} .range span{color:var(--muted)} .toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap} .toolbar__count{font-size:.8125rem;color:var(--muted)} .toolbar__r{display:flex;align-items:center;gap:10px} .select{height:40px;padding:0 34px 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E747C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font-size:.8125rem;appearance:none} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .chip{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:.75rem;color:var(--fg-2);display:inline-flex;align-items:center;gap:6px;background:var(--surface)} .chip svg{width:11px;height:11px} .chip--on{background:var(--fg);color:#F7F5F0;border-color:var(--fg)} .shop .pgrid{grid-template-columns:repeat(3,1fr)} .pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:56px} .pager button{min-width:40px;height:40px;border-radius:var(--r-xs);font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--fg-2)} .pager button:hover{background:var(--bg-2)} .pager button[aria-current]{background:var(--fg);color:#F7F5F0} /* 15. PDP ------------------------------------------------------------------ */ .pdp{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;padding-block:28px 72px;align-items:start} .gallery{display:grid;grid-template-columns:76px 1fr;gap:14px;position:sticky;top:calc(var(--hd-h) + 20px)} .gallery__thumbs{display:grid;gap:10px} .gallery__thumb{aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;border:1px solid transparent;background:var(--bg-2)} .gallery__thumb[aria-current="true"]{border-color:var(--fg)} .gallery__thumb img{width:100%;height:100%;object-fit:cover} .gallery__main{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2)} .gallery__main img{width:100%;height:100%;object-fit:cover} .pdp__brand{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .pdp h1{font-size:clamp(1.75rem,2.6vw,2.5rem);margin-bottom:14px} .pdp__rating{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--muted);margin-bottom:24px} .stars{display:flex;gap:2px;color:var(--accent)} .stars svg{width:14px;height:14px} .pdp__price{display:flex;align-items:baseline;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line)} .pdp__price b{font-size:2rem;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pdp__price span{font-size:.8125rem;color:var(--muted)} .tiers{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)} .tiers__hd{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--marine);color:#F2EEE4;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase} .tiers__hd svg{width:14px;height:14px} .tiers table{font-size:.875rem} .tiers td,.tiers th{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)} .tiers tr:last-child td{border-bottom:0} .tiers th{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500} .tiers td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:500} .tiers tr.is-active td{background:var(--accent-soft)} .pdp__opts{margin-top:22px;display:grid;gap:16px} .opt__label{font-size:.75rem;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between} .swatches{display:flex;gap:8px;flex-wrap:wrap} .swatch{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-xs);font-size:.8125rem;background:var(--surface)} .swatch[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)} .vl-buyrow{display:flex;gap:10px;margin-top:22px} .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);height:52px} .qty button{width:44px;height:50px;display:grid;place-items:center;font-size:1.125rem;color:var(--fg-2)} .qty button:hover{color:var(--fg)} .qty input{width:52px;height:50px;text-align:center;border:0;background:none;font-variant-numeric:tabular-nums;font-size:.9375rem} .vl-buyrow .btn{flex:1} .pdp__assure{display:grid;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)} .assure{display:flex;gap:10px;font-size:.8125rem;color:var(--fg-2)} .assure svg{width:16px;height:16px;flex:0 0 auto;color:var(--ok);margin-top:2px} .tabs{margin-top:64px;border-top:1px solid var(--line)} .tabs__nav{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .tabs__nav::-webkit-scrollbar{display:none} .tabs__btn{height:52px;padding:0 18px;font-size:.875rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px} .tabs__btn[aria-selected="true"]{color:var(--fg);border-color:var(--fg);font-weight:500} .tabs__panel{padding-top:32px;display:none} .tabs__panel[data-active="true"]{display:block} .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;max-width:920px} .spec div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.875rem} .spec dt{color:var(--muted)} .spec dd{text-align:right} /* 16. Trade page ----------------------------------------------------------- */ .thero{background:var(--marine-2);color:#EFEBE1;padding-block:88px} .thero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .thero .eyebrow{color:#B9A98A} .thero h1{color:#F7F5F0;margin:18px 0 22px;max-width:16ch} .thero p{color:rgba(239,235,225,.72);max-width:50ch} .thero__cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap} .thero__facts{display:flex;gap:36px;margin-top:44px;padding-top:26px;border-top:1px solid rgba(247,245,240,.14)} .thero__facts b{display:block;font-size:1.5rem;font-weight:400;color:#F7F5F0;font-variant-numeric:tabular-nums} .thero__facts span{font-size:.75rem;color:rgba(239,235,225,.55)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .step{border-top:2px solid var(--fg);padding-top:22px} .step__n{font-size:.6875rem;letter-spacing:.16em;color:var(--muted);margin-bottom:14px} .step h3{margin-bottom:8px} .step p{font-size:.875rem;color:var(--muted)} .tier-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .tier-table table{font-size:.9375rem} .tier-table th,.tier-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line)} .tier-table thead th{background:var(--surface-2);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500} .tier-table tbody tr:last-child td{border-bottom:0} .tier-table td:nth-child(3){color:var(--accent-ink);font-weight:500;font-variant-numeric:tabular-nums} .tier-table td:last-child{color:var(--muted);font-size:.875rem} .tier-table tbody tr:hover td{background:var(--surface-2)} .quickorder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px} .quickorder textarea{ width:100%;min-height:132px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm); font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.8125rem;line-height:1.7;resize:vertical; } .quickorder textarea:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(22,50,78,.12)} .faq{border-top:1px solid var(--line)} .faq__item{border-bottom:1px solid var(--line)} .faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:22px 0;text-align:left;font-size:1rem;font-weight:500} .faq__q svg{width:16px;height:16px;flex:0 0 auto;transition:transform var(--t-fast)} .faq__item.is-open .faq__q svg{transform:rotate(45deg)} .faq__a{display:none;padding:0 0 24px;max-width:72ch;font-size:.9375rem;color:var(--fg-2)} .faq__item.is-open .faq__a{display:block} /* 17. Toast / misc --------------------------------------------------------- */ .toast{ position:fixed;right:24px;bottom:24px;z-index:120; display:flex;align-items:center;gap:12px; background:var(--fg);color:#F7F5F0;padding:14px 20px;border-radius:var(--r-sm); font-size:.875rem;box-shadow:var(--shadow-2); opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity var(--t-fast),transform var(--t-fast); } .toast.is-on{opacity:1;transform:none} .toast svg{width:16px;height:16px;color:#9CC7A8} .mobile-actions{display:none} /* 17b. Language switcher --------------------------------------------------- */ .langsel{position:relative} .langsel__btn{display:inline-flex;align-items:center;gap:6px;color:#E9E4D8;opacity:.82;font-size:.75rem;padding:4px 0} .langsel__btn:hover,.langsel.is-open .langsel__btn{opacity:1} .langsel__btn svg{width:10px;height:10px;opacity:.55;transition:transform var(--t-fast)} .langsel__btn .langsel__globe{width:14px;height:14px;opacity:.75} .langsel.is-open .langsel__btn .langsel__chev{transform:rotate(180deg)} .langsel__menu{ position:absolute;top:calc(100% + 12px);right:0;z-index:130;min-width:248px;padding:6px; background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:var(--shadow-2);display:none; } .langsel.is-open .langsel__menu{display:block} /* 菜单落在深色顶栏内，.topbar a 的浅色文字会渗进来——显式抬回纸面深色 */ .langsel .langsel__opt{ display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; padding:10px 12px;border-radius:var(--r-xs);text-align:left;font-size:.875rem; color:var(--fg);opacity:1; } .langsel .langsel__opt:hover{background:var(--surface-2);opacity:1} .langsel .langsel__opt small{font-size:.6875rem;color:var(--muted);letter-spacing:.02em} .langsel .langsel__opt[aria-current="true"]{background:var(--accent-soft)} .langsel .langsel__opt[aria-current="true"] small{color:#7E4F13} /* 17c. Sales channels (B2C / B2B) ------------------------------------------ */ .tag{ display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:3px; font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; } .tag--b2c{background:var(--ok-soft);color:var(--ok)} .tag--b2b{background:rgba(201,164,104,.16);color:#D8C39A;border:1px solid rgba(201,164,104,.3)} .dual{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch} .dual__card{display:flex;flex-direction:column;gap:18px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)} .dual__card--b2b{background:var(--marine);border-color:var(--marine);color:#EFEBE1} .dual__hd{display:flex;align-items:center;justify-content:space-between;gap:16px} .dual h3{font-size:1.5rem;font-weight:300;letter-spacing:-.022em;line-height:1.2} .dual__card p{font-size:.9375rem;color:var(--muted);max-width:46ch} .dual__card--b2b p{color:rgba(239,235,225,.72)} .dual__list{display:grid;gap:10px;font-size:.9375rem;color:var(--fg-2)} .dual__card--b2b .dual__list{color:rgba(239,235,225,.9)} .dual__list li{display:flex;gap:10px;align-items:flex-start} .dual__list svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--ok)} .dual__card--b2b .dual__list svg{color:#C9A468} .dual__rule{font-size:.8125rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:auto} .dual__card--b2b .dual__rule{border-color:rgba(239,235,225,.16);color:rgba(239,235,225,.62)} .dual__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap} /* 17d. Policy matrix + threshold strip ------------------------------------- */ .strip{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px; padding:14px 18px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-sm);font-size:.8125rem;color:var(--muted); } .strip b{color:var(--fg);font-weight:500} .policy{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .policy table{font-size:.9375rem} .policy th,.policy td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .policy thead th{background:var(--surface-2);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500} .policy tbody tr:last-child td{border-bottom:0} .policy td:first-child{font-weight:500;width:31%} .policy td:not(:first-child){font-size:.875rem;color:var(--fg-2)} .policy .is-none{color:var(--danger)} .policy .is-yes{color:var(--ok)} .policy__note{padding:14px 20px;background:var(--surface-2);border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)} /* 18. Commerce page system (cart / checkout / account / search / 404) ------- */ /* 18.1 页面头部：内页统一抬头（面包屑 + 标题 + 说明 + 右侧动作） */ .pagehead{padding-top:22px;border-bottom:1px solid var(--line)} .pagehead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:22px 0 26px;flex-wrap:wrap} .pagehead h1{font-size:clamp(1.75rem,2.6vw,2.5rem)} .pagehead .lede{font-size:.9375rem;margin-top:10px;max-width:64ch} .pagehead__act{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* 18.2 步进条：结算流程用，完成态打勾、当前态实底 */ .stepper{display:flex;align-items:center;gap:10px;padding:18px 0;flex-wrap:wrap} .stepper__step{display:inline-flex;align-items:center;gap:9px;font-size:.8125rem;color:var(--muted)} .stepper__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font-size:.75rem;font-variant-numeric:tabular-nums} .stepper__step.is-done .stepper__n{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)} .stepper__step.is-done .stepper__n svg{width:13px;height:13px} .stepper__step.is-now{color:var(--fg);font-weight:500} .stepper__step.is-now .stepper__n{background:var(--fg);border-color:var(--fg);color:#F7F5F0} .stepper__sep{width:26px;height:1px;background:var(--line-2)} /* 18.3 面板：所有内页卡片统一用这一种（白底 + 细边 + 10px 圆角） */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .panel__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)} .panel__hd h2,.panel__hd h3{font-size:1rem;font-weight:500;letter-spacing:-.01em} .panel__hd .small{font-size:.75rem} .panel__bd{padding:24px} .panel__bd--flush{padding:0} .panel__ft{padding:16px 24px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} /* 18.4 两栏商务布局：主区 + 结算摘要（摘要吸顶） */ .co{display:grid;grid-template-columns:1fr 392px;gap:48px;padding-block:32px 88px;align-items:start} .co__aside{position:sticky;top:calc(var(--hd-h) + 20px)} .cart{display:grid;grid-template-columns:1fr 392px;gap:48px;padding-block:32px 88px;align-items:start} /* 18.5 购物车行：桌面表格化，手机自动堆叠成卡 */ .ctable{border-top:1px solid var(--line)} .crow{display:grid;grid-template-columns:104px minmax(0,1fr) 118px 148px 110px 40px;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)} .crow--hd{padding:12px 0;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .crow__media{width:104px;aspect-ratio:4/5;border-radius:var(--r-xs);overflow:hidden;background:var(--bg-2)} .crow__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03)} .crow__name{font-size:.9375rem;line-height:1.4} .crow__name a:hover{text-decoration:underline;text-underline-offset:3px} .crow__meta{font-size:.75rem;color:var(--muted);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap} .crow__unit{font-size:.875rem;color:var(--fg-2);font-variant-numeric:tabular-nums} .crow__unit b,.crow__sum{white-space:nowrap} .crow__sum{font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;text-align:right} .crow__del{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-xs);color:var(--muted)} .crow__del:hover{background:var(--bg-2);color:var(--danger)} .crow__del svg{width:16px;height:16px} .qty--sm{height:44px} .qty--sm button{height:42px;width:38px} .qty--sm input{height:42px;width:44px;font-size:.875rem} /* 18.6 金额摘要 */ .summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px} .summary h2{font-size:1rem;font-weight:500;margin-bottom:18px} .summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;font-size:.9375rem;color:var(--fg-2)} .summary__row--save{color:var(--ok)} .summary__row .num{font-variant-numeric:tabular-nums} .summary__total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)} .summary__total b{font-size:1.625rem;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .summary__total span{font-size:.8125rem;color:var(--muted)} .summary .btn{margin-top:18px} .summary__note{font-size:.75rem;color:var(--muted);margin-top:14px;display:flex;gap:8px} .summary__note svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px} /* 18.7 优惠码 / 内联表单 */ .inline-form{display:flex;gap:8px} .inline-form .field{height:44px} .inline-form .btn{min-height:44px;white-space:nowrap} /* 18.8 表单：可见标签 + 辅助说明 + 错误态（原型里只有 placeholder 是不合格的） */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px} .fld{display:flex;flex-direction:column;gap:7px;min-width:0} .fld--full{grid-column:1/-1} .fld__lbl{font-size:.8125rem;color:var(--fg-2);font-weight:500} .fld__lbl .req{color:var(--danger);margin-left:3px} .fld__help{font-size:.75rem;color:var(--muted)} .fld__err{font-size:.75rem;color:var(--danger);display:flex;align-items:center;gap:5px} .field--err{border-color:var(--danger)} .field--err:focus{box-shadow:0 0 0 3px rgba(160,58,49,.12)} textarea.field{height:auto;min-height:104px;padding:12px 14px;line-height:1.6;resize:vertical} select.field{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E747C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px} /* 18.9 单选卡片：配送 / 支付方式（比原生 radio 更有信任感，整卡可点） */ .choice{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--surface);transition:border-color var(--t-fast),background var(--t-fast)} .choice:hover{border-color:var(--line-2)} .choice input{position:absolute;opacity:0;width:1px;height:1px} .choice__box{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--line-2);border-radius:50%;margin-top:2px;display:grid;place-items:center;transition:border-color var(--t-fast)} .choice__box::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--marine);transform:scale(0);transition:transform var(--t-fast)} .choice input:checked~.choice__box{border-color:var(--marine)} .choice input:checked~.choice__box::after{transform:scale(1)} .choice:has(input:checked){border-color:var(--marine);box-shadow:inset 0 0 0 1px var(--marine)} .choice input:focus-visible~.choice__box{outline:2px solid var(--marine);outline-offset:2px} .choice__t{font-size:.9375rem;font-weight:500;display:flex;justify-content:space-between;gap:12px} .choice__d{font-size:.8125rem;color:var(--muted);margin-top:4px} .choice__p{font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap} .choices{display:grid;gap:10px} /* 18.10 提示条 */ .alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-sm);font-size:.875rem;border:1px solid var(--line);background:var(--surface-2)} .alert svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px} .alert--info{border-color:#CBD8E4;background:#F2F6FA;color:#1D3A55} .alert--info svg{color:var(--marine)} .alert--ok{border-color:#C9DFD1;background:var(--ok-soft);color:#204D37} .alert--ok svg{color:var(--ok)} .alert--warn{border-color:#E8D5B4;background:#FBF3E4;color:#6E4410} .alert--warn svg{color:var(--warn)} /* 18.11 空状态：购物车空 / 搜索无结果 / 404 共用 */ .empty{text-align:center;padding:72px 24px;max-width:52ch;margin-inline:auto} .empty__ic{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--fg-2)} .empty__ic svg{width:26px;height:26px} .empty h2{font-size:1.5rem;font-weight:400;margin-bottom:12px} .empty p{color:var(--muted);font-size:.9375rem} .empty__act{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap} /* 18.12 账户中心 */ .acct{display:grid;grid-template-columns:248px 1fr;gap:48px;padding-block:32px 88px;align-items:start} .acct>*{min-width:0} .sidenav{position:sticky;top:calc(var(--hd-h) + 20px);display:grid;gap:2px} .sidenav__hd{padding:0 12px 12px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .sidenav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-xs);font-size:.9375rem;color:var(--fg-2)} .sidenav a svg{width:17px;height:17px;color:var(--muted)} .sidenav a:hover{background:var(--bg-2);color:var(--fg)} .sidenav a[aria-current="page"]{background:var(--surface);color:var(--fg);font-weight:500;box-shadow:inset 0 0 0 1px var(--line)} .sidenav__sep{height:1px;background:var(--line);margin:10px 12px} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stat{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)} .stat__l{font-size:.75rem;color:var(--muted)} .stat__v{font-size:1.5rem;font-weight:400;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums} .stat__h{font-size:.75rem;color:var(--muted);margin-top:4px} /* 18.13 通用数据表（订单 / 发票 / 商品行） */ .atable{width:100%;font-size:.875rem} .panel__bd--flush{overflow-x:auto} .atable thead th{background:var(--surface-2);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:12px 18px;text-align:left;border-bottom:1px solid var(--line)} .atable td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle} .atable tbody tr:last-child td{border-bottom:0} .atable tbody tr:hover td{background:var(--surface-2)} .atable .num{font-variant-numeric:tabular-nums} .status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:.6875rem;font-weight:500;letter-spacing:.02em;background:var(--bg-2);color:var(--fg-2)} .status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .status--ok{background:var(--ok-soft);color:var(--ok)} .status--warn{background:#FBF3E4;color:var(--warn)} .status--info{background:#EAF1F7;color:#1D3A55} /* 18.14 搜索结果 */ .search-lg{display:flex;gap:10px;max-width:720px} .search-lg input{flex:1;height:56px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:1rem} .search-lg input:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(22,50,78,.12)} .search-lg .btn{min-height:56px} .sug{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px} .sug__t{font-size:.8125rem;color:var(--muted)} .sug a{font-size:.8125rem;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--fg-2)} .sug a:hover{border-color:var(--fg);color:var(--fg)} /* 18.16 进度条（账户等级 / 免运费门槛） */ .meter{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-top:12px} .meter__v{height:100%;background:var(--marine);border-radius:999px} .meter__l{display:flex;justify-content:space-between;gap:16px;font-size:.75rem;color:var(--muted);margin-top:8px} /* 18.17 间距工具类：用于消灭正文里的 inline style（审计项 A-07） */ .mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px} .mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px} .mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px} .mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px} /* 18.15 极简正文排版（替代散落的 inline style） */ .prose{max-width:70ch} .prose>*+*{margin-top:14px} .prose h2{margin-top:26px} .prose h3{margin-top:26px} .prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-2)} .prose a:hover{text-decoration-color:var(--fg)} .link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-2)} .link:hover{text-decoration-color:var(--fg)} /* 18.18 语义工具类（替代正文 inline style；审计项 A-07） */ .mt-10{margin-top:10px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}.mt-22{margin-top:22px} .mt-28{margin-top:28px}.mt-56{margin-top:56px} .mb-10{margin-bottom:10px}.mb-14{margin-bottom:14px}.mb-18{margin-bottom:18px} .mb-22{margin-bottom:22px}.mb-28{margin-bottom:28px} .gap-6{gap:6px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-32{gap:32px} .grid-2{grid-template-columns:1fr 1fr} .section--flush-top{padding-top:0} .section--flush-btm{padding-bottom:0} .w-max-44{max-width:44ch}.w-max-80{max-width:80ch}.w-max-920{max-width:920px}.w-max-1080{max-width:1080px} .lede--wide{max-width:76ch} .display--t{font-size:clamp(2.25rem,4.4vw,4rem)} .h-md{font-size:1.75rem;line-height:1.25;font-weight:300;letter-spacing:-.02em;margin:12px 0 10px} .rate-num{font-size:2rem;font-weight:400;letter-spacing:-.02em} .num-lg{font-size:1.0625rem} .tier__v--plain{color:#EFEBE1} .muted-dark{color:rgba(239,235,225,.55)} .muted-dark-45{color:rgba(239,235,225,.45)} .link-arrow--light{border-color:rgba(247,245,240,.3);color:#F7F5F0} .link-arrow--light:hover{border-color:#F7F5F0;color:#fff} .check--top{align-items:flex-start} .check--tiny{font-size:.75rem;align-items:flex-start} .check--tiny input{margin-top:3px} .check__text{color:var(--fg-2)} .select--field{width:100%;height:48px} .fgroup--nob{border-bottom:0} .ic{width:16px;height:16px;flex:0 0 auto} .ic--ok{color:var(--ok)} .alert .small{color:inherit} .crow__unit .tiny{display:block;margin-top:2px} .fld__err svg{width:13px;height:13px;flex:0 0 auto} .pager button svg{width:15px;height:15px} .empty h1{font-size:1.5rem;font-weight:400;margin-bottom:12px} /* 19. 审计修复：一致性 / 可点性 / 状态完备 -------------------------------- */ /* 19.1 触达目标：WCAG 2.5.8 最低 24px，本项目统一 ≥44px（移动易点） */ .chip{height:38px;padding:0 14px} .pager button{min-width:44px;height:44px} .filters__hd button{min-height:32px;padding:0 2px} /* 19.2 禁用态（此前缺失，按钮禁用时无任何视觉反馈） */ .btn:disabled,.btn[aria-disabled="true"]{opacity:.42;transform:none;cursor:not-allowed;box-shadow:none} .btn:disabled:hover{transform:none} /* 19.3 导航当前页（此前所有页面页头无当前态） */ .catnav__link[aria-current="page"]{color:var(--fg);border-color:var(--fg)} .topbar__trade[aria-current="page"]{text-decoration:underline;text-underline-offset:4px} .sidenav a[aria-current="page"]{pointer-events:none} /* 19.4 中文（第三方语言）走系统 CJK 栈，避免 Onest 缺字回退到奇怪字形 */ [lang="zh-Hans"]{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif} /* 19.5 圆角归一：此前 3px 散落三处，统一回 --r-xs */ .pcard__badge,.tag,.paychip{border-radius:var(--r-xs)} /* 19.8 异步与校验态（开发落地前置：提交中 / 字段错误 / 骨架屏） -------------- 此前缺失，WooCommerce 的动态流程（加购、下单、筛选、AJAX 地址簿）无状态可挂。*/ .btn.is-busy{pointer-events:none;position:relative;color:transparent} .btn.is-busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%; border:2px solid var(--btn-fg);border-right-color:transparent;animation:vl-spin .7s linear infinite} @keyframes vl-spin{to{transform:rotate(360deg)}} .field[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(160,58,49,.12)} .field-err{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:.8125rem;line-height:1.45;color:var(--danger)} .field-err svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px} .sk{position:relative;overflow:hidden;background:var(--bg-2);border-radius:var(--r-xs);pointer-events:none} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:vl-shimmer 1.4s infinite} @keyframes vl-shimmer{to{transform:translateX(100%)}} .sk--text{height:12px;margin:6px 0} .sk--title{height:18px;width:62%} .sk--media{aspect-ratio:4/5;border-radius:var(--r-sm)} @media (prefers-reduced-motion:reduce){.btn.is-busy::after,.sk::after{animation:none}} /* 19.9 内容页与长文（帮助 / 法务 / 编辑内容） ------------------------------- 内容页此前只有 70ch 的 .prose 骨架：无标题层级、无列表、无表格、无目录， 承载不了法律条款与长篇说明。本节补齐后，页脚 9 条与文章归档可零新增 设计语言直接套版；同时修两处可达性缺陷（深色区焦点环、锚点被吸顶头遮挡）。*/ /* 深色表面上的焦点环：--marine 环在海军蓝底上只有 1.1:1，键盘用户看不见 */ .ft :focus-visible,.topbar :focus-visible,.thero :focus-visible, .btn--navy:focus-visible,.b2b :focus-visible{outline-color:#F7F5F0;outline-offset:3px} /* 吸顶头 176/112px：锚点必须让位，否则目标标题被压在头下 */ [id]{scroll-margin-top:calc(var(--hd-h) + 20px)} /* 内容页复用 .pagehead（面包屑 + h1 + lede），此处只补一行元信息 */ .doc-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.75rem;color:var(--muted)} /* 目录 + 正文 */ .doc{display:grid;grid-template-columns:244px minmax(0,1fr); gap:clamp(26px,4.5vw,72px);align-items:start;padding:clamp(26px,3.2vw,50px) 0 8px} .doc__nav{position:sticky;top:calc(var(--hd-h) + 24px)} .doc__nav p{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .doc__nav a{display:block;padding:9px 0 9px 14px;border-left:2px solid var(--line); font-size:.875rem;line-height:1.45;color:var(--muted); transition:color var(--t-fast),border-color var(--t-fast)} .doc__nav a:hover{color:var(--fg);border-color:var(--line-2)} .doc__nav a[aria-current="true"]{color:var(--fg);border-color:var(--accent);font-weight:500} .doc__body{min-width:0} /* 长文排版：标题层级 / 列表 / 表格 / 分隔 / 引文 */ .prose{max-width:72ch;font-size:1rem;line-height:1.74;color:var(--fg-2)} .prose>*+*{margin-top:1.05em} .prose h2{font-size:clamp(1.3rem,1.9vw,1.625rem);font-weight:400;letter-spacing:-.015em; line-height:1.3;color:var(--fg);margin-top:2.2em;padding-top:4px} .prose h2:first-child{margin-top:0} .prose h3{font-size:1.0625rem;font-weight:500;color:var(--fg);margin-top:1.8em} .prose h4{font-size:.9375rem;font-weight:600;color:var(--fg);margin-top:1.6em} .prose__lead{font-size:1.125rem;line-height:1.66;color:var(--fg-2)} .prose strong{font-weight:600;color:var(--fg)} .prose ul,.prose ol{padding-left:1.4em;display:grid;gap:.45em} .prose ul{list-style:none;padding-left:1.1em} .prose ul>li{position:relative} .prose ul>li::before{content:"";position:absolute;left:-.95em;top:.82em;width:6px;height:1px;background:var(--line-2)} .prose ol>li::marker{color:var(--muted);font-variant-numeric:tabular-nums} .prose li>ul,.prose li>ol{margin-top:.45em} .prose table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5} .prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .prose th{background:var(--surface-2);font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap} .prose tbody tr:last-child td{border-bottom:0} .prose th[scope="row"]{background:transparent;text-transform:none;letter-spacing:0; font-size:.875rem;font-weight:500;color:var(--muted);white-space:nowrap;width:36%} .prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0} .prose blockquote{border-left:2px solid var(--accent);padding-left:20px;color:var(--fg); font-size:1.0625rem;line-height:1.62} .prose small{font-size:.8125rem;color:var(--muted)} .prose__table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)} /* 提示块（政策例外、注意事项） */ .note{display:flex;gap:12px;padding:16px 18px;background:var(--surface-2); border:1px solid var(--line);border-left:2px solid var(--accent); border-radius:var(--r-xs);font-size:.9375rem;line-height:1.6;color:var(--fg-2)} .note svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--accent-ink)} .note--ok{border-left-color:var(--ok)} .note--ok svg{color:var(--ok)} .note b{color:var(--fg);font-weight:600} /* 内容页在平板及以下：目录转为顶部横滑条 */ @media (max-width:1024px){ .doc{grid-template-columns:1fr;gap:22px} .doc__nav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:10px; border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch} .doc__nav p{display:none} .doc__nav a{border-left:0;border-bottom:2px solid var(--line);padding:8px 2px; margin-bottom:-11px;white-space:nowrap} } /* 打印：订单确认函 / 发票 / 政策页存档 */ @media print{ .topbar,.hd,.ft,.mobile-actions,.skip,.doc__nav,.pager,.crumbs,.btn,.toast{display:none!important} body{background:#fff;color:#000} .wrap{max-width:none;padding:0} .doc{grid-template-columns:1fr;padding:0} .prose,.prose__lead{max-width:none;font-size:11.5pt;line-height:1.5} .prose h2,.prose h3{break-after:avoid} .prose table,.panel,.note,.pagehead{break-inside:avoid} .prose a{color:#000;text-decoration:none} .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} @page{margin:16mm} } /* 19.10 Cookie 同意条 ------------------------------------------------------- 法务页已就位，同意条是 Cookies 政策落地的界面部分；开发接 CMP / Consent Mode 时 只需替换存储与上报逻辑，样式与断点保持。*/ .ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;display:flex; align-items:center;gap:18px;max-width:900px;margin-inline:auto;padding:16px 18px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 14px 38px rgba(18,22,28,.16)} .ck[hidden]{display:none} .ck__tx{margin:0;font-size:.8125rem;line-height:1.55;color:var(--fg-2)} .ck__tx a{text-decoration:underline;text-underline-offset:2px} .ck__act{display:flex;gap:8px;flex:0 0 auto} @media (max-width:640px){ .ck{flex-direction:column;align-items:stretch;gap:12px;left:12px;right:12px; bottom:calc(86px + 10px);padding:14px} .ck__act .btn{flex:1} } /* 19.11 浮动联系按钮（移动端 Telegram / WhatsApp 主入口） ------------------- 只在 ≤900 出现：桌面已有顶栏邮箱、页脚渠道与商品页咨询按钮，再加浮层即干扰。 商品页已有整宽 Telegram 按钮 + 吸底栏，故整组隐藏，避免遮挡价格与规格。 Cookie 条出现时由 app.js 挂 body.ck-open 让位。*/ .fabs{ position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:100; display:none;flex-direction:column;align-items:flex-end;gap:10px; transition:opacity var(--t-fast),transform var(--t-fast); } .fab{ display:inline-flex;align-items:center;gap:8px; height:48px;padding:0 16px 0 13px;border-radius:999px; font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:#fff; box-shadow:0 10px 26px rgba(18,22,28,.24); transition:background var(--t-fast),transform var(--t-fast); } .fab svg{width:21px;height:21px;flex:0 0 auto} .fab--tg{background:#0E2237} .fab--wa{background:#14784C} .fab:hover{transform:translateY(-1px)} .fab--tg:hover{background:#17334D} .fab--wa:hover{background:#0F5F3C} .fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px} body.ck-open .fabs{opacity:0;transform:translateY(8px);pointer-events:none} @media (max-width:900px){ .fabs{display:flex} } body:has(.mobile-actions) .fabs{display:none} /* 20. Responsive ----------------------------------------------------------- */ @media (max-width:1180px){ .co,.cart,.acct{grid-template-columns:1fr;gap:28px} .co__aside,.sidenav{position:static} .hero__grid,.trade-band__grid,.thero__grid{grid-template-columns:1fr;gap:40px} .hero__media{aspect-ratio:16/10} .pgrid{grid-template-columns:repeat(3,1fr)} .shop{grid-template-columns:1fr;gap:24px} .filters{position:static} .shop .pgrid{grid-template-columns:repeat(3,1fr)} .ft__grid{grid-template-columns:1.6fr 1fr 1fr} .mega__in{grid-template-columns:repeat(3,1fr)} .mega__promo{display:none} } @media (max-width:900px){ :root{--hd-h:112px} .pagehead__row{padding:16px 0 20px;gap:16px} .form-grid{grid-template-columns:1fr} .stat-grid{grid-template-columns:1fr} .crow{grid-template-columns:84px minmax(0,1fr) auto;gap:14px;padding:18px 0} .crow__media{width:84px} .crow--hd{display:none} .crow__unit{display:none} .crow__sum{grid-column:3;grid-row:1;text-align:right} .crow__qty{grid-column:2;grid-row:2} .crow__del{grid-column:3;grid-row:2;justify-self:end} .cart,.co{padding-block:24px 64px} .summary{position:static} .search-lg{flex-direction:column} .search-lg input{flex:0 0 auto;width:100%} .search-lg .btn{width:100%} .stepper__sep{display:none} :root{--section:64px} .hd__main{height:68px;gap:16px} .iconbtn{min-width:46px;font-size:0;gap:0} .iconbtn svg{width:22px;height:22px} /* 移动端登录态（2026-11-03）：昵称金色胶囊替代图标，头部一眼可辨是否已登录。 空间紧（390px 视口），昵称 14vw 限宽 + 省略号；heart/cart 不受影响。 */ .hd__acts a.iconbtn.is-user{ flex-direction:row;min-width:0;height:36px;padding:0 12px;border-radius:999px; background:var(--accent-soft);color:var(--accent-ink);font-size:.75rem;font-weight:600; } .hd__acts a.iconbtn.is-user svg{display:none} .hd__acts a.iconbtn.is-user .iconbtn__t{max-width:17vw} .hd__burger{display:grid;place-items:center;width:44px;height:44px} .catnav{display:none} .topbar__l a:first-child,.topbar__l .dot{display:none} .dual{grid-template-columns:1fr} .grid--split{grid-template-columns:1fr} .policy{overflow-x:auto} .policy table{min-width:620px} .tier-table{overflow-x:auto} .tier-table table{min-width:520px} .hero{padding-top:32px;padding-bottom:48px} .hero__stats{gap:24px} .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:168px} .cat--lg{grid-column:span 2;grid-row:span 2} .cat--wide{grid-column:span 2} .trust__grid{grid-template-columns:1fr 1fr} .trust__item{border-right:0;border-bottom:1px solid var(--line);padding:22px 16px} .pgrid,.shop .pgrid{grid-template-columns:repeat(2,1fr);gap:20px 14px} .ed-grid{grid-template-columns:1fr;gap:28px} .pdp{grid-template-columns:1fr;gap:32px} .gallery{position:static;grid-template-columns:1fr} .gallery__thumbs{grid-template-columns:repeat(4,1fr);order:2} .news__in{grid-template-columns:1fr;gap:24px} .news form{flex-direction:column} .steps{grid-template-columns:1fr;gap:24px} .ft__grid{grid-template-columns:1fr 1fr;gap:32px} .ft__about{max-width:none} .thero{padding-block:56px} .thero__facts{flex-wrap:wrap;gap:24px} .sec-head{flex-direction:column;align-items:flex-start;gap:16px} .spec{grid-template-columns:1fr} .trade-band__grid{padding-block:8px} .mobile-actions{ display:grid;grid-template-columns:1fr 1fr;gap:10px; position:fixed;left:0;right:0;bottom:0;z-index:90; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(247,245,240,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px); } .mobile-actions .btn{min-height:46px} body:has(.mobile-actions){padding-bottom:86px} } /* 平板档 641–900：iPad 竖屏专属微调（介于手机与桌面之间） ----------------- - 头部保留搜索（768/834 有空间，纯汉堡+图标会让搜索入口消失） - 商品栅格 3 列（900 档的 2 列在平板上卡片过大）*/ @media (min-width:641px) and (max-width:900px){ .pgrid,.shop .pgrid{grid-template-columns:repeat(3,1fr);gap:20px 16px} .search input{height:44px} .search__btn{width:36px;height:36px;top:4px} } @media (max-width:640px){ .search{display:none} } @media (max-width:560px){ :root{--gutter:18px} .display{font-size:2.25rem} .topbar__trade{display:none} .dual__card{padding:24px} .dual h3{font-size:1.25rem} .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{width:100%} .hero__stats{gap:18px;justify-content:space-between} .hero__stat b{font-size:1.25rem} .gallery__main{aspect-ratio:1} .ft__grid{grid-template-columns:1fr} .vl-buyrow{flex-wrap:wrap} .vl-buyrow .qty{flex:0 0 auto} } @media (max-width:360px){ .logo__tx{display:none} .hd__main{gap:8px} .iconbtn{min-width:40px;padding:0 4px} .trust__grid{grid-template-columns:1fr} .topbar__l{display:none} .topbar__in{justify-content:flex-end} } @media (max-width:900px){ /* 19.6 移动菜单：类名驱动（原来靠 JS 写内联样式，窗口变化后状态会错乱） */ .catnav.is-open{display:block;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1);max-height:calc(100vh - 108px);overflow:auto} .catnav.is-open .catnav__in{display:flex;flex-direction:column;align-items:stretch;height:auto;padding:6px 0} .catnav.is-open .catnav__link{height:50px;border-bottom:0;border-left:2px solid transparent;padding-left:14px} .catnav.is-open .catnav__link[aria-current="page"]{border-left-color:var(--fg);background:var(--surface-2)} .catnav.is-open .mega{display:none} .catnav.is-open .catnav__spacer{display:none} .catnav.is-open .catnav__meta{padding:12px 14px 16px;border-top:1px solid var(--line);flex-wrap:wrap} } .qty button:disabled{opacity:.35;cursor:not-allowed} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* 19.7 strip 内链接的目标高度（flex 子项被块化，行内高 21px 不达标） */ .strip .link{display:inline-flex;align-items:center;min-height:34px} .pdp__rating .link{display:inline-flex;align-items:center;min-height:32px} /* 19.12 中文排版适配（html[lang="zh-Hans"]，仅 zh 页生效）════════════════ 方块字视觉密度高：展示级字号下调约 28%、行高放宽、取消负字距； 乌/俄语按拉丁字距调校的规则原样保留。 */ html[lang="zh-Hans"] h1, html[lang="zh-Hans"] .h1{font-size:clamp(1.75rem,2.8vw,2.625rem);line-height:1.25;letter-spacing:.01em} html[lang="zh-Hans"] h2, html[lang="zh-Hans"] .h2{font-size:clamp(1.4375rem,2.05vw,1.9375rem);line-height:1.3;letter-spacing:.01em} html[lang="zh-Hans"] h3, html[lang="zh-Hans"] .h3{letter-spacing:.01em} html[lang="zh-Hans"] .display{font-size:clamp(1.875rem,3.9vw,3.625rem);line-height:1.22;letter-spacing:.01em} html[lang="zh-Hans"] .display--t{font-size:clamp(1.75rem,3.2vw,3rem)} /* 19.13 手机顶栏与加购栏微调（三语通用）══════════════════════════════ - 语言按钮禁止竖排折行（390px 下「中文」曾拆成两行） - ≤600px 顶栏只留邮箱，客服时段挪到页脚，避免两行挤压 - 底部加购栏按钮缩小字号，价格不再折行 */ .langsel__btn{white-space:nowrap} @media (max-width:600px){ .topbar__hrs{display:none} .topbar__l a{white-space:nowrap} .mobile-actions .btn{font-size:.8125rem;letter-spacing:0;padding-inline:10px;gap:6px} } @media (max-width:360px){ .mobile-actions .btn{font-size:.75rem} } /* ==== 以下为 2026-10-20 PDP 优化系列块（被误恢复覆盖，2026-10-21 重建） ==== */ /* ---- 首屏：主图与信息层 ---- */ .pdp{padding-block:32px 80px} .pdp h1{font-size:clamp(1.75rem,2.4vw,2.375rem);line-height:1.16;letter-spacing:-.025em;margin:10px 0 16px;font-weight:500} .pdp__brand{letter-spacing:.18em} .gallery__main{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; display:flex;align-items:center;justify-content:center; min-height:520px; } .gallery__main img{max-height:560px;width:auto;height:auto;object-fit:contain;margin-inline:auto} .gallery__thumb{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)} .gallery__thumb[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .pdp__price{padding-block:24px} .pdp__price b{font-size:clamp(1.75rem,2.2vw,2.25rem);font-weight:600;letter-spacing:-.02em} .pdp__assure{padding-top:24px;gap:12px} /* ---- 详情内容栏：居中 1120px，取代 72ch 左贴 ---- */ .pdp-detail{max-width:1120px;margin-inline:auto} .pdp-high{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:4px 0 4px} .pdp-high__c{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 20px; } .pdp-high__v{display:block;font-size:1.625rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--fg)} .pdp-high__k{display:block;margin-top:10px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .pdp-sec{ display:flex;align-items:baseline;justify-content:space-between;gap:24px; margin:56px 0 28px;padding-top:32px;border-top:1px solid var(--line); } .pdp-sec b{order:-1;font-size:clamp(1.375rem,2vw,1.75rem);font-weight:500;letter-spacing:-.02em;color:var(--fg)} .pdp-sec span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .pdp-detail .prose{max-width:none;margin-inline:auto;font-size:1.0625rem;line-height:1.8} .pdp-detail .prose>*{max-width:74ch;margin-inline:auto} .pdp-detail .prose h2{margin-top:0} .pdp-detail .prose table{max-width:74ch;margin-inline:auto} .pdp-detail .prose img{max-width:100%;border-radius:var(--r-lg)} .pdp-gal{display:grid;gap:32px} .pdp-gal__item{position:relative;margin:0} .pdp-gal__item img{ width:100%;height:auto;display:block; border-radius:var(--r-xl); border:1px solid var(--line); box-shadow:0 10px 44px rgba(18,22,28,.08); } .pdp-gal__n{ position:absolute;left:18px;top:18px;z-index:2; background:rgba(18,22,28,.82);color:#F7F5F0; font-size:.6875rem;letter-spacing:.12em;line-height:1; padding:7px 12px;border-radius:999px; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .pdp-detail-spec .spec, .tabs__panel[data-panel="spec"] .spec{max-width:1120px;margin-inline:auto} .tabs__panel[data-panel="spec"] .spec>div{ display:flex;align-items:baseline;justify-content:space-between;gap:24px; padding:14px 2px;border-bottom:1px solid var(--line); } .tabs__panel[data-panel="spec"] .spec dt{color:var(--muted);font-size:.875rem} .tabs__panel[data-panel="spec"] .spec dd{margin:0;font-weight:500;text-align:right;color:var(--fg)} .tabs{margin-top:72px} .tabs__btn{height:56px;padding:0 20px;letter-spacing:.01em} .tabs__nav{gap:8px} @media (max-width:960px){ .pdp-high{grid-template-columns:repeat(2,minmax(0,1fr))} .gallery__main{min-height:auto;padding:18px} .gallery__main img{max-height:420px} } @media (max-width:620px){ .pdp{padding-block:20px 56px} .pdp h1{font-size:1.5rem} .pdp-high{grid-template-columns:1fr 1fr;gap:8px} .pdp-high__c{padding:16px 14px;border-radius:var(--r)} .pdp-high__v{font-size:1.25rem} .pdp-high__k{font-size:.625rem;margin-top:8px} .pdp-sec{margin:32px 0 18px;padding-top:24px} .pdp-sec b{font-size:1.25rem} .pdp-gal{gap:16px} .pdp-gal__item img{border-radius:var(--r-lg)} .pdp-gal__n{left:12px;top:12px;font-size:.625rem;padding:6px 9px} .tabs{margin-top:44px} } @media (prefers-reduced-motion:no-preference){ .pdp-gal__item img{transition:box-shadow .25s ease} .pdp-gal__item:hover img{box-shadow:0 14px 52px rgba(18,22,28,.12)} } /* ---- 缩略图：主图下方横排，--gal-n 等分与主图等宽（亚马逊式，2026-10-20h） ---- */ .gallery{grid-template-columns:1fr} .gallery__thumbs{grid-template-columns:repeat(var(--gal-n,6),minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;order:2;gap:10px} @media (max-width:620px){ .gallery__thumbs{gap:6px} } /* ---- 主图卡收紧：去 min-height、小内边距，1080P 首屏容纳主图+缩略图（2026-10-20i） ---- */ .gallery__main{min-height:auto;aspect-ratio:auto;padding:14px} .gallery__main img{max-height:440px} /* ---- 主图加高一个缩略图位（440->540），比例更舒适（2026-10-20k） ---- */ .gallery__main img{max-height:540px} /* ---- 导航 mega 对齐修复（2026-10-20l） ---- */ .mega__in{padding-left:var(--gutter);padding-right:var(--gutter)} .catnav__link{white-space:nowrap} .catnav__item{flex:0 0 auto} @media (max-width:1200px){ .catnav__link{padding:0 10px} .mega__in{gap:28px} } /* ---- 商品卡图片可点进详情（2026-10-20m） ---- */ .pcard__media-link{display:block;width:100%} .pcard__media-link img{display:block;width:100%;height:100%;object-fit:cover} /* ---- 展示图自适应满框（2026-10-21a）：主图/缩略图 cover 满框，详情图满宽 ---- */ .gallery__main{aspect-ratio:1/1;padding:0;min-height:auto;display:block} .gallery__main img{width:100%;height:100%;max-height:none;object-fit:cover;margin:0;filter:contrast(1.03)} .gallery__thumb{aspect-ratio:1/1} .gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block} .pdp-gal__item img{width:100%;height:auto;display:block} .prose img{max-width:100%;width:100%;height:auto;display:block} /* ========================================================================== PDP v3 — 首屏信息层与详情区欧式排版（2026-10-21，append-only） 依赖：bridge 注入 .pdp__meta-chips / .pdp-usp / #pdp-buybar / .aibulk-detail-gallery（正文图片归拢为编号图流） ========================================================================== */ /* ---- 1) 首屏：货号/库存/不含税/质保 徽章行 ---- */ .pdp__meta-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px} .pdp__chip{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;line-height:1; color:var(--muted);border:1px solid var(--line);border-radius:999px; padding:6px 11px;background:var(--surface)} .pdp__chip--stock{color:#176d31;border-color:#b9dfc2;background:#f2faf4} .pdp__chip--stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#22a34a} /* ---- 2) 首屏卖点清单（勾选样式，取自描述小标题） ---- */ .pdp-usp{list-style:none;margin:16px 0 6px;padding:0;display:grid;gap:9px; border-top:1px solid var(--line);padding-top:16px} .pdp-usp li{position:relative;padding-left:26px;font-size:.9375rem;line-height:1.45;color:var(--fg)} .pdp-usp li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent); font-weight:700;font-size:.9375rem} /* ---- 3) 主图：悬停微缩放（欧式电商标配反馈） ---- */ .gallery__main img{transition:transform .4s ease} .gallery__main:hover img{transform:scale(1.035)} /* ---- 4) 卖点条：3-4 张自适应（原 4 等分在只有 3 项时留空洞） ---- */ .pdp-high{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} /* ---- 5) 详情规格表：欧式细线表格（原 74ch 窄栏太挤） ---- */ .pdp-detail .prose table{max-width:none;width:100%;border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden;border-spacing:0} .pdp-detail .prose td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top} .pdp-detail .prose tr:last-child td{border-bottom:0} .pdp-detail .prose td:first-child{color:var(--muted);width:42%} .pdp-detail .prose tr:nth-child(even) td{background:var(--surface)} /* ---- 6) 编号图流：桌面双列卡片化（原单列太长） ---- */ .pdp-gal{grid-template-columns:1fr 1fr;gap:24px} .pdp-gal__item{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden; background:var(--surface)} .pdp-gal__item img{transition:transform .4s ease} .pdp-gal__item:hover img{transform:scale(1.03)} .pdp-gal__n{position:absolute;top:12px;left:12px;z-index:1;font-size:.6875rem; letter-spacing:.08em;background:rgba(255,255,255,.92);border-radius:999px; padding:4px 10px;color:var(--fg)} @media (max-width:900px){ .pdp-gal{grid-template-columns:1fr;gap:16px} } /* ---- 7) 吸底购买条（滚过首屏出现；手机用 .mobile-actions，不叠加） ---- */ #pdp-buybar{position:fixed;left:0;right:0;bottom:0;z-index:60; transform:translateY(110%);transition:transform .3s ease; background:rgba(255,255,255,.97);border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(18,22,28,.08); display:flex;align-items:center;gap:14px; padding:10px max(16px,calc((100% - 1120px)/2))} #pdp-buybar.is-on{transform:none} #pdp-buybar img{width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--bg-2)} #pdp-buybar .t{flex:1;min-width:0} #pdp-buybar .t b{display:block;font-size:.875rem;font-weight:500; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pdp-buybar .t>span{font-size:.8125rem;color:var(--muted)} #pdp-buybar .btn{white-space:nowrap} @media (max-width:900px){ #pdp-buybar{display:none} } /* ---- PDP v3.1 — 详情图库类名对齐 .aibulk-detail-gallery（2026-10-21，append-only） ---- bridge 实际产出容器为 .aibulk-detail-gallery；v3 块中的 .pdp-gal 选择器作废保留（只增不删）。 图流：首图通栏编辑式大图 + 其余双列卡片，≤700px 单列。 */ .pdp-detail .prose .aibulk-detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-gallery img{ width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface); transition:transform .35s ease} .pdp-detail .prose .aibulk-detail-gallery img:hover{transform:scale(1.015)} .pdp-detail .prose .aibulk-detail-gallery img:first-child{grid-column:1 / -1;aspect-ratio:16/8;max-height:460px} @media (max-width:700px){ .pdp-detail .prose .aibulk-detail-gallery{grid-template-columns:1fr;gap:10px;margin:16px 0 4px} .pdp-detail .prose .aibulk-detail-gallery img:first-child{aspect-ratio:4/3;max-height:340px} } /* ---- PDP v3.2 — 详情图库对齐与裁切修复（2026-10-21，append-only） ---- 用户反馈：双列图库最后一张落单像缺图；4:3 裁切让方图内容被切。 修复：全部卡片 1:1 等大（不裁切、左右对齐）；首图不再通栏； 奇数张时最后一张通栏 2:1 宽幅（居中裁切，观感平衡）。 */ .pdp-detail .prose .aibulk-detail-gallery img{aspect-ratio:1/1;object-fit:cover;object-position:center} .pdp-detail .prose .aibulk-detail-gallery img:first-child{grid-column:auto;aspect-ratio:1/1;max-height:none} .pdp-detail .prose .aibulk-detail-gallery img:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:2/1} /* ---- PDP v3.3 — 详情区与主页同宽（2026-10-21，append-only） ---- 用户反馈：详情栏 1120px、正文 74ch，比主页容器（--container:1320px）窄太多， 且表格全宽、段落窄栏混排，观感错位。 修复：详情区撑满 .wrap（与主页同宽自适应），段落/表格/图库/规格统一同一版心； 吸底购买条内衬同步。 */ .pdp-detail{max-width:none} .pdp-detail .prose>*{max-width:none} .pdp-detail .prose table{max-width:none} .pdp-detail-spec .spec, .tabs__panel[data-panel="spec"] .spec{max-width:none} #pdp-buybar{padding-inline:max(16px,calc((100% - var(--container))/2))} /* ===== 20261021d→h: PDP 规格选择器（Rozetka 式：组标题+规格值按钮） ===== */ .pdp__price{flex-wrap:wrap} .pdp__price b{white-space:nowrap} .pdp__variants{flex:0 0 100%;width:100%;margin-top:4px} .pdp__variants-cap{font-size:13px;font-weight:600;color:var(--muted,#667);margin-bottom:8px;letter-spacing:.01em} .pdp__variants-row{display:flex;flex-wrap:wrap;gap:8px} .pdp__variant{padding:8px 18px;border:1px solid var(--line,#ddd);border-radius:8px;background:var(--surface,#fff);cursor:pointer;font:inherit;font-size:14px;color:var(--fg,#222);transition:border-color .15s,box-shadow .15s,background .15s} .pdp__variant:hover{border-color:var(--accent,#A96C22)} .pdp__variant.is-active{border-color:var(--accent,#A96C22);box-shadow:inset 0 0 0 1px var(--accent,#A96C22);font-weight:600} .pdp__variant.is-oos{opacity:.45;cursor:not-allowed;text-decoration:line-through} /* ---- PDP v3.4 — 详情图流去编号角标（2026-10-22，append-only） ---- 用户反馈：图上 01/06 数字角标多余，去掉。 */ .pdp-gal__n{display:none} /* ---- PDP v3.5 — 选品卡图框按图自适应（2026-10-22，append-only） ---- 用户反馈：卡片图下方多出约 1cm 空白。 根因：20261020m 给图包了 .pcard__media-link 但未给它高度， img 的 height:100% 失去参照退回原始 1:1，在 4/5 竖框下部留空。 修复：商品主图已统一 1:1 → 图框改 1/1（框按图走）； 同时补齐链接层高度链，任何比例图都充满图框（object-fit:cover）。 */ .pcard__media{aspect-ratio:1/1} .pcard__media-link{display:block;width:100%;height:100%} .pcard__media-link img{display:block;width:100%;height:100%;object-fit:cover} /* ---- PDP v3.6 — 选品卡信息层规范化（欧美电商习惯，2026-10-22，append-only） ---- 用户反馈：名字/价格/库存排版不规矩。 规范：品牌行小写字距 → 品名两行定高截断（跨卡对齐）→ 价格为卡片主视觉 （加大加重、统一沉底对齐，同排卡片价格齐平）→ 库存为轻量状态行 → 批发行以细实线替代虚线、降低视觉权重。全卡左对齐、垂直节奏统一。 */ .pcard__body{display:flex;flex-direction:column;flex:1} .pcard__brand{margin-bottom:6px} .pcard__name{font-size:1rem;line-height:1.45;font-weight:500;min-height:0;height:2.9em;margin-top:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .pcard__price{margin-top:auto;padding-top:14px} .pcard__price b{font-size:1.25rem;font-weight:600;letter-spacing:-.015em} .pcard__meta{margin-top:7px} .pcard__trade{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);border-top-color:var(--line)} /* ---- PDP v3.7 — 选品卡价格改为紧跟品名（2026-10-22，append-only） ---- 修正 v3.6：沉底对齐在「有无批发行」的卡片间造成价格高低不齐、 且品名与价格之间出现大空档。改为价格紧跟品名（margin-top:10px）， 因品名已两行定高，价格位置跨卡天然对齐。 */ .pcard__price{margin-top:10px;padding-top:0} /* ---- PDP v3.8 — 选品卡三处收尾（2026-10-22，append-only） ---- 用户反馈：①批发行分隔线有有无无不一致 → 统一去除； ②品名与价格仍显远 → 品名高度改随内容（保留两行截断），价格紧跟 6px； ③（货币在 bridge 侧统一为 84 000 ₴）。 */ .pcard__name{height:auto;min-height:0} .pcard__price{margin-top:6px} .pcard__trade{border-top:0;padding-top:0;margin-top:8px} /* ---- PDP v3.9 — 缩略图白边修复（2026-10-22，append-only） ---- 用户反馈：主图下方缩略图不满框、四周有白边。 根因：bridge 动态生成的缩略图是 button 元素，浏览器默认 padding:1px 6px 未被重置，img 100% 只充满 content-box（84x94），框内露出 6px 空边。 修复：重置 padding 并去按钮默认外观，img 恢复满框。 */ .gallery__thumb{padding:0;-webkit-appearance:none;appearance:none} .gallery__thumb img{width:100%;height:100%;object-fit:cover} /* ========================================================================== 20. UI 一致性走查修复（2026-10-22，纯追加；不改动既有 token 与组件语义） ========================================================================== */ /* 20.1 表头字重归一：正文表 (.prose) 用 600，三套展示表 (.tier-table / .policy / .atable) 用 500，同为 11px 大写小字距却两种重量。统一到 500。 */ .prose th{font-weight:500} /* 20.1b 展示型表格竖直节奏：.tier-table 18px 与 .policy 16px 两档并立， 归一到 16px（内容表 12px 保持，属正文密度档，不混用）。 */ .tier-table th,.tier-table td{padding-top:16px;padding-bottom:16px} /* 20.2 键值表脱离 .prose 后完全失效：tracking 页把 .prose__table 当独立容器用， 而单元格样式全挂在 .prose 下 —— 该表曾无内边距、无分隔线、键列默认居中。 这里让 .prose__table 自带单元格样式，与 .prose 内表现一致。 */ .prose__table table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5} .prose__table th,.prose__table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .prose__table thead th{background:var(--surface-2);font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap} .prose__table th[scope="row"]{background:transparent;text-transform:none;letter-spacing:0; font-size:.875rem;font-weight:500;color:var(--muted);white-space:nowrap;width:36%} .prose__table tbody tr:last-child td,.prose__table tbody tr:last-child th{border-bottom:0} /* 20.3 面板标题字距：.summary h2 未设 letter-spacing，继承 h2 的 -.022em(-0.352px)， 与同尺寸 16px 的 .panel__hd h2（-.01em / -0.16px）肉眼可辨地不同。 */ .summary h2{letter-spacing:-.01em} /* 20.4 404 主标题：此前套用空态组件的 1.5rem/400（24px），比全站 h1（37.4px/300） 弱一整级。错误页是独立页面，主标题按页面级尺度，不跟随空态卡片。 注：.empty 内含 h1 的只有 404（购物车空态 / 搜索无结果用 h2），故无需改 HTML。 */ .empty h1{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.08; font-weight:300;letter-spacing:-.02em;margin-bottom:12px} /* 20.5 404 空态动作组：三个动作挤在 52ch 正文宽度里排成 2+1，第三颗孤立成行。 桌面档让动作组横向突破正文栏（两侧各 -48px），保持一行；窄屏维持换行， 且 641–900 档相加后仍小于视口宽，不产生横向溢出。 */ @media (min-width:641px){ .empty__act{width:calc(100% + 96px);margin-inline:-48px;flex-wrap:nowrap} } /* 20.6 分类导航横向溢出（901–1140 档）：.catnav__link 在 1247 行被设为 nowrap、 .catnav__item 设为 flex:0 0 auto（不收缩），1024 视口下整条导航越出右边界 45px， 全站 19 页出现横向滚动条。此处收窄内边距并隐藏右端辅助元信息， 信息在顶栏与页脚均有等价呈现，不损失内容。 */ @media (max-width:1140px){ .catnav__meta{display:none} .catnav__link{padding:0 clamp(6px,.74vw,9px)} } /* ---- PDP v4.0 — 1688 真详情图流 + 参数表 + 中文原始资料（2026-10-22，append-only） ---- */ .pdp-detail .prose .aibulk-detail-flow{margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-flow img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0 0 6px;border-radius:8px} .pdp-detail .prose .aibulk-spec-table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14px;line-height:1.5} .pdp-detail .prose .aibulk-spec-table th,.pdp-detail .prose .aibulk-spec-table td{border:1px solid rgba(128,128,128,.3);padding:7px 10px;text-align:left;vertical-align:top} .pdp-detail .prose .aibulk-spec-table th{width:38%;font-weight:600;background:rgba(128,128,128,.08)} .pdp-detail .prose .aibulk-src-zh{margin:20px 0;font-size:14px} .pdp-detail .prose .aibulk-src-zh p{margin:8px 0;color:inherit;opacity:.85} /* 20.7 P0 徽章行「预订」态（2026-10-22）：非 instock 商品用琥珀色圆点， 与 .pdp__chip--stock 绿点区分；底色同族浅色，不引入新 token */ .pdp__chip--oos{color:#8a5a12;border-color:#e6d3ab;background:#fdf8ee} .pdp__chip--oos::before{content:"";width:7px;height:7px;border-radius:50%;background:#d9a441} /* ---- PDP v4.1 — 详情图流改双列并排（2026-10-23，append-only） ---- 用户定版：全部商品详情图一律两张并排（与 .aibulk-detail-gallery 一致）。 差异：1688 详情图为竖版文字海报，禁用 1:1 裁切，保留原比例防文案被切。 */ .pdp-detail .prose .aibulk-detail-flow{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-flow img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)} @media (max-width:700px){ .pdp-detail .prose .aibulk-detail-flow{grid-template-columns:1fr;gap:10px;margin:16px 0 4px} } /* ---- PDP v4.2 — 详情图流瀑布流试点（2026-10-23，append-only） ---- 仅作用于带 .aibulk-flow-masonry 的 5 款试验商品：双列瀑布流（CSS columns）， 图片原比例自然向下填充，消除行对齐留白；≤700px 单列。 */ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry{display:block;columns:2;column-gap:14px;align-items:auto;margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0 0 14px;break-inside:avoid;-webkit-column-break-inside:avoid;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)} @media (max-width:700px){ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry{columns:1;column-gap:0;margin:16px 0 4px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry img{margin:0 0 10px} } /* ---- PDP v4.3 — 排版定版：同尺寸双排 / 混尺寸 1688 式单列（2026-10-23，append-only） ---- 用户定版：每款商品按其详情图实际尺寸分流——全部同尺寸 → 双列网格； 尺寸不一 → 单列通栏顺序阅读（同 1688 详情页）。 */ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-single{display:block;columns:auto;margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-single img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)} /* ---- PDP v4.4 — 单列详情图无缝拼接（2026-10-23，append-only） ---- 1688 详情图 = 一张长图切片，原版紧贴无缝。单列流去间距/边框/圆角， 切片拼回整图；双列网格（独立海报）保持 14px 间距不变。 */ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-single{margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-single img{margin:0;border:none;border-radius:0} /* ---- PDP v4.5 — 瀑布流底部补齐：JS 双列投放 + 品牌色条精确填平（2026-10-23，append-only） ---- 解决 columns:2 瀑布流两列底部落差大（抽样实测最高 36%）。 bridge 把详情图按「短列优先」投放进 .aibulk-col 双列，底部以 .aibulk-flow-fill 品牌色条（服务承诺，三语）填平落差，两列齐底；≤700px 单列（色条自然收尾）。 */ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry{display:flex;gap:14px;align-items:flex-start;margin:24px 0 8px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-col img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-flow-fill{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:72px;padding:14px;border-radius:var(--r-sm);color:#fff;text-align:center;background:linear-gradient(135deg,#1f2937 0%,#2b4ea2 100%);font-size:13px;line-height:1.6} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-flow-fill b{font-size:15px;letter-spacing:.5px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-flow-fill span{opacity:.92} @media (max-width:700px){ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry{flex-direction:column;gap:10px;margin:16px 0 4px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-col{gap:10px} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-flow-fill{margin-top:10px} } /* ===================== PDP 描述文案段（2026-10-24 文案本地化） ===================== */ .pdp-detail .prose .aibulk-benefit{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:var(--fg,#1a1a1a)} .pdp-detail .prose .aibulk-benefit--b2b{margin-top:10px;color:var(--muted,#667);font-size:14.5px} /* ---- PDP v4.7 — 瀑布流通栏收尾（2026-10-24，append-only） ---- 奇数张等比图穷举后两列仍差 >15% 时，bridge 把最后一张抽出 加 .aibulk-flow-wide 通栏收尾，其余 3/3 完美平齐。 */ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-flow-wide{flex:0 0 100%;display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)} @media (max-width:700px){ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-flow-wide{margin-top:10px} } /* v4.7 补丁：通栏收尾图独占一行（否则 flex 把 min-width:0 的两列压瘪） */ .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry{flex-wrap:wrap} .pdp-detail .prose .aibulk-detail-flow.aibulk-flow-masonry .aibulk-col{flex:1 1 0} /* ---- 20.7 分类导航 1440 档溢出（2026-10-26，append-only） ---- 8 个导航项 + 右端 meta 在 ≤1599 视口越出右边界（nowrap + 不收缩）， meta 信息在顶栏与页脚均有等价呈现，1920 及以下全档隐藏（1920 实测仍溢出）。 */ /* 全档隐藏：1920 实测仍溢出，信息在顶栏与页脚均有等价呈现 */ .catnav__meta{display:none} /* 20.8 目录引擎补样式（catalog-app.js）2026-10-26 */ .cat-empty{grid-column:1/-1;text-align:center;padding:64px 16px;color:#5b6b7b} .cat-empty p{margin:0 0 16px;font-size:17px} .pager__dots{padding:0 4px;color:#8a97a5} .pgrid .pcard__media a{display:block}