/****************************************************
  oesea 全站補丁 v2（完整覆蓋）
  - 移除全頁四周白邊（html/body margin 0）
  - 內容區維持滿版（只清第一層 container padding）
  - Header/ Footer 小尺寸置中
  - Footer 有響應式左右內縮；內容區不受影響
****************************************************/

/* 基礎：移除瀏覽器預設白邊 + 防橫向捲動 */
html, body{
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #fff6e9; /* 你的站內主背景色 */
  box-sizing: border-box;
}
*, *::before, *::after{ box-sizing: inherit; }

/* ===== 內容區：保持滿版（只處理最外圈，避免破壞內部網格） ===== */
body > .site,
body > #page{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-inline: 0 !important;
}

#page > .site-content,
.site > .site-content,
#page > main,
.site > main,
#page > #content,
.site > #content{
  padding-inline: 0 !important;
}

/* 清第一層 container 的左右 padding（不同主題的寫法都涵蓋） */
#page > .site-content > .container:first-child,
#page > .site-content > .container-fluid:first-child,
.site > .site-content > .container:first-child,
.site > .site-content > .container-fluid:first-child,
#page > main > .container:first-child,
#page > main > .container-fluid:first-child,
.site > main > .container:first-child,
.site > main > .container-fluid:first-child,
#content > .container:first-child,
#content > .container-fluid:first-child{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 內頁頁首（若有） */
.pagging-header{
  min-height: 100px !important;
  background-color: #001e2e !important;
  margin: 0 0 0px 0 !important; /* 只保留下間距 */
}
body .pagging-header .page-title,
body .page-title,
body .page-title *{ display: none !important; }

/* ===== Header：Sticky + 小尺寸置中 ===== */
:root{
  --nav-h: 80px;
  --nav-pad-y: 6px;
  --logo-h: 50px;
  --gutter: clamp(16px, 4vw, 32px); /* 只用在 header/footer */
  --footer-max: 1200px;
  --footer-gap: clamp(12px, 2vw, 24px);
  --brand-color: #ea5514;
}

