@charset "utf-8";
/* ============================================================================
 * themes/custom-3ffood/header.css — 3ffood 主題 header 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   承接舊 3ffood.css 的 header / nav / dropdown / 多層下拉 / header-area /
 *   logo / cart 段落，作為 3ffood 主題對 common/header.css 的覆寫與補充層。
 *   載入順序在 common/header.css 之後，重複規則由 3ffood 版本後勝覆寫。
 *
 * 抽取來源（public/web/css/3ffood.css）：
 *   - line 2036-2493：#header / .navLogo / .navbar-nav / .nav-item / .nav-link /
 *                     .headerMenu1~3 多層下拉 / .dropdown-menu(-login/1/2/3) /
 *                     .dropdown-submenu / .navbar-collapse / .mobile-function-menu /
 *                     @media 1199px（navbar 收合 + offcanvas + mobile-function-menu）
 *   - line 2495-2527：.desktop / .mobile / .desktopImg / .mobileImg + @media 1199px
 *                     ★ 3ffood 專屬斷點覆寫：common/base.css 的 .desktop/.mobile
 *                       切換點為 max-width:991px，但 3ffood navbar 在 1199px 即收合，
 *                       故桌機/行動切換亦須對齊 1199px。漏抽會導致 992~1199px 區間
 *                       桌機選單元素仍顯示（與 cm12 不符）。本檔載入晚於 common 覆寫之。
 *   - line 4318-4370：.header-area / .logo / .cart-icon / .cart-img / .cart-info
 *                     （頂部 logo + 購物車資訊區）
 *   - line 5734-5743：.dropdown-menu（容器 reset）/ .dropdown-width（270px）
 *   - line 7092-7109：.dropdown-submenu 定位 / .headerMenu2:hover>.dropdown-menu2 /
 *                     .headerMenu3:hover>.dropdown-menu3（多層下拉展開）
 *   - line 8304-8534：三福 Header 仿圖改版（@media min-width:1200px 桌機）—
 *                     白底 header + 米金漸層底線 + headerMenu1 文字選單（・分隔）+
 *                     右側 icon 按鈕化 + dropdown 米金卡片化（#6a1d15 hover）
 *
 * 跳過範圍：
 *   - .function-btns-block 浮動社群按鈕（3ffood.css 7114~）屬 footer 層，
 *     比照 dgfactor task 8.4 放 footer.css（task 10.4）
 *
 * 載入順序：
 *   common/header.css -> themes/custom-3ffood/header.css（本檔）-> 其他
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 10.2）
 * ============================================================================
 */

/* ============================================================================
 * 頂部導覽列：#header / navbar-nav / nav-item / headerMenu1~3 多層下拉 / dropdown-menu / dropdown-submenu / mobile-function-menu / @media 1199px navbar 收合 (3ffood.css 2036-2493)
 * ============================================================================ */

/* 使用 inline-block 確保寬度正確計算 */

/* 使用 scaleX 替代 width 動畫，效能更好且不會有寬度計算問題 */

/* 確保子選單不繼承底線 */
.dropdown-menu .nav-link::after {
  display: none !important;
}

/* 登入選單項目樣式 */

.dropdown-menu.dropdown-menu2,
.dropdown-menu.dropdown-menu3 {
  display: none;
  padding-top: 0;
}

.headerMenu2.dropdown.show .dropdown-menu2,
.headerMenu3.dropdown.show .dropdown-menu3 {
  display: block;
  padding-top: 0;
  width: fit-content;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}

/* 第二、第三層選單美化 - 加強優先級 */

/* 下拉選單項目樣式 - 加強優先級 */

/* 有子選單的項目顯示右箭頭 - 只針對有 dropdown-toggle 的項目 */
#header .navbar-nav .dropdown-menu .nav-link.dropdown-toggle::after {
  content: '›' !important;
  font-family: inherit !important;
  font-weight: normal !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  border: none !important;
  color: #999999 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 沒有子選單的項目不顯示箭頭 */
