/* 71_egg 全站共用:頂部(MENU / SEARCH / 71_EGG / ACCOUNT / BAG)+ 頁尾
 * 2026-09-17 依 demo/preview_c.html(C 版「精品極簡」)做成共用的一份,
 * 首頁、商品頁、all.html、order.html、myorders.html 都載這一份,
 * 不要再各頁各寫一套。class 一律 s- 開頭,避免跟各頁自己的樣式撞名。
 * 購物車 / 會員按鈕是 cart.js / member.js 動態塞進 #cartSlot 的。
 */
:root{--s-bg:#fff;--s-alt:#f4f3f1;--s-ink:#101010;--s-mid:#6e6d6a;--s-sub:#9d9c98;--s-hair:#e4e3e0;--s-sale:#a8331f;
  --s-disp:'Jost','Noto Sans TC',sans-serif;--s-body:'Noto Sans TC','Jost',sans-serif}

/* ── 標頭 ── */
.s-hd{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--s-body)}
.s-hd-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:26px 40px 18px}
.s-hl,.s-hr{display:flex;align-items:center;gap:18px}
.s-hr{justify-content:flex-end}
.s-hd a,.s-ft a{text-decoration:none}
.s-hd .s-lg,.s-hd .s-lg:hover{font-family:var(--s-disp);font-weight:400;font-size:22px;letter-spacing:.34em;text-align:center;white-space:nowrap;
  cursor:pointer;text-transform:uppercase;padding-left:.34em;color:var(--s-ink);border:0;line-height:1.4}
.s-tool,.s-hd .s-tool,#cartBtn.s-tool,#memBtn.s-tool{font-family:var(--s-disp);font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-mid);background:none;border:0;border-bottom:1px solid transparent;border-radius:0;cursor:pointer;padding:2px 0;margin:0;
  width:auto;height:auto;line-height:1.5;display:inline-block;box-shadow:none;white-space:nowrap}
.s-tool:hover,.s-hd .s-tool:hover,#cartBtn.s-tool:hover,#memBtn.s-tool:hover{color:var(--s-ink);border-bottom-color:var(--s-ink);background:none}
.s-nav{display:flex;justify-content:center;gap:38px;padding:0 40px 18px;flex-wrap:wrap}
.s-nav>a,.s-nav>.nav-item{position:relative;font-family:var(--s-disp);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-mid);
  padding:0 0 3px;border:0;border-bottom:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.s-nav>a:hover,.s-nav>.nav-item:hover,.s-nav>.nav-item.on{color:var(--s-ink);border-bottom-color:var(--s-ink)}
.s-nav>a.s-sl,.s-nav>.s-sl{color:var(--s-sale)}
.s-nav>a.s-sl:hover,.s-nav>.s-sl:hover,.s-nav>.s-sl.on{color:var(--s-sale);border-bottom-color:var(--s-sale)}
.s-line{height:1px;background:var(--s-hair)}

/* 搜尋列:按 SEARCH 才展開 */
.s-sb{display:none;max-width:640px;margin:0 auto;padding:4px 40px 20px;align-items:center;gap:18px}
.s-sb.open{display:flex}
.s-sb input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--s-hair);border-radius:0;background:transparent;padding:7px 0;
  font-family:var(--s-body);font-size:16px;color:var(--s-ink);outline:none;letter-spacing:.04em}
.s-sb input:focus{border-bottom-color:var(--s-ink)}
.s-sb input::placeholder{color:var(--s-sub);letter-spacing:.08em}

@media(max-width:820px){
  .s-hd-in{grid-template-columns:auto 1fr auto;padding:15px 18px 12px;gap:12px}
  .s-hd .s-lg,.s-hd .s-lg:hover{font-size:15px;letter-spacing:.22em;padding-left:.22em}
  .s-hl,.s-hr{gap:14px}
  .s-hd .s-hide{display:none}
  .s-tool,.s-hd .s-tool,#cartBtn.s-tool,#memBtn.s-tool{font-size:11px;letter-spacing:.12em}
  .s-nav{gap:20px;padding:0 18px 12px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .s-nav::-webkit-scrollbar{display:none}
  .s-nav>a,.s-nav>.nav-item{font-size:11px;letter-spacing:.14em}
  .s-sb{padding:2px 18px 14px}
}

/* ── 頁尾 ── */
.s-ft{margin-top:96px;border-top:1px solid var(--s-hair);background:#fff;font-family:var(--s-body);text-align:left}
.s-ft-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding:56px 40px 34px}
.s-ft h4{font-family:var(--s-disp);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--s-sub);margin:0 0 14px;font-weight:400}
.s-ft p{font-size:12.5px;line-height:2.1;color:var(--s-mid);margin:0}
.s-ft .s-fm{font-family:var(--s-disp);font-size:17px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:12px;color:var(--s-ink)}
.s-fj{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}
.s-ft .s-fj a{font-family:var(--s-disp);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--s-mid);
  border:0;border-bottom:1px solid var(--s-hair);padding-bottom:2px}