header.site-header, .site-header, .main-header, #masthead, .navbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100%;
  min-height: var(--nav-h);
  padding-block: var(--nav-pad-y) !important;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
  overflow: visible !important;
  /* 只在 header 加左右安全邊距；不影響內容區 */
  padding-inline: var(--gutter) !important;
}
header.site-header .header-inner,
header.site-header .header-wrap,
.navbar .header-inner,
.navbar .header-wrap,
.navbar .navbar-bg,
.navbar .nav-wrap{
  min-height: var(--nav-h) !important;
  padding-block: var(--nav-pad-y) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.navbar{
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  width: 100%;
}
.navbar-brand{
  flex: 0 0 auto;
  max-width: 150px;
  display: inline-flex;
  align-items: center;
}
.navbar-brand img{ max-height: var(--logo-h); height: auto; width: auto; }

.navi-item{
  width: auto !important;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 桌機靠右 */
}
.navi-item ul{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.navi-item ul li a{
  letter-spacing: 2px !important;   /* 你要的字距 */
  display: inline-flex;
  align-items: center;
}

/* 小尺寸：整條 Header 與選單置中、允許換行 */
@media (max-width: 991px){
  .navbar{ justify-content: center !important; }
  .navbar-brand{ margin-inline: auto !important; }
  .navi-item{ order: 2; flex: 1 1 100%; justify-content: center !important; }
  .navi-item ul{ flex-wrap: wrap; justify-content: center; }
}

/* ===== Footer：置中 + 左右內縮（不影響主內容） ===== */
footer, .site-footer{
  background-color: var(--brand-color) !important;
  color: #fff;
  padding: 20px var(--gutter) !important; /* 上下固定、左右內縮 */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Footer 內層 container：置中 + 最大寬 + 內縮 */
body footer .container,
body footer .container-fluid,
body .site-footer .container,
body .site-footer .container-fluid{
  width: 100% !important;
  max-width: var(--footer-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Footer 的 row：取消負邊距並用 Flex 排版 */
body footer .row,
body .site-footer .row{
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: var(--footer-gap);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 欄位平均分配且置中；縮小時自動換行 */
body footer .row > [class*="col"],
body .site-footer .row > [class*="col"]{
  flex: 1 1 260px;
  max-width: 340px;
  text-align: center !important;
}

/* 清單/連結置中 */
body footer .row > [class*="col"] ul{
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
  text-align: center;
}
body footer .row > [class*="col"] ul li{ margin: 6px 0; }
body footer .row > [class*="col"] a{ display: inline-block; }

/* Footer Logo */
footer .logo,
footer .footer-logo,
footer .site-footer .navbar-brand{
  display: block;
  margin: 0 auto 12px;
}
footer .logo img,
footer .footer-logo img,
footer .site-footer .navbar-brand img,
footer img.footer-logo{
  display: block;
  margin-inline: auto;
  max-width: 120px;
  height: auto;
}

/* 內容區背景（保留） */
.content, main, #content, .site-content, .entry-content, .page{
  background-color: #fff6e9 !important;
}

/* 捲動後的導覽列辨識（可留可拿掉） */
body.nav-scrolled .navbar,
body.nav-scrolled header.site-header,
body.nav-scrolled .site-header{
  background-color: rgba(0,0,0,.3) !important;
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  backdrop-filter: blur(6px) saturate(130%);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}













/* ===== Navbar：上推第一屏、Sticky、捲動變色（純 CSS） ===== */
:root{
  /* 要把首屏圖拉多高：桌機 140px、手機 90px，自行調整 */
  --pull-up: 100px;
  --pull-up-mobile: 90px;

  /* 變色完成距離（捲多少就全變成實心色） */
  --fade-end: 140px;

  /* 捲動後的底色 */
  --nav-bg: #001e2e;
}
@media (max-width: 991px){
  :root{ --pull-up: var(--pull-up-mobile); --fade-end: 100px; }
}

/* 1) 讓正確的 header 元素 sticky（多抓幾個常見類名保險） */
header.site-header, .site-header, .main-header, #masthead, .navbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100%;
  background: transparent !important;     /* 背景交給 ::before 動畫上色 */
  margin-bottom: calc(-1 * var(--pull-up)) !important;  /* 負下間距：把下面整塊往上拉 */
}
/* 也把 header 的下一個兄弟往上推（避免 margin 折疊只生效一點點） */
header.site-header + *,
.site-header + *,
.main-header + *,
#masthead + *,
.navbar + *{
  margin-top: calc(-1 * var(--pull-up)) !important;
}

/* sticky 常見殺手：祖先 overflow:hidden；通通放寬 */
body, .site, .wrap, .site-wrap, .header, .header-wrap, .header-inner, .navbar-bg, .nav-wrap{
  overflow: visible !important;
}

/* 2) 用 ::before 當可動畫的背景層（內容層壓在其上） */
header.site-header::before,
.site-header::before,
.main-header::before,
#masthead::before,
.navbar::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;                 /* 跨滿整個視窗避免邊緣露縫 */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: transparent;
}
header.site-header > *,
.site-header > *,
.main-header > *,
#masthead > *,
.navbar > *{ position: relative; z-index: 1; }

/* 3) 純 CSS 滾動變色（Scroll-linked Animations） */
@supports (animation-timeline: scroll(root block)) {
  header.site-header::before,
  .site-header::before,
  .main-header::before,
  #masthead::before,
  .navbar::before{
    animation-name: nav-bg-fill;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--fade-end);
    animation-fill-mode: both;
  }
  @keyframes nav-bg-fill{
    from { background: rgba(0,30,46,0); }
    to   { background: var(--nav-bg); }
  }
}
/* 一些 Chromium 版本的相容語法 */
@supports not (animation-timeline: scroll(root block)) and (animation-timeline: scroll()) {
  header.site-header::before,
  .site-header::before,
  .main-header::before,
  #masthead::before,
  .navbar::before{
    animation-name: nav-bg-fill2;
    animation-timeline: scroll();
    animation-range: 0 var(--fade-end);
    animation-fill-mode: both;
  }
  @keyframes nav-bg-fill2{
    from { background: rgba(0,30,46,0); }
    to   { background: var(--nav-bg); }
  }
}

/* 如果你希望在不支援 scroll-animations 的瀏覽器也直接用深色，解開這行： */
/* header.site-header, .site-header, .main-header, #masthead, .navbar{ background: var(--nav-bg) !important; } */






















/* ===== Mobile Header Compact Pack (≤991px) ===== */
@media (max-width: 991px){
  :root{
    --nav-h: 56px;           /* 行動版目標高度 */
    --logo-h: 26px;          /* 行動版 LOGO 高度 */
    --pull-up-m: 72px;       /* 要把首屏圖拉多高（可自行調） */
  }

  /* 1) 行動版 Header：瘦高、深藍、sticky、負下間距把下圖拉上來 */
  header.site-header, .site-header, .main-header, #masthead, .navbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #001e2e !important;
    min-height: var(--nav-h) !important;
    padding-block: 8px !important;
    padding-inline: 12px !important;
    margin-bottom: calc(-1 * var(--pull-up-m)) !important; /* 往上拉內容 */
  }
  header.site-header + *,
  .site-header + *,
  .main-header + *,
  #masthead + *,
  .navbar + *{
    margin-top: calc(-1 * var(--pull-up-m)) !important;   /* 配對補償 */
  }

  /* 2) 三欄版面：左漢堡 | 中 LOGO | 右圖示 */
  .navbar{
    display: grid !important;
    grid-template-columns: 42px 1fr 72px;
    align-items: center;
    gap: 8px;
  }
  /* LOGO 置中 & 縮小 */
  .navbar-brand{
    order: 2; justify-self: center;
    max-width: 160px !important;
    display: inline-flex; align-items: center;
  }
  .navbar-brand img{ max-height: var(--logo-h) !important; height: auto !important; }

  /* 左邊：漢堡按鈕（常見類名一網打盡） */
  .menu-toggle, .navbar-toggle, .mobile-toggle, .hamburger,
  [class*="menu"][class*="toggle"], [class*="hamburger"]{
    display: inline-flex !important;
    order: 1; justify-self: start;
    align-items: center; line-height: 1; font-size: 28px;
  }

  /* 右邊：帳號 / 購物車 / 工具列（若存在） */
  .header-icons, .header-right, .site-tools, .navi-tools,
  .minicart, .cart, .account{
    order: 3; justify-self: end;
    display: inline-flex !important; gap: 10px; align-items: center;
  }

  /* 3) 隱藏桌機選單 & topbar，避免占滿兩列 */
  .navi-item, .main-navigation, .menu, .menu > ul, .navi-item ul,
  .topbar, .header-top, .secondary-header{
    display: none !important;
  }

  /* 4) 首頁移除米色「大標帶」（避免第二個 LOGO） */
  body.home .pagging-header{ display: none !important; }

  /* 5) sticky 常見干擾：外層不許 overflow 隱藏 */
  body, .site, .wrap, .header, .header-wrap, .header-inner, .navbar-bg, .nav-wrap{
    overflow: visible !important;
  }

  /* 6) 讓行動選單抽屜（若有）一定在最上層 */
  .offcanvas, .mobile-menu, .drawer{ z-index: 10000 !important; }
















































/* 手機：頂部背景改為 #001e2e（含 sticky 狀態） */
@media (max-width: 992px){
  .site-header,
  header.site-header,
  .header,
  .navbar,
  .elementor-location-header,
  .elementor-sticky--effects{
    background:#001e2e !important;
  }

  /* 手機漢堡選單：用 CSS 重新畫 3 條白線，避免只剩一條線的 bug */
  .elementor-menu-toggle,
  .menu-toggle,
  .hamburger,
  .mobile-menu-toggle{
    position: relative;
    width: 44px; height: 44px;
    border: 0; box-shadow: none;
    color: transparent !important;      /* 隱藏字形圖示顏色 */
    background:
      linear-gradient(#fff,#fff) center 13px / 26px 2px no-repeat,
      linear-gradient(#fff,#fff) center 21px / 26px 2px no-repeat,
      linear-gradient(#fff,#fff) center 29px / 26px 2px no-repeat !important;
  }
  /* 把主題原本的 icon 隱藏，避免和重畫的三條線疊在一起 */
  .elementor-menu-toggle i,
  .elementor-menu-toggle .eicon,
  .elementor-menu-toggle:before,
  .menu-toggle i,
  .menu-toggle:before,
  .mobile-menu-toggle i{
    opacity: 0 !important; font-size: 0 !important;
  }

  /* 手機版選單面板與文字配色（打開後的整片背景） */
  .elementor-nav-menu--dropdown,
  .mobile-menu,
  .offcanvas,
  .drawer-nav{
    background:#001e2e !important;
  }
  .elementor-nav-menu--dropdown a,
  .mobile-menu a,
  .drawer-nav a{
    color:#fff !important;
  }
  .elementor-nav-menu--dropdown a:hover,
  .mobile-menu a:hover{
    background: rgba(255,255,255,.08) !important;
  }

  /*（可選）把頂部其他圖示也變白，例如會員/購物車 SVG */
  .site-header svg,
  .site-header .icon,
  .navbar svg{
    fill:#fff !important; color:#fff !important;
  }
}





















@media (max-width: 992px){
  .mobile-menu.left-style{ position: relative; }

  .mobile-menu.left-style .mobile-logo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /* 完全置中 */
    margin: 0 !important;
    float: none !important;
    z-index: 2;
  }
}












/* 手機選單的漢堡鍵：強制三條線為白色 */
.mobile-menu.left-style .hamburger{
  margin-right: 1rem; /* 你原本的設定 */
}

/* 1) Jonathan Suh 的 hamburgers 結構 */
.mobile-menu.left-style .hamburger .hamburger-inner,
.mobile-menu.left-style .hamburger .hamburger-inner::before,
.mobile-menu.left-style .hamburger .hamburger-inner::after{
  background-color:#fff !important;
  box-shadow:none !important;         /* 避免灰色陰影 */
}
.mobile-menu.left-style .hamburger.is-active .hamburger-inner,
.mobile-menu.left-style .hamburger.is-active .hamburger-inner::before,
.mobile-menu.left-style .hamburger.is-active .hamburger-inner::after{
  background-color:#fff !important;   /* 開啟狀態仍為白 */
}

/* 2) span / .bar 三條線做法 */
.mobile-menu.left-style .hamburger span,
.mobile-menu.left-style .hamburger .bar{
  background:#fff !important;
}

/* 3) Elementor eicon-menu-bar 做法 */
.mobile-menu.left-style .hamburger .eicon-menu-bar:before{
  background-color:#fff !important;
  box-shadow:0 8px 0 #fff, 0 -8px 0 #fff !important;
}

/* 4) 若是 SVG 圖示 */
.mobile-menu.left-style .hamburger svg,
.mobile-menu.left-style .hamburger svg *{
  fill:#fff !important;
  stroke:#fff !important;
}





























@media (max-width: 992px){
  /* 關掉主題用來做 X 動畫的斜線（偽元素與旋轉） */
  .mobile-menu.left-style .hamburger:before,
  .mobile-menu.left-style .hamburger:after,
  .mobile-menu.left-style .hamburger.is-active:before,
  .mobile-menu.left-style .hamburger.is-active:after,
  .elementor-menu-toggle:before,
  .elementor-menu-toggle:after{
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .mobile-menu.left-style .hamburger,
  .mobile-menu.left-style .hamburger.is-active,
  .elementor-menu-toggle,
  .elementor-menu-toggle.elementor-active{
    transform: none !important;   /* 禁用旋轉成 X */
  }

  /* 只保留我們自繪的三條白線 */
  .mobile-menu.left-style .hamburger{
    width:44px; height:44px; border:0;
    background:
      linear-gradient(#fff,#fff) center 13px/26px 2px no-repeat,
      linear-gradient(#fff,#fff) center 21px/26px 2px no-repeat,
      linear-gradient(#fff,#fff) center 29px/26px 2px no-repeat !important;
  }
  /* 隱藏主題內部的 span/i/svg 線條，避免疊加 */
  .mobile-menu.left-style .hamburger > *,
  .mobile-menu.left-style .hamburger *::before,
  .mobile-menu.left-style .hamburger *::after{
    display:none !important;
  }
}



































/* 手機：頂部背景改為 #001e2e（含 header sticky 狀態） */
@media (max-width: 992px){
  .site-header,
  header.site-header,
  .header,
  .navbar,
  .elementor-location-header{
    background:#001e2e !important;
  }
}






































































/* 手機：保留選單藍色，但拿掉選單底下那塊藍色空白 */
@media (max-width: 991px){
  /* 讓真正的選單維持藍色 */
  .elementor-location-header{ background:#001e2e !important; }

  /* 1) 移除 Elementor sticky 佔位的高度/背景 */
  .elementor-sticky__spacer{
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* 2) 若有自訂的內頁抬頭，手機版關掉 */
  .pagging-header{ display:none !important; background:transparent !important; }

  /* 3) 第一個內容區塊不要被往下推，也不要吃到藍底 */
  .elementor-location-header + *,
  .elementor-location-header + .elementor{
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
  }
}





/* 手機版：背景透明 + 向上位移 200px + 移除 sticky 佔位 */
@media (max-width: 992px){
  /* 全部相關容器背景設為透明 */
  .site-header,
  header.site-header,
  .header,
  .navbar,
  .elementor-location-header,
  .elementor-sticky--effects{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 取消 sticky 佔位造成的大空白 */
  .elementor-sticky__spacer{
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /* 若有 sticky 狀態，改回一般流式，避免再次撐高版面 */
  .elementor-sticky--active{
    position: static !important;
    top: auto !important;
  }

  /* 讓 header 整體往上移動 200px（負上間距會實際吃掉空白） */
  .elementor-location-header,
  header.site-header,
  .site-header,
  .navbar{
    margin-top: -52px !important;
  }

  /* 若內層還有 padding/margin 撐高，同步歸零 */
  .elementor-location-header .elementor-section,
  .elementor-location-header .elementor-container{
    padding-top: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
  }
}

/* 想用 transform 位移而非改版面，可改成下面這行（二選一，預設用 margin-top） */
/*
@media (max-width: 992px){
  .elementor-location-header,
  header.site-header,
  .site-header,
  .navbar{ transform: translateY(-200px); }
}
*/







































/* ===== 修正：手機版商品內容被隱藏（.menu 全域隱藏副作用） ===== */
@media (max-width: 991px){
  /* A) 只隱藏「頭部(Header)裡」的桌機選單，不影響內容區 */
  :is(header, .site-header, #masthead, .navbar)
  :is(.navi-item, .main-navigation, nav, .nav, .menu, .menu > ul){
    display: none !important;
  }

  /* B) 內容區、文章、WooCommerce 裡的 .menu 一律恢復顯示 */
  :where(main, #content, .site-content, .content, .entry-content, .page, .woocommerce)
  :is(.menu, .menu > ul, .product-categories){
    display: block !important;
  }

  /*（可選）有些主題把內容區側欄也掛在 header 下層，保險再放行一次 */
  :where(#primary, #main, #container, .container, .site-main) :is(.menu, .menu > ul){
    display: block !important;
  }
}