#header .navbar-nav .dropdown-menu .nav-link:not(.dropdown-toggle)::after {
  display: none !important;
}

/* hover 效果 - 深灰色背景 + 白字 */

/* 語言選單和其他標準下拉選單 Hover 顯示 (桌面版) */

.headerMenu2.dropdown.show .dropdown-menu2.show,
.headerMenu3.dropdown.show .dropdown-menu3.show {
  display: block;
  padding-top: 0;
}


.dropdown .dropdown-submenu .nav-link {
  padding: 0;
  font-size: 15px;
  color: #333333;
}

/* 已移至上方統一設定 */



/* ============================================================================
 * 桌機/行動切換 .desktop/.mobile/.desktopImg/.mobileImg — ★ 3ffood 斷點覆寫為 1199px(common 為 991px) (3ffood.css 2495-2527)
 * ============================================================================ */

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.desktopImg {
  display: block;
}

.mobileImg {
  display: none;
}

@media (max-width: 1199.98px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .desktopImg {
    display: none;
  }

  .mobileImg {
    display: block;
  }
}

/* ============================================================================
 * 頂部 logo + 購物車資訊區：.header-area / .logo / .cart-icon / .cart-img / .cart-info (3ffood.css 4318-4370)
 * ============================================================================ */

/* ============================================================================
 * 下拉容器 reset：.dropdown-menu / .dropdown-width (3ffood.css 5734-5743)
 * ============================================================================ */

/* ============================================================================
 * 多層下拉展開定位：.dropdown-submenu / .headerMenu2~3:hover>.dropdown-menu (3ffood.css 7092-7109)
 * ============================================================================ */

/* ============================================================================
 * 三福 Header 仿圖改版（@media min-width:1200px 桌機）—白底+米金漸層底線+文字選單+dropdown米金卡片 (3ffood.css 8304-8534)
 * ============================================================================ */

