/* Canonical reference: 02-home-and-category.png and 03-detail-inquiry-account.png. The later figma-screens.html is not the source design. Shared white surfaces and navigation include the homepage; page-specific layout remains scoped. */ :root{--paper:#fff;--concept-paper:#fff} html,body,.commerce-dialog{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar,body::-webkit-scrollbar,.commerce-dialog::-webkit-scrollbar{display:none;width:0;height:0} .wrap.hero-wrap{max-width:none;width:100%;padding-left:0;padding-right:0} .hero-wrap .hero{border-radius:0} .brandbar .identity{display:flex;align-items:center;gap:8px} .brandbar .identity img,.catalog-mode .brandbar .identity img{width:42px;height:48px;flex:none;object-fit:contain} .brandbar .identity strong,.catalog-mode .brandbar .identity strong{font-size:18px;line-height:24px;letter-spacing:-.4px;font-weight:750} .brandbar .identity small{margin-top:3px;font-size:10px;line-height:14px;letter-spacing:1px;color:var(--muted)} @media(max-width:720px){ .brandbar .identity{gap:6px} .brandbar .identity img,.catalog-mode .brandbar .identity img{width:36px;height:43px} .brandbar .identity strong,.catalog-mode .brandbar .identity strong{font-size:16px;line-height:22px} .brandbar .identity small{font-size:9px;line-height:13px;letter-spacing:.8px;margin-top:2px} } .catalog-mode{background:#fff} .catalog-mode .catalog-title .eyebrow,.catalog-mode .catalog-edition{display:none} .catalog-mode .catalog-title{margin:3px 0 12px} .catalog-mode .catalog-title h1{margin:0} .catalog-mode .searcharea{padding-bottom:8px} .catalog-mode .search{height:38px;background:#efeeeb;border-radius:8px;box-shadow:inset 0 1px 2px #12244803} .catalog-mode .catalog-title h1{font-size:28px;letter-spacing:-.8px;font-weight:800} .goods-section .goods-grid{gap:8px} .goods-section .goods-card{padding:0;border-radius:8px;background:#fff;background-image:none;box-shadow:0 0 0 1px #1224480a;overflow:hidden} .goods-section .goods-image{aspect-ratio:1.48;padding:9px;border-radius:7px 7px 0 0;background:linear-gradient(140deg,#efeeeb,#f8f8f6);box-shadow:none} .goods-section .goods-image img{mix-blend-mode:multiply} .goods-section .goods-index{display:none} .goods-section .goods-copy,.goods-section .goods-card[data-material] .goods-copy{padding:9px 10px 10px;background:#fff;background-image:none;color:#101c3e;border:0;box-shadow:none;border-radius:0} .goods-section .goods-copy h3{font-size:14px;font-weight:750;line-height:1.4;margin:0 0 3px} .goods-section .goods-card[data-material] .goods-copy p{margin:0 0 8px;font-size:var(--st-font-caption,12px);line-height:1.45;color:#66718a;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .goods-section .goods-card[data-material] .goods-price strong{font-size:19px;color:#081f80;font-weight:800;letter-spacing:-.5px} .goods-section .goods-card[data-material] .goods-price small{font-size:var(--st-font-caption,12px);color:#66718a;margin-top:3px} .goods-section .quick-add{width:35px;height:35px;min-height:35px;border-radius:7px;box-shadow:inset 0 1px 0 #ffc383;background:linear-gradient(145deg,#ff921c,#ff7000)} .quick-add{display:grid;place-items:center;padding:0;line-height:1} .quick-add:hover{transform:none;background:linear-gradient(145deg,#ff921c,#ff7000)} .quick-add>svg{display:block;width:22px;height:22px;margin:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .catalog-mode .catalog-tabs{gap:8px} .catalog-mode .catalog-tabs button{min-height:30px;padding:4px 16px;border:1px solid #e8e7e2;border-radius:7px;background:linear-gradient(#f3f2ef,#eeede9);color:#697386;line-height:20px;font-weight:500;box-shadow:inset 0 1px 0 #fff8} .catalog-mode .catalog-tabs button[aria-pressed=true]{border-color:#081f80;background:linear-gradient(150deg,#123596,#081f80);color:#fff;font-weight:700;box-shadow:inset 0 1px 0 #ffffff26} .catalog-mode .catalog-tabs button[aria-pressed=true]:after{display:none} .catalog-mode .catalog-toolbar{margin-top:4px;margin-bottom:10px} .catalog-mode .catalog-inquiry-dock:not([hidden]){min-height:44px;padding:4px 6px 4px 14px;border-radius:9px;background:linear-gradient(110deg,#071744,#052675);box-shadow:0 3px 10px #0b214923} .catalog-mode .catalog-inquiry-dock button{min-height:34px;padding:5px 13px;border-radius:7px} /* White page canvas with compact, product-led composition. */ .commerce-dialog.page-detail,.commerce-dialog.page-inquiry{background:#fff;color:#0e1a3a} .commerce-dialog.page-inquiry .dialog-head{display:grid;background:#fff;border-bottom:1px solid #1423490c;min-height:58px;grid-template-columns:42px 1fr 76px;padding:7px max(16px,calc((100vw - 720px)/2))} .page-inquiry .dialog-head p{font-size:18px;font-weight:750;white-space:nowrap} .page-inquiry .dialog-body{padding:0 0 140px;width:min(720px,100%)} .page-inquiry .quote-meta{margin:0;padding:14px 16px 12px;background:transparent;border:0} .page-inquiry .currency-panel{gap:12px} .page-inquiry .currency-panel>span{font-size:12px;color:#14244b;font-weight:650} .page-inquiry .currency-switch{flex:1;min-width:0;max-width:370px;gap:4px;padding:4px;border-radius:9px;background:#ecebe8;box-shadow:inset 0 1px 2px #12244806} .page-inquiry .currency-switch button{min-height:34px;font-size:12px;border-radius:6px;line-height:1.3} .page-inquiry .currency-switch button b{font-size:12px;font-weight:600} .page-inquiry .currency-switch button small{font-size:11px} .page-inquiry .currency-switch button[aria-pressed=true]{background:linear-gradient(160deg,#10399f,#06247e);box-shadow:inset 0 1px 0 #fff3,0 2px 4px #081f8014} .page-inquiry .inquiry-list{gap:7px} .page-inquiry .remove-line{top:8px;right:5px;width:32px;height:32px;color:#54627e} .inquiry-promise{display:flex;align-items:center;gap:14px;margin:12px 10px 5px;padding:16px;border-radius:10px;background:linear-gradient(115deg,#f1ede4,#f7f3eb);color:#11234b} .inquiry-promise>span{font-size:29px;line-height:1} .inquiry-promise strong{font-size:14px;font-weight:750} .inquiry-promise p{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.4} .inquiry-continue{margin:0 16px;font-size:12px} .page-inquiry .inquiry-footer{position:sticky;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:12px 0 0;padding:12px 16px;background:#fff;border-top:1px solid #e8e6e0;box-shadow:0 -3px 15px #17244105} .page-inquiry .inquiry-footer .inquiry-summary{display:block;min-width:0} .page-inquiry .inquiry-footer .inquiry-summary>div{font-size:11px} .page-inquiry .inquiry-footer .inquiry-summary small{display:none} .page-inquiry .inquiry-footer .inquiry-summary strong{display:block;margin-top:5px;font-size:25px;color:var(--orange-ink);line-height:1.2;white-space:normal;overflow-wrap:anywhere} /* Detail reproduces the source order and rectangular surfaces. */ .page-detail .dialog-head{background:#fff} .page-detail .detail-layout{box-shadow:none;border:0;border-radius:0} .page-detail .detail-gallery{background:#f0efeb;border-radius:0;min-height:0;height:460px;display:block;padding:12px 18px} .page-detail .detail-photo{height:100%;width:100%;object-fit:contain;object-position:center;padding:0;mix-blend-mode:multiply} .page-detail .detail-image-count{left:auto;right:16px;bottom:15px;color:white;background:#16223ab3;border-radius:16px;font-size:11px;padding:4px 9px} .page-detail .detail-image-hint{left:16px;right:auto;bottom:15px;font-size:9px} .commerce-page.page-detail .detail-content{display:block;padding:18px 20px 20px;margin:0;border-radius:0;background:#fff} .page-detail .detail-content>.eyebrow{font-size:12px;letter-spacing:0;font-weight:400;color:#566687;gap:0} .page-detail .detail-content>.eyebrow:before{display:none} .page-detail .detail-content h2{font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-1px;margin:8px 0 6px} .page-detail .detail-spec{font-size:14px;line-height:1.4;margin:0;color:#596884} .page-detail .detail-sku{font-size:11px;margin:9px 0 0;color:var(--muted)} .page-detail .unit-line{display:block;margin:15px 0 13px} .page-detail .unit-label{font-size:13px;font-weight:750;margin:0 0 7px} .page-detail .unit-choice{min-height:34px;min-width:100px;border:1px solid #123dab;border-radius:5px;background:linear-gradient(155deg,#133ba2,#082681);box-shadow:inset 0 1px 0 #fff3;font-size:14px;line-height:20px;padding:5px 18px;color:#fff} .page-detail .price-tiers{margin:0;gap:6px} .page-detail .price-tier{min-height:78px;padding:10px 9px;border-radius:6px;border:1px solid #e5e6e9;background:linear-gradient(135deg,#fff,#f4f5f6)} .page-detail .price-tier.selected{border:1px solid #ff7a12;background:linear-gradient(135deg,#fff9ef,#fffefa);color:var(--orange-ink)} .page-detail .price-tier span{font-size:12px;font-weight:650;color:#14234b} .page-detail .price-tier.selected span,.page-detail .price-tier.selected strong{color:var(--orange-ink)} .page-detail .price-tier strong{font-size:16px;margin-top:7px;line-height:1.2} .page-detail .price-tier.hidden strong{font-size:11px;line-height:1.6;margin-top:8px} .page-detail .price-tier small{font-size:10px;color:var(--muted)} .page-detail .detail-note{margin:8px 0 13px;font-size:10px;line-height:1.5} .detail-specification{margin-top:12px;border:1px solid #e8e9ec;border-radius:6px;background:linear-gradient(#fff,#fafafb)} .detail-specification summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;padding:12px;font-size:13px;font-weight:700} .detail-specification summary::-webkit-details-marker{display:none} .detail-specification summary:after{content:'⌄';font-weight:400} .detail-specification[open] summary:after{content:'⌃'} .detail-specification p{font-size:12px;line-height:1.6;margin:0;padding:0 12px 6px;overflow-wrap:anywhere} .detail-specification small{display:block;color:#747d90;padding:0 12px 12px;font-size:10px} .page-detail .detail-footer{gap:8px;border-radius:0} .page-detail .detail-footer .stepper{height:40px;min-height:40px;border:1px solid #dfe1e6;border-radius:6px;background:linear-gradient(#fff,#f2f3f5)} .page-detail .detail-footer .stepper button{width:30px;min-height:38px} .page-detail .detail-footer .stepper input{width:30px;font-size:14px;border-left:1px solid #e3e4e8;border-right:1px solid #e3e4e8} .page-detail .detail-footer .round-control{width:40px;height:40px;border-radius:6px;background:linear-gradient(#fff,#f5f6f7);border:1px solid #e1e3e8} .page-detail .detail-footer .button{min-height:44px;border-radius:7px;font-size:15px;font-weight:750;padding:9px} .page-detail .detail-footer .button i{display:none} @media(max-width:720px){ .brandbar.wrap{padding-left:16px;padding-right:16px} .catalog-mode .wrap{padding-left:16px;padding-right:16px} .goods-section .goods-copy h3{font-size:var(--st-font-body,14px)} .goods-section .goods-copy,.goods-section .goods-card[data-material] .goods-copy{padding:8px 9px} .goods-section .goods-card[data-material] .goods-price strong{font-size:18px} .goods-section .goods-card[data-material] .goods-copy p{font-size:var(--st-font-caption,12px);margin-bottom:7px} .goods-section .goods-image{aspect-ratio:1.4} .page-inquiry .dialog-head{padding:7px 12px} .page-inquiry .dialog-body{padding-bottom:calc(var(--mobile-nav-height) + 107px)} .page-inquiry .inquiry-footer{position:fixed;left:0;right:0;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));margin:0;padding:10px 14px} .page-inquiry .inquiry-footer .inquiry-summary strong{font-size:23px} .page-detail .dialog-body{padding:0 0 76px} .page-detail .detail-gallery{height:min(36dvh,300px);padding:10px 16px} .page-detail .detail-content{padding:14px 16px 18px} .page-detail .detail-content h2{font-size:28px} .page-detail .detail-footer{padding:9px 12px max(9px,env(safe-area-inset-bottom))} .page-detail .price-tier{padding:9px 7px} .page-detail .price-tier strong{font-size:15px} } @media(max-width:360px){ .page-detail .price-tier strong{font-size:13px} } /* Shared page surfaces and navigation, including the homepage by user request. */ body,body.catalog-mode,.commerce-dialog.commerce-page,.commerce-dialog.commerce-page::backdrop{background:#fff} .commerce-page .dialog-head,.commerce-page.page-detail .detail-content,.page-inquiry .inquiry-footer{background:#fff} .page-inquiry .currency-switch button{align-items:center;justify-content:center} .page-inquiry .currency-switch button b,.page-inquiry .currency-switch button small{line-height:20px;margin:0} .page-account .dialog-body{padding:0 0 calc(var(--mobile-nav-height) + 20px)} .page-account .account-cover{padding:28px 20px 32px;min-height:315px;border:0;border-radius:0;box-shadow:none;background:linear-gradient(0deg,#fff 0%,#ffffff00 45%),linear-gradient(90deg,#fff 0%,#fffffff0 25%,#ffffff88 54%,#ffffff00 85%),url('kitchen-editorial-v2.webp') 65% center/cover} .page-account .account-cover h2{font-size:34px;font-weight:800;line-height:1.28;letter-spacing:-1px;margin:0 0 12px} .page-account .account-cover p{font-size:13px;color:#25385f;max-width:235px} .page-account .account-cover>.button{margin-top:18px;min-height:46px;font-size:16px;border-radius:7px;padding:10px 21px;color:#fff} .page-account .account-cover>.button i{background:none;box-shadow:none;width:24px;height:24px;border-radius:0} .page-account .account-content{position:relative;padding:0 14px} .page-account .account-links{margin:0 0 10px;gap:8px} .page-account .account-links>button{min-height:108px;padding:14px 6px;border-radius:10px;background:linear-gradient(#fff,#fafbfd);box-shadow:none} .page-account .account-links>button>span>svg{width:30px;height:30px;padding:0;margin-bottom:10px} .page-account .account-explainer{padding:15px 16px;margin-bottom:10px;border-radius:13px;background:linear-gradient(120deg,#eef7ff,#e2f0ff);box-shadow:none} .page-account .account-explainer h3{font-size:20px;line-height:1.3;margin:0 0 14px;color:#081f80} .account-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .account-perks>span{display:flex;align-items:center;gap:6px;color:#193364;font-size:11px;line-height:1.5} .account-perks svg{width:29px;height:29px;flex:none;padding:6px;border-radius:50%;background:#d4e9ff} .account-contact-row{display:flex;align-items:center;gap:10px;padding:13px 12px;border:1px solid #e9edf3;border-radius:10px;background:#fff} .account-contact-row>strong{font-size:13px;white-space:nowrap} .account-contact-row button{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;border:0;background:none;padding:0;min-height:34px;color:#344969;font-size:11px} .account-contact-row button+button{border-left:1px solid #e4e8ee;padding-left:9px} .page-account .account-content>.detail-note{margin:10px 0 0;font-size:10px} @media(max-width:720px){ :root{--mobile-nav-height:62px} } /* Interaction stability: full-page views should switch without moving shared chrome. */ .commerce-dialog.commerce-page[open]{animation:none} .dialog-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0} .dialog-head-actions>small{font-size:10px;color:#68758b;white-space:nowrap} /* Preserve the category artwork when legacy hover shorthands reset backgrounds. */ .category-link:hover .category-icon{background-image:url('02-home-and-category.webp?v=1');background-size:1520.792% auto;background-position:20.767% 47.334%;background-repeat:no-repeat} .category-link:nth-child(2):hover .category-icon{background-position:28.502% 47.334%} .category-link:nth-child(3):hover .category-icon{background-position:36.167% 47.334%} .category-link:nth-child(4):hover .category-icon{background-position:43.972% 47.334%} /* L2 remains a compact rail; deeper levels reveal their full shape without long sideways swipes. */ .catalog-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:100%;margin-bottom:10px;overflow:visible} .catalog-tabs button{min-width:0;min-height:34px;padding:5px 8px;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .catalog-tabs .category-more{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1px #102b830f,0 3px 10px #10244d0a} /* Real category hierarchy: L2 rail, contextual L3 rail, and an on-demand L4 drawer. */ body:not(.catalog-mode) .catalog-tabs,body:not(.catalog-mode) .level4-filter{display:none} .catalog-tabs button{display:inline-flex;align-items:center;gap:7px} .catalog-tabs button small{font-size:9px;font-weight:600;line-height:1;color:#8790a3;letter-spacing:.1px} .catalog-tabs button[aria-pressed=true] small{color:#dce5ff} .level4-filter{margin:0 0 10px;border-radius:9px;background:linear-gradient(145deg,#f8f9fc,#f2f4f8);box-shadow:inset 0 1px 0 #fff,0 3px 12px #10244d0a;color:var(--blue)} .level4-filter[hidden]{display:none} .level4-filter summary{list-style:none;min-height:38px;padding:7px 11px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:11px;user-select:none} .level4-filter summary::-webkit-details-marker{display:none} .level4-filter summary>span{color:var(--muted)} .level4-filter summary>strong{font-size:12px} .level4-filter summary>small{margin-left:auto;color:#7a8498;font-size:10px} .level4-filter summary:after{content:'⌄';width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 2px 8px #10244d10;transition:transform .38s var(--curve)} .level4-filter[hidden] summary:after{content:none} .level4-filter[open] summary:after{transform:rotate(180deg)} .level4-panel{padding:0 11px 12px} .level4-search{display:block;margin:1px 0 8px} .level4-search input{width:100%;height:34px;border:0;border-radius:8px;padding:0 12px;background:#fff;color:var(--ink);font:inherit;font-size:11px;outline:none;box-shadow:inset 0 0 0 1px #1224480b,0 3px 10px #10244d08;transition:box-shadow .32s var(--curve),transform .32s var(--curve)} .level4-search input:focus{box-shadow:inset 0 0 0 1.5px #163b9c55,0 5px 14px #10244d0d;transform:translateY(-1px)} .level4-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;max-height:178px;overflow-y:auto;overflow-x:hidden;padding:1px 1px 2px;scrollbar-width:thin} .level4-options button{min-width:0;min-height:30px;padding:5px 7px;border:0;border-radius:7px;background:#fff;color:#59647b;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px #1224480b;transition:transform .32s var(--curve),background .32s var(--curve),color .32s var(--curve)} .level4-empty{grid-column:1/-1;margin:7px 0;color:var(--muted);font-size:11px;text-align:center} .level4-options button:hover{transform:translateY(-1px);color:var(--blue)} .level4-options button[aria-pressed=true]{background:linear-gradient(145deg,#123596,#081f80);color:#fff;box-shadow:inset 0 1px 0 #ffffff26,0 4px 10px #081f8018} /* Keep card actions aligned; only collapse to a full-width action at narrow widths. */ @media(max-width:720px){ .goods-section .goods-bottom{display:grid;grid-template-columns:minmax(0,1fr) 35px;align-items:end;gap:7px} .goods-section .quick-add{width:35px;height:35px;min-height:35px} .dialog-head-actions>small{display:none} .catalog-mode .catalog-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .catalog-mode .catalog-tabs button{padding:4px 7px} .catalog-tabs button small{font-size:8px} .level4-filter{margin-bottom:9px} .level4-options{grid-template-columns:repeat(3,minmax(0,1fr));max-height:202px;overflow-y:auto;overflow-x:hidden} } @media(max-width:380px){ .goods-section .goods-bottom{grid-template-columns:minmax(0,1fr)} .goods-section .quick-add{width:100%;height:36px;min-height:36px} } /* Refined tactile surfaces and compact actions. */ .goods-section .goods-card{ border:1px solid transparent; background:linear-gradient(150deg,#fff 0%,#f8faff 64%,#fff8f0 100%) padding-box,linear-gradient(135deg,#fff 0%,#dce5f2 55%,#f4d8bb 100%) border-box; box-shadow:inset 0 1px 0 #fff,0 7px 18px #0b26540d,0 2px 5px #0b26540a; } .goods-section .goods-image{background:linear-gradient(145deg,#f5f4f1 0%,#eef2f8 58%,#fbf7f1 100%)} .goods-section .goods-copy,.goods-section .goods-card[data-material] .goods-copy{background:linear-gradient(155deg,#fff 0%,#f9fbfe 72%,#fffaf5 100%)} .quick-add-label{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.02em} .goods-section .quick-add{display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,filter .16s ease;background:linear-gradient(145deg,#ff971f,#ff7100);box-shadow:inset 0 1px 0 #ffd2a2,0 4px 9px #d85d0026} .goods-section .quick-add:hover{transform:translateY(-1px);filter:saturate(1.08) brightness(1.025);background:linear-gradient(145deg,#ffa02c,#ff7100);box-shadow:inset 0 1px 0 #ffe1bd,0 7px 14px #d85d0038} .goods-section .quick-add:active{transform:translateY(1px) scale(.985);filter:saturate(1.02);box-shadow:inset 0 2px 4px #b84c0038,0 1px 3px #d85d0024} .goods-section .quick-add:focus-visible{outline:2px solid #0b2d91;outline-offset:3px} .goods-section .quick-add.is-added{animation:quick-add-confirm .4s cubic-bezier(.2,.8,.2,1)} .detail-footer [data-detail-add].is-added{animation:quick-add-confirm .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 3px #f77c0726} .detail-footer [data-cart]{position:relative;overflow:visible} .detail-cart-badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;box-sizing:border-box;padding:0 5px;border:2px solid #fff;border-radius:12px;display:grid;place-items:center;background:var(--orange);color:#fff;font-size:10px;font-weight:750;line-height:1;pointer-events:none} .detail-cart-badge[hidden]{display:none} .crm-freight-reference{margin-top:16px;padding:14px 16px;border:1px solid #e5e6e9;border-radius:12px;background:#fafbfc;line-height:1.6;overflow-wrap:anywhere} .crm-freight-reference h3{font-size:13px;margin:0 0 8px}.crm-freight-reference p{font-size:13px;margin:6px 0}.crm-freight-reference strong{color:var(--orange-ink)} .commerce-dialog .crm-checkout .crm-freight-unloading{display:flex;align-items:center;gap:8px;min-height:40px;font-size:12px;line-height:1.5;margin:12px 0 0;cursor:pointer} .commerce-dialog .crm-checkout .crm-freight-unloading input{width:16px;min-width:16px;height:16px;min-height:16px;margin:0;padding:0;flex:none;accent-color:var(--blue)} .detail-cart-badge.is-updated{animation:quick-add-confirm .4s cubic-bezier(.2,.8,.2,1)} @media(prefers-reduced-motion:reduce){.detail-cart-badge.is-updated{animation:none}} @media(prefers-reduced-motion:reduce){.detail-footer [data-detail-add].is-added{animation:none}} @keyframes quick-add-confirm{0%{transform:scale(1)}38%{transform:translateY(1px) scale(.955);filter:saturate(1.12) brightness(.94)}72%{transform:translateY(-1px) scale(1.025)}100%{transform:scale(1)}} .page-inquiry .inquiry-list{display:grid;gap:12px;padding:0 9px} .page-inquiry .dialog-head,.page-detail .dialog-head{position:relative;width:100%;box-sizing:border-box;grid-template-columns:74px minmax(0,1fr) 74px} .page-inquiry .dialog-head-actions,.page-detail .dialog-head-actions{position:absolute;top:16px;right:16px;width:auto;justify-content:center;overflow:visible} .account-cover{position:relative} .account-locale{position:absolute;z-index:4;top:16px;right:16px} .st-back-to-top{position:fixed;z-index:6;right:16px;bottom:24px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid transparent;border-radius:14px;background:linear-gradient(145deg,#fff,#f5f8fd) padding-box,linear-gradient(135deg,#fff,#d9e4f3 60%,#f2d2b2) border-box;color:#092883;box-shadow:inset 0 1px 0 #fff,0 9px 24px #0b265421;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.94);transition:opacity .24s cubic-bezier(.22,.8,.25,1),transform .32s cubic-bezier(.22,.8,.25,1),visibility 0s linear .32s} .st-back-to-top svg{width:19px;height:19px;stroke-width:1.8} .st-back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s} .st-back-to-top:hover{transform:translateY(-2px) scale(1.02);box-shadow:inset 0 1px 0 #fff,0 12px 28px #0b26542b} .st-back-to-top:active{transform:translateY(1px) scale(.96)} /* 询价单页的「回到顶部」要避开预估金额栏。 桌面 / 窄屏避开的道理不一样，因为栏的定位不同： · 窄屏：栏是 fixed 通栏，两者都靠右 → 必然重叠，只能靠纵向让开（见下面 720px 段）。 · 桌面：栏是 static、随内容滚，宽度封顶后右边界停在 ~1242（1100px 视口时 ~1030）， 而按钮在 right:16px 的右侧留白里 —— 两者靠「横向分开」避开，但余量随视口变窄而缩小 （1100px 时只剩 12px）。所以这里再抬一个栏高：纵向彻底错开， 就算视口窄到横向刚好贴边也不会压住 CTA。96px 是原有的基础抬升量。 */ .st-back-to-top[data-context=inquiry]{bottom:calc(var(--inq-bar-actual-h) + 96px)} @media(max-width:720px){ .st-back-to-top{right:16px;bottom:calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom))} /* 窄屏金额栏是通栏 fixed（左右各缩进 12px），「回到顶部」也靠右 —— 两者必然重叠。 以前这里写 --mobile-nav-height + 92px（64+92=156），而栏顶在 --inq-bar-bottom(70) + 栏高(80~150) = 150~220 → 中文擦边、泰老语整个按钮埋进栏里 （实测 39.4px 全重叠，正好压住右侧「填写联系与配送」）。 现在抬到「栏顶 + 14px」，栏多高就抬多高；栏高由 JS 实测发布，换语种自动跟随。 */ .st-back-to-top[data-context=inquiry]{bottom:calc(var(--inq-bar-bottom) + var(--inq-bar-actual-h) + 14px)} .page-inquiry .inquiry-list{gap:11px;padding:0 12px} } @media(max-width:380px){ .goods-section .quick-add{height:32px;min-height:32px;justify-content:space-between;padding:0 10px;border-radius:7px} .goods-section .quick-add .quick-add-label{display:block} .goods-section .quick-add>svg{width:18px;height:18px} } @media(prefers-reduced-motion:reduce){.goods-section .quick-add.is-added{animation:none}.st-back-to-top{transition:none}} /* Inquiry density: compact the low-value whitespace while preserving clear controls. */ @media(max-width:720px){ .page-inquiry .inquiry-list{gap:8px;padding:0 12px} .page-inquiry .remove-line{top:6px;right:5px;width:36px;height:36px} .page-inquiry .remove-line svg{width:17px;height:17px} } /* Mobile density system: keep brand moments spacious, make task surfaces efficient. */ @media(max-width:720px){ .brandbar{padding-top:8px;padding-bottom:7px} .searcharea{padding-bottom:7px} .search{height:40px;border-radius:10px} .hero{min-height:252px} .hero-copy{padding:17px 16px} .hero-copy h1{margin:10px 0 8px;font-size:32px;line-height:1.14;letter-spacing:-1.2px} .hero-copy p{font-size:11px;line-height:1.55} .hero-copy .button{min-height:37px;padding:7px 10px 7px 13px;font-size:12px} .categories{padding:9px 0 5px;gap:6px;align-items:stretch} .category-link>span:last-child{padding:6px 2px 7px} /* 分类磁贴标签：跨语言必须同高、不溢出、行距可读（2026-09-24 实测 390px） · font-size 统一 11px —— lo 曾单独 12px，行盒比其它语种高，四卡不再等高； · line-height 显式 1.45 —— ⛔ 别省：strong 会继承