@layer theme-custom {
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

section.index-editor{
  --ground:#EAE3D2;
  --surface:#FFFCF5;
  --ink:#211D1A;
  --ink-soft:#5B5449;
  --ink-faint:#8B8374;
  --accent:#C96A16;
  --accent-ink:#FFF8EE;
  --line:rgba(33,29,26,0.14);
  --line-strong:rgba(33,29,26,0.28);
  display:block;
  padding:0 !important;
  background:var(--ground);
  color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}
@media (prefers-color-scheme: dark){
  section.index-editor{
    --ground:#1B1815;
    --surface:#242019;
    --ink:#F2EDE0;
    --ink-soft:#C2B9A8;
    --ink-faint:#8A8171;
    --accent:#E2953E;
    --accent-ink:#2A1400;
    --line:rgba(242,237,224,0.14);
    --line-strong:rgba(242,237,224,0.28);
  }
}

section.index-editor *{ box-sizing:border-box; }
section.index-editor ::selection{ background:var(--accent); color:var(--accent-ink); }

section.index-editor .eyebrow{
  font-size:.92rem;
  color:var(--ink-faint);
  display:block;
  margin-bottom:.4em;
}

section.index-editor h1,
section.index-editor h2,
section.index-editor h3{ margin:0; font-weight:700; }
section.index-editor a{ color:inherit; }
section.index-editor p{ margin:0 0 1em; font-size:1.02rem !important; }
section.index-editor p:last-child{ margin-bottom:0; }

section.index-editor .wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}

section.index-editor section{ padding:clamp(48px,7vw,80px) 0; border-top:1px solid var(--line); }
section.index-editor .section-head{ margin-bottom:clamp(24px,3vw,36px); }
section.index-editor .section-head h2{
  font-size:clamp(1.6rem,3vw,2.1rem);
  line-height:1.3;
}
section.index-editor .section-sub{ color:var(--ink-soft); margin-top:.5em; font-size:1.02rem !important; }

/* ---------- HERO ---------- */
section.index-editor .hero{ border-top:none; padding-top:clamp(40px,6vw,64px); }
section.index-editor .hero-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
@media (max-width:820px){ section.index-editor .hero-grid{ grid-template-columns:1fr; } }
section.index-editor .hero-photo{
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(33,29,26,0.08);
}
section.index-editor .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; max-height:560px; }
section.index-editor .hero .eyebrow{ font-size:1.08rem; }
section.index-editor .hero h1{
  font-size:clamp(2.9rem,6.2vw,4.2rem);
  line-height:1.1;
  margin:.1em 0 .15em;
}
section.index-editor .hero .role{
  font-size:1.5rem !important;
  font-weight:500;
  color:var(--ink-soft);
  margin:0 0 .8em;
}
section.index-editor .hero .desc{
  max-width:46ch;
  color:var(--ink-soft);
  font-size:1.02rem !important;
}
section.index-editor .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.4em; }

/* ---------- BTN(圓角按鈕，全站 CTA 共用) ----------
   平台本身內建一個 .btn class(方角/透明底/小內距)，未分層、normal 優先權，
   會贏過我們 @layer 裡同樣 normal 優先權的 .btn 規則，導致按鈕一直沒有真的
   顯示成設計稿的圓角膠囊樣式。這裡全部屬性加 !important 才能真正蓋過去。 */
section.index-editor .btn{
  font-size:.98rem !important;
  font-weight:700 !important;
  padding:.85em 1.6em !important;
  border-radius:999px !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5em !important;
  border:1.5px solid var(--ink) !important;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
section.index-editor .btn.primary{ background:var(--accent) !important; border-color:var(--accent) !important; color:var(--accent-ink) !important; }
section.index-editor .btn.primary:hover{ transform:translateY(-1px); }
section.index-editor .btn.ghost{ color:var(--ink) !important; background:transparent !important; }
section.index-editor .btn.ghost:hover{ background:var(--ink) !important; color:var(--ground) !important; }

/* ---------- 通用頁面標題(非首頁 hero，用於 about-josh/service-list 這類子頁) ---------- */
section.index-editor .page-head{ padding-top:clamp(40px,6vw,64px); border-top:none; }
section.index-editor .page-head h1{ font-size:clamp(2rem,4.5vw,2.8rem); line-height:1.15; margin:0 0 .3em; }
section.index-editor .page-head .lede{ color:var(--ink-soft); font-size:1.1rem !important; max-width:56ch; }

/* ---------- 圖文左右分欄(story/service 頁共用) ---------- */
section.index-editor .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,48px); align-items:center; }
@media (max-width:820px){ section.index-editor .split{ grid-template-columns:1fr; } }
section.index-editor .split.reverse .split-photo{ order:2; }
@media (max-width:820px){ section.index-editor .split.reverse .split-photo{ order:0; } }
section.index-editor .split-photo{ border-radius:16px; overflow:hidden; background:var(--surface); }
section.index-editor .split-photo img{ width:100%; height:100%; object-fit:cover; display:block; max-height:440px; }
section.index-editor .split h2{ font-size:clamp(1.5rem,3vw,1.9rem); margin:0 0 .5em; }
section.index-editor .split p{ color:var(--ink-soft); font-size:1.02rem !important; }