/* 三福 Header 仿圖改版（僅桌機） */
@media (min-width: 1200px) {
  #header {
    background: #ffffff;
    border-bottom: 1px solid #e6e1db;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }

  #header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #dac8b1 0%, #efe5d9 45%, #d3b89a 100%);
    opacity: 0.9;
    pointer-events: none;
  }

  #header #navBar {
    padding: 0;
  }

  #header #navBar>.header-navbar-inner.plr-185 {
    min-height: 84px;
    padding-left: 56px;
    padding-right: 56px;
    display: flex;
    align-items: center;
  }

  #header .logo {
    padding: 0;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  #header .navLogo {
    /* 修正：原 height:auto + max-height:none 會讓 logo 依上傳圖片原始尺寸放大；改為固定 60px（width:auto 維持比例），與 default 主題桌機一致，不論圖片長寬皆維持固定高度 */
    height: 60px;
    width: auto;
    max-height: 60px;
    margin-right: 20px;
  }

  #header .header-navbar-inner>.navbar-nav {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* #723 雙 ul 結構:主選單 ul 承接原 .navbar-collapse 的 flex:1 伸展
     (原「li.headerMenu1+li:not(.headerMenu1){margin-left:auto}」推右效果由此重現),
     actions ul 收縮貼右,重現拆分前幾何 */
  #header .header-navbar-inner>ul.header-primary-nav {
    flex: 1 1 auto;
    margin-left: 0;
  }

  #header .header-navbar-inner>ul.header-actions {
    width: auto;
    flex: 0 0 auto;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1 {
    margin: 0;
    padding: 0 11px;
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1>.nav-link {
    padding: 0;
    color: #3e2318;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1>.nav-link::after {
    display: none !important;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1+li.headerMenu1::before {
    content: "・";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #a58060;
    font-size: 12px;
    line-height: 1;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1:hover>.nav-link,
  #header .header-navbar-inner>.navbar-nav>li.headerMenu1>.nav-link:focus {
    color: #5f3025;
  }

  /* #723:原「headerMenu1+li:not(.headerMenu1){margin-left:auto}」死規則移除——雙 ul 拆分後
     永不匹配,推右效果已由 ul.header-primary-nav flex:1 / ul.header-actions flex:0 取代 */

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1) {
    margin: 0 0 0 6px;
    padding: 0;
    flex: 0 0 auto;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 3px;
    border: 1px solid #dcd8d2;
    background: #ffffff;
    color: #3e2318;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link i {
    margin: 0;
    font-size: 14px;
    line-height: 1;
    order: -1;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link p {
    display: block !important;
    margin: 0;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.dropdown-toggle::after {
    display: none !important;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.dropdown-menu {
    border: 1px solid #e5ddd2;
    border-radius: 8px;
    margin-top: 0;
    box-shadow: 0 10px 22px rgba(34, 20, 12, 0.14);
    min-width: 150px;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item.dropdown {
    position: relative;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item.dropdown:not(.headerMenu1)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item.dropdown>.dropdown-menu {
    top: calc(100% - 1px);
    margin-top: 0 !important;
    padding: 8px 0;
    background: #fffdf9;
    border: 1px solid #e5ddd2;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(34, 20, 12, 0.14);
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item.dropdown:hover>.dropdown-menu {
    display: block;
  }

  #header .header-navbar-inner .dropdown-menu .nav-link,
  #header .header-navbar-inner .dropdown-menu .dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: #4a2a1d;
    background: transparent;
    border: 0;
    white-space: nowrap;
  }

  #header .header-navbar-inner .dropdown-menu .nav-link.dropdown-toggle::after {
    right: 14px !important;
    color: #ad8d71 !important;
  }

  #header .header-navbar-inner .dropdown-menu .nav-link:hover,
  #header .header-navbar-inner .dropdown-menu .nav-link:focus,
  #header .header-navbar-inner .dropdown-menu .dropdown-item:hover,
  #header .header-navbar-inner .dropdown-menu .dropdown-item:focus {
    background: #6a1d15;
    color: #ffffff;
  }

  #header .header-navbar-inner .dropdown-menu .nav-link.dropdown-toggle:hover::after,
  #header .header-navbar-inner .dropdown-menu .nav-link.dropdown-toggle:focus::after {
    color: #ffffff !important;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link:hover {
    border-color: #bcb2a6;
    color: #2f1a11;
    background: #fffaf3;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item>a.nav-link.btn {
    background: #6a1d15 !important;
    border-color: #6a1d15 !important;
    color: #ffffff;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item>a.nav-link.btn i {
    color: #ffffff;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item>a.nav-link.btn p {
    color: #ffffff;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item>a.nav-link.btn:hover {
    background: #4a2419;
    border-color: #4a2419;
    color: #ffffff;
  }
}

/* ============================================================================
 * 三福 Header 仿圖改版（平板 @media 992-1199px）— #header 白底+米金底線+navBar/logo/navLogo/navbar-toggler/lightMenu (3ffood.css 12976 區塊內 13075-13134；同 @media 的 #footer 部分留給 footer.css)
 * ============================================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
  #header {
    background: #ffffff;
    border-bottom: 1px solid #e6e1db;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }

  #header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #dac8b1 0%, #efe5d9 45%, #d3b89a 100%);
    opacity: 0.9;
    pointer-events: none;
  }

  #header #navBar {
    padding: 0;
  }

#header .navLogo {
    height: auto;
    width: auto;
    max-height: 60px;
    margin-right: 0;
  }

}

/* ============================================================================
 * 三福 Header 仿圖改版（手機 @media max-width:480px）— #header 容器 14px padding + navLogo 54px (3ffood.css 14452 區塊內 14453-14462；同 @media 的 widget 部分留給 widget.css)
 * ============================================================================ */

@media (max-width: 479.98px) {
  #header #navBar>.header-navbar-inner.plr-185 {
    min-height: 74px;
    padding-left: 14px;
    padding-right: 14px;
  }

  #header .navLogo {
    height: 54px;
    margin-right: 0;
  }
}