.s-ft .s-fj a:hover{color:var(--s-ink);border-bottom-color:var(--s-ink)}
.s-fb{text-align:center;font-family:var(--s-disp);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--s-sub);
  padding:20px;border-top:1px solid var(--s-hair)}
@media(max-width:820px){.s-ft{margin-top:60px}.s-ft-in{grid-template-columns:1fr 1fr;gap:28px;padding:36px 18px 24px}}

/* ── 非首頁的抽屜選單 / 品牌選單(site.js 產生;樣式對齊首頁)── */
.s-drawer-ov,.s-mega-ov{position:fixed;inset:0;z-index:2000;display:none;font-family:var(--s-body);color:var(--s-ink)}
.s-drawer-ov{background:rgba(17,17,17,.3)}
.s-mega-ov{background:rgba(17,17,17,.28)}
.s-drawer-ov.open,.s-mega-ov.open{display:block}
.s-drawer{position:absolute;top:0;left:0;height:100%;width:86%;max-width:380px;background:#fff;overflow:hidden}
.s-view{display:flex;flex-direction:column;height:100%;overflow-y:auto}
.s-view[hidden]{display:none}
.s-dhead{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid var(--s-hair);
  font-family:var(--s-disp);font-size:12px;letter-spacing:.26em;text-transform:uppercase;flex:0 0 auto}
.s-dhead b{font-weight:400}
.s-x{border:0;background:none;font-size:22px;line-height:1;color:var(--s-sub);cursor:pointer;padding:0;width:28px;height:28px}
.s-drawer a{text-decoration:none;color:inherit;border:0}
.s-row{display:flex;align-items:center;justify-content:space-between;padding:17px 28px;border-bottom:1px solid var(--s-hair);
  font-family:var(--s-disp);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--s-ink)}
.s-row:hover{color:var(--s-mid)}
.s-row i{color:var(--s-sub);font-style:normal;font-size:15px}
.s-dsearch{display:flex;gap:12px;padding:18px 28px;border-bottom:1px solid var(--s-hair);align-items:center;margin:0}
.s-dsearch input,.s-dfilter{flex:1;min-width:0;padding:6px 0;border:0;border-bottom:1px solid var(--s-hair);border-radius:0;font-size:16px;
  outline:none;font-family:var(--s-body);background:transparent;color:var(--s-ink)}
.s-dsearch input:focus,.s-dfilter:focus{border-bottom-color:var(--s-ink)}
.s-dfilter{margin:16px 28px;flex:0 0 auto}
.s-dback{padding:16px 28px;color:var(--s-mid);font-family:var(--s-disp);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;border-bottom:1px solid var(--s-hair);flex:0 0 auto}
.s-list{overflow-y:auto;flex:1}
.s-item{display:block;padding:14px 28px;border-bottom:1px solid var(--s-hair);font-family:var(--s-disp);font-size:12.5px;letter-spacing:.12em;
  cursor:pointer;color:var(--s-mid);text-transform:uppercase}
.s-item:hover{color:var(--s-ink)}
.s-muted{cursor:default;color:var(--s-sub)}
.s-mega{background:#fff;max-height:84vh;overflow-y:auto;padding:0 40px 44px;box-shadow:0 16px 40px rgba(0,0,0,.1)}
.s-mhead{position:sticky;top:0;background:#fff;display:flex;align-items:center;gap:24px;padding:26px 0 18px;border-bottom:1px solid var(--s-hair);margin-bottom:24px}
.s-mhead h4{margin:0;font-family:var(--s-disp);font-size:12.5px;font-weight:400;letter-spacing:.28em;text-transform:uppercase}
.s-mhead input{flex:1;max-width:320px;padding:7px 0;border:0;border-bottom:1px solid var(--s-hair);border-radius:0;font-family:var(--s-body);font-size:13px;outline:none;background:transparent}
.s-mhead input:focus{border-bottom-color:var(--s-ink)}
.s-mhead .s-tool{margin-left:auto}
.s-mgrid{column-width:200px;column-gap:34px}
.s-mgrid .s-item{padding:11px 0;break-inside:avoid;letter-spacing:.13em;text-decoration:none}

/* ── 2026-09-17 頂部 icon(人頭 / 手提袋)+ 手機 logo 置中 ── */
.s-tool.s-icobtn,#cartBtn.s-icobtn,#memBtn.s-icobtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;border-bottom:0;line-height:0;color:var(--s-ink)}
.s-tool.s-icobtn:hover,#cartBtn.s-icobtn:hover,#memBtn.s-icobtn:hover{border-bottom:0;color:var(--s-mid)}
.s-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.s-badge{position:absolute;top:1px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--s-ink);
  color:#fff;font-family:var(--s-disp);font-size:9.5px;letter-spacing:0;line-height:15px;text-align:center}
.s-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--s-hair)}
.s-hr{gap:14px}
@media(max-width:820px){
  .s-hd-in{grid-template-columns:1fr auto 1fr}
  .s-hl{justify-self:start}
  .s-hr{justify-self:end;gap:10px}
}