/* ---------- ICON BADGE(小圖示圓圈，用於服務項目/我怎麼練) ---------- */
section.index-editor .icon-badge{
  width:52px; height:52px; min-width:52px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 14%, var(--surface));
  display:flex; align-items:center; justify-content:center;
}
section.index-editor .icon-badge svg{ width:24px; height:24px; stroke:var(--accent); }

/* ---------- OFFER ---------- */
section.index-editor .offer-list{ display:flex; flex-direction:column; }
section.index-editor .offer-row{
  display:grid; grid-template-columns: 52px 1fr auto; gap:20px; align-items:center;
  padding:20px 0; border-top:1px solid var(--line);
}
section.index-editor .offer-list .offer-row:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:640px){ section.index-editor .offer-row{ grid-template-columns:52px 1fr; row-gap:6px; } section.index-editor .offer-tag{ grid-column:2; } }
section.index-editor .offer-name{ font-weight:700; font-size:1.3rem; }
section.index-editor .offer-desc{ color:var(--ink-soft); font-size:1.02rem; margin-top:.3em; max-width:52ch; }
section.index-editor .offer-tag{
  font-size:.86rem;
  color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:.4em .9em;
  white-space:nowrap; height:fit-content;
}

/* ---------- ICON CARD GRID(用於我怎麼練) ---------- */
section.index-editor .icon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px){ section.index-editor .icon-grid{ grid-template-columns:1fr; } }
section.index-editor .icon-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,3vw,28px);
}
section.index-editor .icon-card .icon-badge{ margin-bottom:1em; }
section.index-editor .icon-card h3{ font-size:1.15rem; margin:0 0 .5em; }
section.index-editor .icon-card p{ color:var(--ink-soft); font-size:1.02rem !important; margin:0; }

/* ---------- ABOUT ---------- */
section.index-editor .about-grid p{ color:var(--ink-soft); font-size:1.05rem; }
section.index-editor .cred-list{ list-style:none; margin:1.4em 0 0; padding:0; display:flex; flex-direction:column; gap:.85em; }
section.index-editor .cred-list li{
  display:grid; grid-template-columns:70px 1fr; gap:14px;
  font-size:.96rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:.85em;
}
section.index-editor .cred-list li:first-child{ border-top:none; padding-top:0; }
section.index-editor .cred-year{ color:var(--ink-faint); }

/* ---------- METHOD ---------- */
section.index-editor .method-list{ margin:0; display:flex; flex-direction:column; }
section.index-editor .method-item{
  display:grid; grid-template-columns:140px 1fr; gap:24px;
  padding:20px 0; border-top:1px solid var(--line);
}
section.index-editor .method-list .method-item:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:640px){ section.index-editor .method-item{ grid-template-columns:1fr; row-gap:6px; } }
section.index-editor .method-item dt{ font-weight:700; font-size:1.25rem; color:var(--ink); }
section.index-editor .method-item dd{ margin:0; color:var(--ink-soft); font-size:1.02rem; max-width:56ch; }

/* ---------- NEWSLETTER ---------- */
section.index-editor #newsletter{ padding-top:0; padding-bottom:0; border-top:none; }
section.index-editor .nl-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(20px,3vw,32px);
  margin:clamp(32px,5vw,48px) 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
section.index-editor .nl-title{ max-width:56ch; color:var(--ink-soft); margin:0; font-size:1.02rem !important; }
section.index-editor .nl-status{
  font-size:.88rem; color:var(--ink-faint);
  border:1px dashed var(--line-strong); border-radius:999px; padding:.5em 1.1em; white-space:nowrap;
}

/* ---------- ARTICLES ---------- */
section.index-editor .article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:820px){ section.index-editor .article-grid{ grid-template-columns:1fr; } }
section.index-editor .article-card{ display:block; text-decoration:none; border-top:2px solid var(--ink); padding-top:16px; }
section.index-editor .article-tag{ font-size:.84rem; color:var(--accent); }
section.index-editor .article-card h3{
  font-weight:700; font-size:1.2rem; margin:.5em 0 .4em; color:var(--ink); line-height:1.3;
}
section.index-editor .article-card p{ color:var(--ink-soft); font-size:.96rem !important; margin:0; }

/* ---------- TIMELINE(用於認識嘉許頁面的生命歷程) ---------- */
section.index-editor .timeline{ position:relative; margin:0; padding:0; list-style:none; }
section.index-editor .timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--line-strong);
}
section.index-editor .timeline-item{ position:relative; padding:0 0 clamp(40px,6vw,64px) clamp(36px,6vw,56px); }
section.index-editor .timeline-item:last-child{ padding-bottom:0; }
section.index-editor .timeline-dot{
  position:absolute; left:0; top:6px; width:15px; height:15px; border-radius:50%;
  background:var(--ground); border:2px solid var(--accent); box-sizing:border-box;
}
section.index-editor .timeline-year{
  display:inline-block; font-weight:700; color:var(--accent); font-size:.92rem;
  letter-spacing:.02em; margin-bottom:.5em;
}
section.index-editor .timeline-item h2{ font-size:clamp(1.3rem,2.4vw,1.6rem); margin:0 0 .5em; }
section.index-editor .timeline-item p{ color:var(--ink-soft); font-size:1.02rem !important; }
section.index-editor .timeline-photo{
  margin-top:20px; border-radius:16px; overflow:hidden; max-width:420px;
  background:var(--surface);
}
section.index-editor .timeline-photo img{
  width:100%; display:block; object-fit:cover; max-height:340px;
}
@media (max-width:640px){
  section.index-editor .timeline-photo{ max-width:100%; }
}