/* ============================================================================
 * 三福 Header 仿圖改版（寬螢幕 @media min-width:1400px）— 容器 96px padding + navLogo margin-right 28px + headerMenu1 padding 0 15px / nav-link 17px 等放大細修（★ user ~1900px 螢幕實際生效值；漏抽會 fallback 到 >=1200 的 56px，造成 logo/選單位置偏左）(3ffood.css 14546-14579)
 * ============================================================================ */

@media (min-width: 1400px) {
  #header #navBar>.header-navbar-inner.plr-185 {
    padding-left: 96px;
    padding-right: 96px;
  }

  #header .navLogo {
    margin-right: 28px;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1 {
    padding: 0 15px;
  }

  #header .header-navbar-inner>.navbar-nav>li.headerMenu1>.nav-link {
    font-size: 17px;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1) {
    margin-left: 8px;
  }

  #header .header-navbar-inner>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link {
    gap: 8px;
    min-height: 36px;
    padding: 7px 14px;
    font-size: 15px;
  }

  #header .header-navbar-inner .dropdown-menu .nav-link,
  #header .header-navbar-inner .dropdown-menu .dropdown-item {
    font-size: 15px;
  }
}

/* ============================================================================
 * 側欄索引式 Mega Menu — 3ffood 品牌色覆寫
 *   棗紅 #6a1d15 / 金棕 #a58060 / 奶油底 #fffdf9
 * 僅覆寫顏色，版面結構（雙欄／寬度／捲動）一律沿用 common/header.css
 * ==========================================================================*/
@media (min-width: 1200px) {
  /* 面板：奶油底 + 暖色邊；padding:0 移除 Bootstrap .dropdown-menu 預設的
     8px 上下內距（common 的 padding:0 實測未生效，於此同選擇器補上，
     避免 body 下方殘留 8px 面板奶油底縫隙） */
  #header .navbar-nav .dropdown-menu1.mega-menu-panel {
    background: #fffdf9;
    border-color: transparent;
    padding: 0;
  }

  .mega-menu-search {
    border-bottom-color: #efe5d9;
  }

  .mega-menu-search-input {
    background: #fdf9f3;
    border-color: #e5ddd2;
    color: #3e2318;
  }

  .mega-menu-search-input:focus {
    border-color: #a58060;
    background: #ffffff;
  }

  /* 左欄：與面板同底（透明吃面板 #fffdf9），不另用色塊、不畫分隔線，
     避免左欄出現色塊邊界感；hover / active 仍套棗紅字 */
  .mega-menu-rail {
    background: transparent;
    border-right: none;
  }

  .mega-menu-rail-link {
    color: #4a2a1d;
  }

  .mega-menu-rail-item:hover > .mega-menu-rail-link {
    background: #efe3d4;
    color: #6a1d15;
  }

  .mega-menu-rail-item.active > .mega-menu-rail-link {
    background: #ffffff;
    color: #6a1d15;
  }

  /* 右欄：分類標題、群組標題、第三層連結、查看全部套品牌色 */
  .mega-menu-panel-title {
    color: #6a1d15;
    border-bottom-color: #efe5d9;
  }

  .mega-menu-panel-title:hover {
    color: #5f1810;
  }

  .mega-menu-group-title {
    color: #6a1d15;
  }

  .mega-menu-group-title:hover {
    color: #5f1810;
  }

  .mega-menu-grouplist-link {
    color: #4a2a1d;
  }

  .mega-menu-grouplist-link:hover {
    color: #6a1d15;
  }

  .mega-menu-viewall {
    color: #6a1d15;
    border-color: #d8c6ad;
  }

  .mega-menu-viewall:hover {
    background: #efe3d4;
    border-color: #a58060;
    color: #6a1d15;
  }
}

/* ============================================================================
 * 骨架語意化選擇器同步（issue #709）：原 blade 以 webCss!=6 三元決定 d-lg-none／d-none，
 * 3ffood（webCss 6）桌機仍顯示文字標籤——主題差異改由本檔覆寫 common 的預設隱藏。
 * ============================================================================ */

@media (min-width: 992px) {
  .nav-action-label--collapse {
    display: block;
  }
}

.nav-lang-label {
  display: inline;
}