/* 右上搜尋：B2B 商品搜尋頁的配色與間距（藍 #285A9C、框線 #DDE3EA、提示列 #F7F7F7） */

body.b2b-search-open{position:fixed;top:0;left:0;right:0;width:100%;overflow:hidden}
body.b2b-search-open .mobile-bottom-bar{display:none}

.b2b-search{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--paper,#fcfbf7);
 border-top:1px solid #eaeaea;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.b2b-search[hidden]{display:none!important}
.b2b-search-inner{max-width:1192px;margin:0 auto;padding-bottom:0}

/* 搜尋框：圓角 12、聚焦轉藍，與 B2B 的 TextField 一致 */
.b2b-search-bar{padding:8px 16px 14px}
.b2b-search-field{display:flex;align-items:center;gap:10px;background:#fff;
 border:1px solid #dde3ea;border-radius:12px;padding:0 14px;transition:border-color .15s ease,box-shadow .15s ease}
.b2b-search-field:focus-within{border-color:#285a9c;box-shadow:inset 0 0 0 .4px #285a9c}
.b2b-search-lead{width:23px;height:23px;flex:0 0 auto;color:#285a9c}
.b2b-search-field input{flex:1;min-width:0;border:0;outline:0;background:none;
 padding:14px 0;font-size:16px;color:#17212e;-webkit-appearance:none}
.b2b-search-field input::placeholder{font-size:14px;color:#8a939f}
.b2b-search-field input::-webkit-search-cancel-button{display:none}
.b2b-search-clear{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#8a939f}
.b2b-search-clear svg{width:18px;height:18px}
.b2b-search-clear:hover{background:#f2f4f8}
.b2b-search-clear[hidden]{display:none!important}

/* 條件提示列 */
.b2b-search-hint{margin:0;padding:6px 12px;background:#f7f7f7;border-top:1px solid #eaeaea;
 border-bottom:1px solid #eaeaea;font-size:13px;color:#7c7c7c}
.b2b-search-hint[hidden]{display:none!important}

.b2b-search-body{padding:16px 20px 40px}
.b2b-search-empty{margin:40px 0;text-align:center;font-size:15px;color:#8a939f}
.b2b-result-count{margin:0 2px 12px;font-size:13px;color:#8a939f}

/* 搜尋結果直接用推薦系列頁的商品卡版型（.featured-product-grid） */
.b2b-search .featured-product-grid{margin:0}

/* 分類搜尋：四種標籤類型 → 標籤值 → 商品 */
.b2b-browse-title{margin:6px 0 16px;text-align:center;font-size:18px;font-weight:400;
 letter-spacing:2px;color:#37474f}
.b2b-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 0 8px}
@media(min-width:800px){.b2b-tiles{grid-template-columns:repeat(4,1fr)}}
.b2b-tile{display:flex;flex-direction:column;justify-content:center;gap:6px;
 padding:12px;text-align:left;background:#fff;color:#17212e;
 border:1px solid #e3e6eb;border-radius:12px;box-shadow:0 2px 6px #2330451f;
 transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.b2b-tile:hover:not(:disabled){border-color:#3489cf;box-shadow:0 6px 16px #23304526;transform:translateY(-2px)}
.b2b-tile:disabled{opacity:.45;cursor:default;box-shadow:none}
.b2b-tile-head{display:flex;align-items:center;gap:8px;min-width:0}
.b2b-tile-icon{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;
 background:#ebf3fd;border-radius:10px;color:#3489cf}
.b2b-tile-icon svg{width:24px;height:24px}
.b2b-tile-name{flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b2b-tile-badge{flex:0 0 auto;font-size:12px;font-weight:400;color:#8a939f;
 background:#f2f4f8;border-radius:999px;padding:2px 8px}
.b2b-tile-note{font-size:13px;line-height:1.3;color:#8a939f;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.b2b-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px;padding:6px 10px 6px 4px;
 border-radius:8px;font-size:14px;color:#285a9c}
.b2b-back svg{width:18px;height:18px}
.b2b-back:hover{background:#f2f4f8}

@media(max-width:700px){
 .b2b-search-bar{padding:8px 12px 12px}
 .b2b-search-body{padding:14px 10px 28px}
 .b2b-tile{padding:10px}
 .b2b-tile-name{font-size:16px}
 .b2b-tile-icon{width:32px;height:32px}
 .b2b-tile-icon svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){
 .b2b-search-field,.b2b-tile{transition:none}
}

/* 分類搜尋：返回鍵與標題併成一行，上下留白收緊 */
.b2b-search-body{position:relative;padding-top:12px}
.b2b-back{position:absolute;left:14px;top:10px;margin:0;padding:4px 8px 4px 2px}
.b2b-browse-title{margin:2px 0 14px}
@media(max-width:700px){
 .b2b-search-body{padding-top:10px}
 .b2b-back{left:8px;top:8px;font-size:13px}
 .b2b-browse-title{margin:0 0 12px;font-size:17px}
}