/* ---------- 全站導覽列重新上色＋壓成一行（僅桌機/平板寬度） ---------- */
@media (min-width:992px){
  nav.navbar{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px 24px;
    background:color-mix(in srgb, #EAE3D2 92%, transparent) !important;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(33,29,26,0.14);
    box-shadow:none !important;
    padding:12px clamp(20px,4vw,40px) !important;
    position:sticky !important;
    top:0; z-index:999;
  }
  nav.navbar .navi-item:first-child{ display:none !important; }
  nav.navbar .navi-item{ display:flex !important; align-items:center; flex:0 0 auto !important; width:auto !important; }
  nav.navbar .navi-item:nth-child(2){ order:0 !important; }
  nav.navbar .navi-item.naviMain{ order:1 !important; margin-left:auto !important; }
  nav.navbar .navi-item .container{
    display:flex !important; align-items:center !important; gap:.7ch;
    padding:0 !important; margin:0 !important; max-width:none !important; width:auto !important;
  }
  nav.navbar .navbar-brand{ display:flex !important; align-items:center; }
  nav.navbar .navbar-brand img{ max-height:64px !important; width:auto !important; }
  nav.navbar .web-title a{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:700;
    font-size:1.15rem;
    color:#211D1A !important;
    white-space:nowrap;
  }
  nav.navbar .navi-item:nth-child(2) .container::after{
    content:"練的是身體，享受的是人生。";
    font-size:.88rem;
    color:#5B5449;
    margin-left:16px;
    white-space:nowrap;
    font-weight:400;
  }
  @media (max-width:1240px){
    nav.navbar .navi-item:nth-child(2) .container::after{ display:none; }
  }
  nav.navbar .naviMain > .container > ul{
    display:flex !important; flex-wrap:wrap; align-items:center;
    gap:clamp(12px,2vw,26px) !important; list-style:none; margin:0 !important; padding:0 !important;
  }
  nav.navbar .naviMain > .container > ul > li{ list-style:none; }
  nav.navbar .naviMain > .container > ul > li > a{
    font-size:.94rem;
    color:#5B5449 !important;
    padding:.3em 0 !important;
    border-bottom:1px solid transparent;
  }
  nav.navbar .naviMain > .container > ul > li > a:hover,
  nav.navbar .naviMain > .container > ul > li > a.active{
    color:#211D1A !important;
    border-color:#C96A16;
  }
  nav.navbar .nav-search-toggle a{ color:#5B5449 !important; }
}
@media (max-width:991.98px){
  nav.mobile-nav.zeynep{ background:#EAE3D2 !important; }
  nav.mobile-nav.zeynep a{
    color:#211D1A !important;
  }
}

/* ---------- 頁尾外層容器歸零，讓自訂頁尾滿版 ---------- */
/* 注意：只能用 > .container 歸零，不能對 footer 元素本身動 padding，
   因為自訂頁尾 HTML 裡也有一層 <footer class="bmy-footer2">，
   裸元素選擇器 footer 會連內層一起蓋掉 */
footer{ background:#211D1A !important; }
footer > .container{ padding:0 !important; max-width:100% !important; }

/* ---------- 全站主題色變數改成品牌色 ----------
   原生頁面(部落格列表/商品列表/聯絡我們/搜尋/分頁按鈕等)的紫色連結、
   紫色outline按鈕、紫色hover效果，來源都是站方主題這組:root CSS變數，
   不是個別頁面寫死顏色，改變數比逐頁疊 !important 補丁更根本。 */
:root{
  --primary-color:#C96A16 !important;
  --link-hover-color:#C96A16 !important;
  --header-link-hover-color:#C96A16 !important;
  --header-icon-hover-color:#C96A16 !important;
  --header-mobile-icon-color:#C96A16 !important;
  --button-bg-color:#C96A16 !important;
  --button-bg-hover-color:#211D1A !important;
  --outline-button-border-color:#C96A16 !important;
  --outline-button-text-color:#C96A16 !important;
  --outline-button-border-hover-color:#C96A16 !important;
  --outline-button-text-hover-color:#C96A16 !important;
}

/* ---------- 原生頁面標題字體(部落格/商品/聯絡等列表頁與 page-title 區塊)統一改回Noto Sans TC ----------
   原本是站方主題預設的 Playfair Display 襯線字，跟首頁改版後全站樸素黑體的方向不一致。
   .pagging-title 是列表頁(blog/product)用的 class，.page-title .title 是聯絡我們這類單頁用的 class。 */
.page-title .title,
.pagging-title{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif !important;
}

}