/* ============================================================
   站台外框：頁首第一排（首頁以外的前台頁）＋ 頁尾（全部前台頁，含首頁）
   2026-09-22 內部測試反饋：選單應為首頁頂欄紅框範圍、頁尾改為指定樣式。

   只影響 .b2b-chrome 底下的元素，不動佈景主題的其他區塊；
   首頁的頂欄仍由 instig-b2b-shop.css 負責（兩邊共用 header-row.php 的標記）。
   ============================================================ */

.b2b-chrome{
 --brand:#014984;--brand-d:#013a6b;--brand-soft:#e6eff8;
 --ink:#16212e;--muted:#566476;--faint:#6b7684;--line:#dbe2ea;--surface:#fff;
 --deal:#e01b24;
 --f:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
 font-family:var(--f);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
}
.b2b-chrome,.b2b-chrome *{box-sizing:border-box}
.b2b-chrome a{text-decoration:none}
.b2b-chrome img{display:block;max-width:100%}
.b2b-chrome button{font-family:inherit;cursor:pointer;background:none;color:inherit;margin:0}

/* 字級放大（與首頁同一個 class，由頂欄的「字字」鈕切換） */
html.fs-lg{font-size:118.75%}

/* ── 其他前台頁：拿掉佈景主題的頁面小標題與小工具頁尾 ── */
body.instig-chrome .page-title{display:none!important}
body.instig-chrome #footer{display:none!important}

/* ── 會員頁的「請先登入／員工請到後台」提示框 ──
   原本只有購物車頁的 CSS 有樣式，會員中心、詢價紀錄、個人資料頁是一行純文字貼著頁尾 */
body.instig-chrome .quotation-notice{max-width:600px;margin:64px auto;padding:40px 24px;background:#fff;border:2px solid #dbe2ea;border-radius:14px;text-align:center;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
body.instig-chrome .quotation-notice p{font-size:18px;font-weight:600;color:#16212e;margin:0 0 20px}
body.instig-chrome .quotation-notice .quotation-btn{display:inline-block;padding:12px 40px;background:#014984;color:#fff;text-decoration:none;border-radius:99px;font-weight:800}
body.instig-chrome .quotation-notice .quotation-btn:hover,body.instig-chrome .quotation-notice .quotation-btn:focus{background:#013a6b;color:#fff}
@media(max-width:640px){body.instig-chrome .quotation-notice{margin:32px 16px;padding:28px 16px}}

/* ── 頁首（首頁以外） ── */
/* 外層容器固定在上方（直接放在 <body> 底下，sticky 才不會被佈景主題的 overflow 擋住） */
.b2b-siteheader{position:sticky;top:0;z-index:1000}
body.admin-bar .b2b-siteheader{top:32px}
@media(max-width:782px){body.admin-bar .b2b-siteheader{top:0}}
.b2b-siteheader header{position:relative;background:var(--surface);box-shadow:0 2px 10px rgba(20,35,60,.06)}
.b2b-siteheader .wrap{max-width:1280px;margin:0 auto}
.b2b-siteheader .hrow{display:flex;align-items:center;gap:14px;padding:11px 18px}
.b2b-siteheader .logo{display:flex;align-items:center;gap:11px;flex-shrink:0;height:46px}
.b2b-siteheader .logo .site-logo{max-height:100%;width:auto;object-fit:contain}
.b2b-siteheader .logo .mk{width:46px;height:46px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}
.b2b-siteheader .logo b{font-size:21px;font-weight:800;color:var(--brand);line-height:1.1;display:block}
.b2b-siteheader .logo small{font-size:12px;font-weight:700;color:var(--faint);letter-spacing:.14em}
.b2b-siteheader .hspace{flex:1}
.b2b-siteheader .htool{display:flex;align-items:center;gap:9px;flex-shrink:0}
.b2b-siteheader .hnav{font-weight:800;font-size:17px;color:var(--brand);white-space:nowrap;padding:0 4px}
.b2b-siteheader .hnav:hover,.b2b-siteheader .hnav:focus{color:var(--brand-d)}
.b2b-siteheader .tbtn{display:flex;align-items:center;gap:7px;border:2px solid var(--line);border-radius:99px;padding:0 13px;height:46px;font-weight:800;font-size:14.5px;color:var(--brand);white-space:nowrap;background:#fff;line-height:1}
.b2b-siteheader .tbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.b2b-siteheader .tbtn:not(.on):hover,.b2b-siteheader .tbtn:not(.on):focus{background:var(--brand-soft);color:var(--brand)}
.b2b-siteheader .tbtn .a{font-size:12.5px}
.b2b-siteheader .tbtn .b{font-size:18px}
.b2b-siteheader .iconbtn{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:99px;padding:0 15px;height:46px;font-size:14.5px;font-weight:800;color:var(--brand);white-space:nowrap;background:#fff}
.b2b-siteheader .iconbtn:hover{background:var(--brand-soft)}
.b2b-siteheader .iconbtn .ci{position:relative;display:flex;align-items:center}
.b2b-siteheader .iconbtn svg{width:24px;height:24px}
.b2b-siteheader .iconbtn .cnt{position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;padding:0 4px;border-radius:99px;background:var(--deal);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;line-height:1}
.b2b-siteheader :focus-visible{outline:3px solid #ffb300;outline-offset:2px}
@media(max-width:820px){
 .b2b-siteheader .hrow{flex-wrap:wrap;gap:9px;row-gap:10px}
 .b2b-siteheader .hspace{display:none}
 .b2b-siteheader .htool{width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap}
}
@media(max-width:640px){
 .b2b-siteheader .tbtn .lbl,.b2b-siteheader .iconbtn .lbl{display:none}
 .b2b-siteheader .logo small{display:none}
}
/* 2026-09-24「案例分享」改成較長的「網頁操作方式」，320px 寬時購物車會掉到第二行 */
@media(max-width:430px){
 .b2b-siteheader .hnav{font-size:15px;padding:0 2px}
 .b2b-siteheader .htool{gap:6px}
}

/* ── 頁尾（全部前台頁） ── */
.b2b-sitefooter footer{background:#1d4880;color:#fff;margin:0;padding:0}
.b2b-sitefooter .sf-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.b2b-sitefooter footer > .sf-wrap{padding-top:64px;padding-bottom:40px}
.b2b-sitefooter .sf-logo{height:72px;width:auto;filter:brightness(0) invert(1)}
.b2b-sitefooter .sf-name{font-size:40px;font-weight:800;letter-spacing:.2em;color:#fff}
.b2b-sitefooter .sf-info{display:flex;flex-wrap:wrap;gap:8px 48px;margin-top:28px;font-size:18px;font-weight:500;color:#fff}
.b2b-sitefooter .sf-copy{border-top:1px solid #3d6292}
.b2b-sitefooter .sf-copy .sf-wrap{padding-top:14px;padding-bottom:16px;font-size:14px;color:rgba(255,255,255,.5)}
@media(max-width:640px){
 .b2b-sitefooter footer > .sf-wrap{padding-top:40px;padding-bottom:28px}
 .b2b-sitefooter .sf-logo{height:52px}
 .b2b-sitefooter .sf-info{flex-direction:column;font-size:15px}
}