@charset "utf-8";
/* ============================================================
   維濟生技 首頁 2026 改版新增區塊
   2026-09-10 建立。只有首頁用得到，刻意不寫進 css_main.css，
   免得影響其他頁面。既有區塊的樣式一律不動。

   色票：深綠 #335524 / 品牌綠 #4F7F3B / 淺綠底 #EDF3EA
        金 #C8A24A / 米白 #F7F5F0 / 墨 #242424
   ============================================================ */
:root{
  --wj-green:#4F7F3B;
  --wj-green-d:#335524;
  --wj-green-l:#EDF3EA;
  --wj-gold:#C8A24A;
  --wj-gold-d:#8C6318;
  --wj-cream:#F7F5F0;
  --wj-ink:#242424;
  --wj-mid:#5B5B55;
  --wj-line:#DEDED8;
}

/* ---------- 共用 ---------- */
.wjSection{padding:64px 0}
.wjSection.alt{background:var(--wj-cream)}
.wjHead{text-align:center;margin-bottom:40px}
.wjHead h2{
  font-size:30px;line-height:1.4;font-weight:700;color:var(--wj-green-d);
  margin:0;letter-spacing:.04em;
}
.wjHead .wjRule{width:52px;height:4px;background:var(--wj-gold);border-radius:2px;margin:16px auto 0}
.wjHead p{margin:14px 0 0;color:var(--wj-mid);font-size:15.5px;line-height:1.9;text-wrap:balance}
.wjBtn{
  display:inline-block;padding:12px 30px;border-radius:2px;
  background:var(--wj-green);color:#fff;font-size:15px;letter-spacing:.06em;
  text-decoration:none;transition:background .18s;
}
.wjBtn:hover,.wjBtn:focus{background:var(--wj-green-d);color:#fff;text-decoration:none}
.wjBtn.ghost{background:transparent;border:1px solid var(--wj-green);color:var(--wj-green)}
.wjBtn.ghost:hover{background:var(--wj-green);color:#fff}
.wjBtn.gold{background:var(--wj-gold-d)}
.wjBtn.gold:hover{background:#6f4d12}

/* ---------- 公告細帶 ----------
   站台的兩個選單（桌機 .headerContainer、手機 .rwdMenuContainer）都是
   position:fixed; top:0，所以細帶不能只是放在最上面，會被蓋住。
   做法：細帶自己也 fixed 在最上層，兩個選單往下推一條的高度，
   再用 body 的 padding-top 把內容整個下移（用 padding 不用 margin，
   才不會蓋掉 .rwd_header_mt 在手機版原本的 margin 設定）。
   這些規則全部掛在 body.wjHasBar 底下，只有首頁、而且細帶有開時才生效。 */
.wjAnnounce{
  background:var(--wj-green-d);color:#fff;text-align:center;
  font-size:14px;letter-spacing:.06em;padding:10px 16px;line-height:1.7;
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--wj-bar-h);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.wjAnnounce a{color:#fff;text-decoration:underline;text-underline-offset:3px}
body.wjHasBar{--wj-bar-h:42px;padding-top:var(--wj-bar-h)}
body.wjHasBar .headerContainer,
body.wjHasBar .rwdMenuContainer,
body.wjHasBar .rwdHeaderNavContainer,
body.wjHasBar .rwdCatBarContainer{top:var(--wj-bar-h)}

/* ---------- 主標語 ---------- */
.wjSlogan{background:#fff;padding:58px 0 50px;text-align:center}
.wjSlogan h1{
  font-size:34px;line-height:1.55;font-weight:700;color:var(--wj-green-d);
  margin:0 auto;max-width:26em;letter-spacing:.02em;
  text-wrap:balance;line-break:strict;            /* 不支援的瀏覽器會自動忽略，退回一般換行 */
}
.wjSlogan p{
  margin:20px auto 0;max-width:44em;color:var(--wj-mid);
  font-size:16px;line-height:2;
}

/* ---------- 依你的生活選 ---------- */
.wjLifeGrid{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -12px}
.wjLifeCell{width:25%;padding:0 12px;margin-bottom:24px}
.wjLifeCard{
  display:block;height:100%;background:#fff;border:1px solid var(--wj-line);
  padding:22px 20px 26px;text-align:center;text-decoration:none;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.wjLifeCard:hover{
  border-color:var(--wj-green);transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(51,85,36,.10);text-decoration:none;
}
.wjLifeCard img{width:100%;height:auto;display:block;margin-bottom:14px}
.wjLifeCard .t{font-size:22px;font-weight:700;color:var(--wj-green-d);line-height:1.5}
.wjLifeCard .d{margin-top:10px;color:var(--wj-mid);font-size:14.5px;line-height:1.9;min-height:3.8em;text-wrap:pretty}
.wjLifeCard .go{margin-top:14px;color:var(--wj-gold-d);font-size:14px;letter-spacing:.08em}

/* ---------- 多入更划算 ---------- */
.wjBundleGrid{display:flex;flex-wrap:wrap;margin:0 -10px}
.wjBundleCell{width:25%;padding:0 10px;margin-bottom:22px}
.wjBundleCard{
  display:block;background:#fff;border:1px solid var(--wj-line);height:100%;
  text-decoration:none;transition:border-color .18s,box-shadow .18s;
}
.wjBundleCard:hover{border-color:var(--wj-green);box-shadow:0 8px 22px rgba(51,85,36,.10);text-decoration:none}
.wjBundleCard .pic{background:var(--wj-cream)}
.wjBundleCard .pic img{width:100%;height:auto;display:block}
.wjBundleCard .body{padding:16px 18px 20px}
.wjBundleCard .n{font-size:16.5px;color:var(--wj-ink);line-height:1.6;font-weight:600}
.wjBundleCard .num{font-size:13px;color:#9a9a92;margin-top:4px;letter-spacing:.06em}
.wjBundleCard .pr{margin-top:10px}
.wjBundleCard .pr .productPrice{font-size:21px;color:var(--wj-gold-d);font-weight:700}

/* ---------- 信任背書 ---------- */
/* 最新優惠區的雲朵裝飾是 position:absolute; top:-383px，會往上壓到這一區，
   所以這裡必須自己拉一層 z-index，否則第一格文字會被雲朵蓋住。 */
.wjTrust{background:var(--wj-green-d);color:#fff;padding:58px 0 62px;position:relative;z-index:2}
.wjTrust .wjHead h2{color:#fff}
.wjTrust .wjHead .wjRule{background:var(--wj-gold)}
.wjTrustGrid{display:flex;flex-wrap:wrap;margin:0 -14px}
.wjTrustCell{width:25%;padding:0 14px;text-align:center}
.wjTrustCell img{width:66px;height:66px;object-fit:contain;margin:0 auto 14px;display:block}
.wjTrustCell .t{font-size:17px;font-weight:600;line-height:1.65;color:#fff}
.wjTrustCell .d{margin-top:8px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.76);text-wrap:pretty}

/* ---------- 品牌短文 ---------- */
.wjBrandShort{
  background:var(--wj-green);background-size:cover;background-position:center;
  color:#fff;padding:72px 0;text-align:center;position:relative;
}
.wjBrandShort .veil{position:absolute;inset:0;background:rgba(51,85,36,.72)}
.wjBrandShort .inner{position:relative}
.wjBrandShort p{
  font-size:23px;line-height:1.95;margin:0 auto 26px;max-width:34em;
  color:#fff;letter-spacing:.02em;text-wrap:balance;
}
.wjBrandShort .wjBtn{background:#fff;color:var(--wj-green-d)}
.wjBrandShort .wjBtn:hover{background:var(--wj-gold);color:#fff}

/* ---------- 加入會員 ---------- */
.wjMember{background:var(--wj-green-l);padding:56px 0;text-align:center;
  background-size:cover;background-position:center}
.wjMember h2{font-size:26px;font-weight:700;color:var(--wj-green-d);margin:0}
.wjMember p{margin:14px auto 24px;max-width:40em;color:var(--wj-mid);font-size:15.5px;line-height:1.95;text-wrap:balance}

/* ---------- 常見問題 ---------- */
.wjFaqList{max-width:820px;margin:0 auto;border-top:1px solid var(--wj-line)}
.wjFaqItem{border-bottom:1px solid var(--wj-line)}
.wjFaqQ{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:18px 40px 18px 4px;font-size:16.5px;color:var(--wj-ink);
  line-height:1.7;position:relative;
}
.wjFaqQ::after{
  content:"＋";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--wj-green);font-size:19px;
}
.wjFaqItem.open .wjFaqQ::after{content:"－"}
.wjFaqA{display:none;padding:0 4px 20px;color:var(--wj-mid);font-size:15px;line-height:2}
.wjFaqItem.open .wjFaqA{display:block}

/* ---------- 訂閱 / LINE ---------- */
.wjSubscribe{background:#fff;padding:52px 0;text-align:center;border-top:1px solid var(--wj-line)}
.wjSubscribe h2{font-size:24px;font-weight:700;color:var(--wj-green-d);margin:0}
.wjSubscribe p{margin:12px auto 22px;max-width:38em;color:var(--wj-mid);font-size:15.5px;line-height:1.95}

/* ---------- 熱銷商品：加一顆立即購買 ---------- */
.wjBuyRow{text-align:center;padding:0 8px 16px}
.wjBuyRow .wjBtn{padding:9px 22px;font-size:14px}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:991px){
  .wjSection{padding:48px 0}
  .wjSlogan h1{font-size:27px}
  .wjHead h2{font-size:25px}
  .wjLifeCell{width:50%}
  .wjBundleCell{width:50%}
  .wjTrustCell{width:50%;margin-bottom:26px}
  .wjBrandShort p{font-size:19px}
}
@media (max-width:575px){
  body.wjHasBar{--wj-bar-h:38px}
  .wjSection{padding:38px 0}
  .wjAnnounce{font-size:12.5px;padding:8px 12px}
  .wjSlogan{padding:38px 0 32px}
  .wjSlogan h1{font-size:22px;line-height:1.6}
  .wjSlogan p{font-size:14.5px}
  .wjHead h2{font-size:21px}
  .wjLifeCard{padding:16px 14px 20px}
  .wjLifeCard .t{font-size:18px}
  .wjLifeCard .d{font-size:13.5px;min-height:0}
  .wjTrustCell .t{font-size:15.5px}
  .wjBrandShort{padding:52px 0}
  .wjBrandShort p{font-size:17px}
  .wjFaqQ{font-size:15px}
}

/* ============================================================
   區塊互不干擾（2026-09-10）
   首頁區塊改成可由後台自由排序之後，區塊之間不能再互相溢出，
   否則順序一換，被壓到的對象就跟著變。

   原本的問題：最新優惠區塊裡的雲朵裝飾是
       .bg_cloud_top{ position:absolute; top:-383px }
   往上突出 383px 蓋住「前一個區塊」。前一區是誰，取決於排序。

   解法：每個區塊都變成自給自足的盒子 ——
     ・isolation:isolate 讓 z-index 只在自己區塊內生效
     ・overflow:hidden 讓任何裝飾都被裁在自己區塊內
     ・兩顆雲改成貼在自己區塊的下緣、壓在內容底下
   ============================================================ */
.wjSlogan,
.indesUnderBanner,
.indexVedio,
.indexNewProductContainer,
.wjSection,
.wjTrust,
.indexCloudCustomContainer,
.indexNewsContainer,
.wjBrandShort,
.wjMember,
.wjSubscribe,
.indexContactContainer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* 兩顆雲：改成留在自己區塊的下緣，並壓在內容底下 */
.indexNewsContainer .bg_cloud_top{
  top:auto; bottom:0; left:0; z-index:-1;
}
.indexNewsContainer .bg_cloud_bottom{
  top:auto; bottom:0; right:0; z-index:-1;
}
/* 熱銷商品上方那張裝飾圖同樣壓在內容底下，不會蓋到商品文字 */
.indexNewProductContainer .yellow_people{ z-index:-1; }

/* ============================================================
   最新優惠 / 健康教室 改版（2026-09-11 老闆選 B：主打一則 ＋ 三則並列）
   ============================================================
   改了什麼、為什麼：
   ① 兩朵黃色線條雲移除。它們是黃色線稿、跟品牌綠無關，在白底幾乎看不見，
      卻讓每個區塊在下方留了 140px 純空白（兩個區塊合計 280px）。
   ② 標題從圖片改成文字。原本 new_title_image / new2_title_image 是整張圖，
      後台改不了字、手機會糊、搜尋引擎也讀不到。
   ③ 卡片重做：真正的卡片（白底、細框、圓角），圖片統一 16:9 / 4:3，
      標題最多兩行、超出以 line-clamp 收，不再印出被截斷的內容摘要。
   ⚠️ 主題配色沒有動 —— 綠 #4F7F3B、深綠 #2F5124、金黃 #E3B23C 都是站上原本就在用的。
   ============================================================ */

/* 區塊外框：把原本為了擺雲而留的 140px 下內距收掉 */
.wjFeed{
  position:relative; isolation:isolate; overflow:hidden;
  padding:64px 0 56px;
}
.wjFeed--alt{ background:#F7F9F5; }   /* 兩個區塊相鄰時交錯底色，取代雲朵當分隔 */

/* 標題（文字版）*/
.wjFeedHead{ text-align:center; margin:0 0 30px; }
.wjFeedHead h2{
  margin:0; font-size:30px; font-weight:700; color:#2F5124; letter-spacing:2px;
  font-family:'微軟正黑體','Noto Sans TC',sans-serif;
}
.wjFeedHead .bar{ display:block; width:56px; height:3px; background:#E3B23C; margin:10px auto 0; }
.wjFeedHead p{ margin:10px 0 0; font-size:13px; letter-spacing:3px; color:#8b9184; }

/* 版型 B：左邊一張大的、右邊三則橫式並列
   ⚠️ 不要改回「3 欄 × 2 列、大卡跨兩列」的寫法 ——
      4 張卡放進 6 格會空掉右下角一格（實測 299×251 的洞），
      那正是這次要消滅的空白。改成「左右兩欄、右欄自己疊三張」就不會有洞。 */
.wjFeedGrid{ display:grid; grid-template-columns:1.45fr 1fr; gap:18px; align-items:stretch; }
/* 文章只有一篇時沒有右欄，這時整排給主打那張，不要空掉右半邊 */
.wjFeedGrid--solo{ grid-template-columns:1fr; }
.wjFeedGrid--solo .wjCard--lead .ph{ aspect-ratio:21/9; }
.wjFeedSide{ display:flex; flex-direction:column; gap:12px; }
.wjCard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #E3E7DE; border-radius:10px; overflow:hidden;
  text-decoration:none; box-shadow:0 1px 2px rgba(31,41,25,.04);
  transition:box-shadow .18s, transform .18s;
}
.wjCard:hover{ box-shadow:0 6px 18px rgba(31,41,25,.10); transform:translateY(-2px); text-decoration:none; }
.wjCard .ph{ display:block; overflow:hidden; background:#EFF2EC; aspect-ratio:16/9; }
.wjCard .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.wjCard .bd{ padding:13px 15px 16px; }
/* ⚠️ 一定要 align-self:flex-start —— .bd 是 flex column，
   inline-block 在裡面會被拉成整排寬，小標籤會變成一條色帶 */
.wjCard .tg{
  display:inline-block; align-self:flex-start;
  font-size:11px; letter-spacing:1px; color:#4F7F3B;
  background:#EDF3E9; border-radius:3px; padding:2px 8px; margin:0 0 8px;
}
.wjCard .tt{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:14.5px; font-weight:500; color:#23271F; line-height:1.65; margin:0;
}
/* 主打那一張：左欄整欄，圖片 4:3，標題放大 */
.wjCard--lead{ height:100%; }
.wjCard--lead .ph{ aspect-ratio:4/3; }
.wjCard--lead .bd{ padding:16px 19px 20px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.wjCard--lead .tt{ font-size:19px; -webkit-line-clamp:3; line-height:1.6; }
/* 右欄三張：橫式（小縮圖在左、標題在右），高度才跟左邊那張對得上 */
.wjCard--row{ flex-direction:row; flex:1; }
/* ⚠️ 縮圖用 4:3 不要用正方形 —— 優惠圖是資訊量大的直式海報，
   正方形裁切會把價格那一半切掉，客人看不出是什麼活動。 */
.wjCard--row .ph{ flex:0 0 148px; aspect-ratio:4/3; }
.wjCard--row .bd{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:12px 15px; }
.wjCard--row .tg{ margin-bottom:6px; align-self:flex-start; }

/* 看更多：卡片列下方置中的圓角按鈕
   （原本被推到區塊右下角，跟卡片沒有關係，也是造成右下空一塊的原因之一）*/
.wjFeedMore{ text-align:center; margin:26px 0 0; }
.wjFeedMore a{
  display:inline-block; padding:10px 32px; border:1px solid #4F7F3B; border-radius:999px;
  color:#4F7F3B; text-decoration:none; font-size:14.5px; background:#fff; line-height:1.5;
  transition:background .15s,color .15s;
}
.wjFeedMore a:hover{ background:#4F7F3B; color:#fff; text-decoration:none; }

@media (max-width:991px){
  .wjFeedGrid{ grid-template-columns:1fr; }
  /* 平板：整排一張 4:3 太高，收成 16:10 */
  .wjCard--lead .ph{ aspect-ratio:16/10; }
  .wjCard--lead .tt{ font-size:17px; }
}
@media (max-width:575px){
  .wjFeed{ padding:44px 0 40px; }
  .wjFeedHead h2{ font-size:24px; }
  .wjCard--row .ph{ flex:0 0 108px; }
  .wjCard--row .tt{ font-size:14px; }
  /* 手機：主打那張回到 4:3 —— 優惠海報本身就是內容，切太扁會看不到價格 */
  .wjCard--lead .ph{ aspect-ratio:4/3; }
}

/* ============================================================
   下半部：加入會員 ＋ 收到新訊息 併成左右兩欄（2026-09-11）
   ============================================================
   原本三條各佔一整排（306 + 258 + 245 = 809px），每條只裝一個標題、
   一句副標、一顆按鈕，其中 360px 是純內距。兩個都是「請客人留下來」的
   動作，併成一排之後約 460px。
   ⚠️ 只有兩個區塊都開啟時才會併排；只開一個時那一欄佔滿整排，
      版面不會塌掉（判斷寫在 index.php，不是靠 CSS 猜）。
   ============================================================ */
.wjCta{ display:grid; grid-template-columns:1fr 1fr; isolation:isolate; }
.wjCta--single{ grid-template-columns:1fr; }
.wjCta > div{
  padding:46px 30px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.wjCta .cta-member{ background:#EDF3E9; }
.wjCta .cta-line{ background:#F7F9F5; border-left:1px solid #E0E3DB; }
.wjCta--single .cta-line{ border-left:0; }
.wjCta h2{ margin:0 0 8px; font-size:23px; font-weight:700; color:#2F5124; }
.wjCta p{ margin:0 0 18px; font-size:14.5px; color:#5b7a4e; line-height:1.8; }
.wjCta .wjBtn{ margin:0; }
@media (max-width:767px){
  .wjCta{ grid-template-columns:1fr; }
  .wjCta .cta-line{ border-left:0; border-top:1px solid #E0E3DB; }
  .wjCta > div{ padding:34px 22px; }
}

/* 品牌短文：上下內距 72 → 48（內容只有一句話，不需要那麼高）*/
.wjBrandShort{ padding-top:48px; padding-bottom:48px; }

/* ============================================================
   版型二：四張等寬（2026-09-11）
   ============================================================
   後台每個卡片型區塊可以選 grid4（四張等寬）或 lead3（主打一則＋三則）。
   ⚠️ 用 auto-fit + minmax 而不是寫死 4 欄 —— 商品只有 2、3 個時
      不會留下空格子，也不必為每種數量寫一條規則。
      維濟目前只有 4 個上架商品，這點很實際。
   ============================================================ */
/* ⚠️ 不要把 minmax 的上限寫成固定值（例如 minmax(238px,288px)）——
   auto-fit 會用「上限」去算排得下幾欄，1110px 只放得下 3 張，第 4 張被擠到下一行。
   正確做法是欄寬用 1fr，再依「實際張數」限制整個格線的最大寬度並置中，
   張數由 PHP 帶 .wjFeedGrid--nN 進來（見 _cards.php）。 */
.wjFeedGrid--g4{
  grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));
  align-items:stretch;
}
.wjFeedGrid--n1{ max-width:288px; margin-left:auto; margin-right:auto; }
.wjFeedGrid--n2{ max-width:594px; margin-left:auto; margin-right:auto; }
.wjFeedGrid--n3{ max-width:900px; margin-left:auto; margin-right:auto; }
.wjFeedGrid--g4 .wjCard{ height:100%; }
.wjFeedGrid--g4 .wjCard .ph{ aspect-ratio:1/1; }   /* 商品圖是方的，文章圖裁成方的也還行 */
.wjFeedGrid--g4 .wjCard .bd{ flex:1; display:flex; flex-direction:column; }

/* ── 商品卡多出來的兩行：商品編號與價格 ──────────────────── */
.wjCard .pn{
  display:block; margin:7px 0 0; font-size:12px; color:#9aa1a8;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.wjCard .pr{ display:block; margin:8px 0 0; font-size:15px; color:#A8452C; font-weight:500; }
/* 站上既有的價格樣式（原價劃線／特價）沿用，這裡只收掉多餘的邊界 */
.wjCard .pr .productPrice,
.wjCard .pr .productPriceOrigin,
.wjCard .pr p{ margin:0; display:inline-block; }
.wjCard .pr .productPriceOrigin{ color:#9aa1a8; text-decoration:line-through; font-size:13px; margin-right:6px; }
/* 組合商品的小標 */
.wjCombo{
  font-style:normal; font-size:11px; color:#2F5124; background:#DCE9D2;
  border-radius:3px; padding:1px 6px; margin-right:4px; vertical-align:1px;
}
/* 主打卡與橫式卡裡的價格再大一點 / 小一點 */
.wjCard--lead .pr{ font-size:18px; }
.wjCard--row .pn{ margin-top:5px; }
.wjCard--row .pr{ font-size:14px; margin-top:5px; }

@media (max-width:575px){
  .wjFeedGrid--g4{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
  .wjCard .pn{ font-size:11px; }
  .wjCard .pr{ font-size:14px; }
}