/* ============================================================
   廣福毛巾 品牌導覽配色覆蓋層  brand_nav.css
   2026-07 方案A：兩層 header + 「線上商城」大選單 + 手機選單品牌配色
   色系：墨黑 #2B2926 / 棉花米白 #F4EFE6 / 來福牌紅 #C0272D
   ⚠ 獨立檔：移除 include_header.php 內這支 <link> 即可完全還原
   ============================================================ */
:root{
  --bk-ink:#2B2926; --bk-ink2:#4A4640; --bk-cotton:#F4EFE6;
  --bk-red:#C0272D; --bk-red2:#A21F25; --bk-border:#E4DCCC;
  --bk-muted:#8A8175; --bk-paper:#fff;
}

/* ---------- 電腦版 頂部工具列（墨黑 bar，全寬） ---------- */
.headerContainer{ padding-top:0 !important; }
.brandUtilBar{ background:var(--bk-ink); width:100%; }
.brandUtilBar .container{ display:flex; justify-content:flex-end; }
.brandUtilBar .headerTopNavContainer{ display:flex; align-items:center; letter-spacing:.5px; }
.brandUtilBar .headerTopNavMember{ display:inline-flex; }
.brandUtilBar .headerTopNavMember:after{ display:none !important; }
.brandUtilBar .headerTopNavMember a{
  color:#D9D3C7; font-size:13px; padding:9px 16px;
  display:inline-flex; align-items:center; gap:6px;
  border-left:1px solid rgba(255,255,255,.12); text-decoration:none;
}
.brandUtilBar .headerTopNavMember:first-child a{ border-left:0; }
.brandUtilBar .headerTopNavMember a:hover{ color:#fff; }
.brandUtilBar .headerTopNavMember a i{ font-size:12px; }
.brandUtilBar .bkCartItem a{ color:#fff; font-weight:600; }
.bkCartNum{ background:var(--bk-red); color:#fff; border-radius:999px;
  font-size:11px; padding:1px 7px; margin-left:3px; line-height:1.6; }

/* ---------- 電腦版 主選單列 ---------- */
.headerContainer > .container{ padding-top:24px; }
.headerNavContainer{ padding-top:6px !important; }
.headerNavContainer .nav-link{ color:var(--bk-ink) !important; }
.headerNavContainer .nav-item:hover .nav-link,
.headerNavContainer .nav-item .nav-link:hover{ color:var(--bk-red) !important; }

/* 主選單隔線：停用舊 flex ::after（排版壓縮時會漏），改絕對定位短線，每格都穩定 */
.headerNavContainer > ul > li:not(:last-child)::after{ display:none !important; }
.headerNavContainer > ul > li{ margin:0 9px !important; position:relative; }
.headerNavContainer > ul > li:not(:first-child)::before{
  content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:1px; height:15px; background:#C6BFB1;
}

/* 移除舊的橘色 hover 圖標，改用紅色底線 */
.headerNavContainer .nav-link:before{ display:none !important; }
.headerNavContainer .nav-item .nav-link{ position:relative; }
.headerNavContainer .nav-item .nav-link:after{
  content:""; position:absolute; left:14px; right:14px; bottom:-3px; height:2px;
  background:var(--bk-red); border-radius:2px;
  transform:scaleX(0); transition:transform .22s ease;
}
.headerNavContainer .nav-item:hover .nav-link:after{ transform:scaleX(1); }

/* ---------- 其他次選單（非大選單）配合主題 ---------- */
.headerNavContainer .secondCate:not(.megaCate){
  background:var(--bk-paper) !important; width:auto; min-width:190px;
  border:1px solid var(--bk-border); border-top:3px solid var(--bk-red);
  border-radius:0 0 12px 12px; box-shadow:0 14px 30px rgba(43,41,38,.13);
  padding:8px; top:34px;
}
.headerNavContainer .secondCate:not(.megaCate) .secondCateInner{ max-width:none; width:auto; margin:0; }
.headerNavContainer .secondCate:not(.megaCate) ul li{
  margin:0; padding:0; line-height:normal; float:none;
}
.headerNavContainer .secondCate:not(.megaCate) ul li a{
  color:var(--bk-ink2) !important; font-size:15px; text-align:left;
  padding:8px 14px; border-radius:8px; white-space:nowrap;
}
.headerNavContainer .secondCate:not(.megaCate) ul li:hover{ background:transparent !important; }
.headerNavContainer .secondCate:not(.megaCate) ul li a:hover{
  background:var(--bk-cotton) !important; color:var(--bk-red) !important;
}

/* ---------- 「線上商城」大選單 megaCate ---------- */
.headerNavContainer .megaCate{
  left:0; right:auto; min-width:640px; max-width:94vw; width:auto;
  background:var(--bk-paper) !important; border:1px solid var(--bk-border);
  border-top:3px solid var(--bk-red); border-radius:0 0 12px 12px;
  box-shadow:0 14px 30px rgba(43,41,38,.13); padding:0;
}
.megaCate .secondCateInner{ padding:0; max-width:none !important; width:auto !important; margin:0 !important; }
.megaCols{ display:grid; grid-template-columns:repeat(4,minmax(150px,1fr));
  align-items:stretch; gap:0; padding:18px 6px; }
.megaCol{ min-width:0; padding:2px 16px; border-left:1px solid var(--bk-border); }
.megaCol:first-child{ border-left:0; }
.headerNavContainer .megaCate .megaColHead{
  display:block; font-weight:700; color:var(--bk-ink) !important; font-size:15px;
  padding:2px 8px 9px; margin-bottom:8px; text-decoration:none; line-height:1.45;
  border-bottom:2px solid var(--bk-red);
}
.headerNavContainer .megaCate .megaColHead:hover{ color:var(--bk-red) !important; }
.headerNavContainer .megaCate .megaCol ul{ list-style:none; margin:0; padding:0; }
.headerNavContainer .megaCate .megaCol ul li{
  margin:0 !important; padding:0 !important; line-height:normal !important; float:none;
}
.headerNavContainer .megaCate .megaCol ul li a{
  display:block; padding:10px 12px; color:var(--bk-ink2) !important;
  font-size:14.5px; line-height:1.3; text-decoration:none; border-radius:8px; white-space:nowrap;
}
.headerNavContainer .megaCate .megaCol ul li:hover{ background:transparent !important; }
.headerNavContainer .megaCate .megaCol ul li a:hover{
  background:var(--bk-cotton) !important; color:var(--bk-red) !important;
}

/* ---------- 手機版 漢堡鈕（墨黑方塊 + 米白線 + 中線紅） ---------- */
.menuOpen .ion-navicon:before{ background:var(--bk-ink) !important; border-radius:8px; }
.menuOpen .ion-navicon:after{ background:var(--bk-red) !important; }
.rwdMenuIcon .ion-navicon{ color:var(--bk-cotton) !important; }
.rwdMenuIcon .fa-times{ color:var(--bk-red) !important; }

/* ---------- 手機版 底部四格（米白底 + 墨黑線 + 點按轉紅） ---------- */
.phoneMenu{ background:var(--bk-paper) !important;
  border-top:1px solid var(--bk-border); box-shadow:0 -2px 10px rgba(43,41,38,.07); }
.phoneMenuBox a{ color:var(--bk-ink2) !important; }
.phoneMenuBox a:hover,.phoneMenuBox a:active{ color:var(--bk-red) !important; }
.phoneMenuBox i{ color:inherit !important; }
.phoneMenuTitle{ color:inherit !important; }
.phoneMenuBox .bkNewIcon{ font-size:20px; line-height:1; }