@charset "utf-8";
/* ==========================================================================
   home.css — 首頁區塊（嚴格對照定稿效果圖 PSD 座標）
   ========================================================================== */

/* ---------- 1. Hero 首屏（807px · 兩屏自動輪播） ----------
   ① 品牌主打（原始定稿金調） ② 生產基地（江蘇廠區實景）
   ② 生產基地（江蘇廠區實景 + 暖黃蒙層）                                        */
.hero {
  position: relative;
  height: 807px;
  overflow: hidden;
  background: #F8ECD3;
}

.hero__viewport { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* 首屏不淡入（避免首屏文字閃一下），JS 初始化後才開啟切換過渡 */
}

.hero.is-anim .hero__slide {
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
}

.hero__slide.is-on { opacity: 1; visibility: visible; }

/* ① 品牌主打：背景圖自 PSD「圖片調色」層導出 */
.hero__slide--main {
  background: #F8ECD3 url("../img/hero-bg.jpg") center center / cover no-repeat;
}

/* ② 生產基地：廠區實景 + 暖金黃蒙層，文字改深色融入暖調 */
.hero__slide--plant {
  background: #F0DFB8 url("../img/hero-plant.jpg") center center / cover no-repeat;
}

/* 生產基地屏：不加蒙層，文字面板用白色磨砂玻璃保證可讀 */
.hero__slide--plant .hero__copy {
  max-width: 640px;
  background: rgba(197, 15, 27, .93);
  border: none;
  border-radius: 14px;
  padding: 34px 38px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -20px rgba(158, 10, 12, .5);
}

/* 首屏左右切換箭頭 */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  opacity: .78;
  transition: opacity .25s ease, background .25s ease, border-color .25s ease;
}

.hero__nav:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .85);
}

.hero__nav--prev { left: 26px; }
.hero__nav--next { right: 26px; }

.hero__nav svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* 生產基地屏（淺金）箭頭配色 */
.hero:has(.hero__slide--plant.is-on) .hero__nav {
  border-color: rgba(120, 95, 50, .4);
  background: rgba(255, 255, 255, .38);
  color: #3a3226;
}

.hero:has(.hero__slide--plant.is-on) .hero__nav:hover {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(120, 95, 50, .8);
}




.hero__in {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero__art { display: none; }


.hero__copy { max-width: 540px; }

.hero h1 {
  font-family: var(--serif);
  font-size: 76px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--red-deep);
}

.hero__sub {
  margin-top: 44px;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: #33363C;
}

.hero__btns {
  margin-top: 100px;
  display: flex;
  gap: 13px;
}

.hero__btns .btn { min-width: 133px; }

/* 屏內小標籤（第二、三屏用） */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .24em;
  color: var(--gold-lt);
}

.hero__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

.hero__eyebrow--red { color: var(--red); }

/* 第二屏紅底面板：文字全部反白 */
.hero__copy--light h1 { color: #fff; }

.hero__copy--light .hero__sub { color: rgba(255, 255, 255, .9); }

.hero__slide--plant .hero__eyebrow { color: rgba(255, 255, 255, .85); }

/* 紅底上按鈕重配：主按鈕白底紅字，次按鈕白色描邊透明底 */
.hero__slide--plant .btn--red {
  background: #fff;
  color: var(--red-dk);
}
.hero__slide--plant .btn--red:hover {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 24px -8px rgba(90, 8, 12, .45);
}

.hero__slide--plant .btn--ghost {
  border-color: rgba(255, 255, 255, .75);
  background: transparent;
  color: #fff;
}
.hero__slide--plant .btn--ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  transform: translateY(-2px);
}

.hero__slide--plant .hero__btns { margin-top: 34px; }

/* 深色屏工藝標籤 */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.hero__chips li {
  padding: 7px 15px;
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(227, 178, 104, .42);
  border-radius: 100px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(2px);
}

/* 第三屏：產品列 + 文字，按鈕間距收一點 */



@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 1b. 首屏指示器 ---------- */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}

.hero__dots button {
  position: relative;
  width: 46px;
  height: 2px;
  padding: 0;
  background: rgba(34, 37, 42, .22);
  overflow: hidden;
  transition: background .4s var(--ease);
}

.hero__dots button.is-on { background: rgba(34, 37, 42, .28); }

.hero__dots button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__dots button.is-on::after { transform: scaleX(1); transition: transform 6s linear; }

.hero__dots b {
  position: absolute;
  left: 0;
  top: -20px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  color: rgba(34, 37, 42, .45);
  transition: color .4s var(--ease);
}

.hero__dots button.is-on b { color: var(--red); }

/* 不依賴 JS 的兜底：用 :has() 判斷當前屏是否為深色 */
.hero:has(.hero__slide--plant.is-on) .hero__dots button { background: rgba(255, 255, 255, .28); }
.hero:has(.hero__slide--plant.is-on) .hero__dots b { color: rgba(255, 255, 255, .5); }
.hero:has(.hero__slide--plant.is-on) .hero__dots button.is-on b { color: var(--gold-lt); }
.hero:has(.hero__slide--plant.is-on) .hero__dots button.is-on::after { background: var(--gold-lt); }


/* 金色 / 白描邊按鈕（深色屏專用） */
.btn--gold {
  background: var(--gold);
  color: #221703;
  border-color: var(--gold);
}

.btn--gold:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(215, 153, 68, .6);
}

.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  transform: translateY(-2px);
}

/* ---------- 2. 公司介紹 + 全球佈局 ---------- */
.about { padding: 89px 0 99px; background: #fff; }

.about__grid {
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 62px;
  align-items: start;
}

/* 圖片輪播 */
.about__media {
  position: relative;
  height: 496px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 44px -18px rgba(48, 34, 14, .28);
  background: #EEE9E1;
}

.about__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}

.about__slide.is-on { opacity: 1; visibility: visible; }

.about__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 7s linear;
}

.about__slide.is-on img { transform: scale(1.09); }

.about__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.about__dots button {
  width: 29px;
  height: 4px;
  background: rgba(255, 255, 255, .55);
  transition: background .3s var(--ease);
}

.about__dots button.is-on { background: var(--red); }

/* 文字 */
.about__copy { padding-top: 30px; }

.about__copy .sec-head__title { margin-top: 20px; }

/* 標題為公司全名，字距收緊以確保單行 */
.about__title { letter-spacing: -.01em; }

.about__text {
  margin-top: 38px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.78;
  letter-spacing: 0;
  color: #3F4247;
  text-align: left;
}

.about__copy .tlink { margin-top: 44px; }

/* 全球佈局 4 卡 */
.city { margin-top: 51px; }

.city__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}

.city__card {
  position: relative;
  height: 108px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: #B7131D;
  box-shadow: 0 8px 20px -12px rgba(150, 10, 20, .6);
}

.city__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  opacity: .9;
  z-index: -2;
  transition: transform .8s var(--ease), opacity .5s;
}

.city__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(222, 52, 58, .58), rgba(198, 22, 34, .72));
  z-index: -1;
}

.city__card span {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(120, 0, 8, .45);
}

.city__card:hover img { transform: scale(1.08); opacity: .72; }

/* ---------- 3. 熱銷產品 ---------- */
.best {
  /* 底圖 = 图层115（米色 + 底部波浪，卡片处镂空）＋ PSD 裡 3% 攝影圖 */
  background: #FCF7F1 url("../img/bg-best.jpg") center bottom / 100% 100% no-repeat;
  padding: 89px 0 124px;
}

.best__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #F1ECE3;
  border-radius: 6px;
  overflow: hidden;
  /* 供整卡點擊的覆蓋層定位用 */
  position: relative;
  cursor: pointer;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}

.pcard:hover,
.pcard:focus-within {
  box-shadow: 0 22px 44px -20px rgba(48, 34, 14, .26);
  transform: translateY(-4px);
  border-color: rgba(220, 18, 32, .18);
}

.pcard__media {
  position: relative;
  height: 483px;
  display: grid;
  place-items: center;
  /* 頂部留出角標帶：新品標籤貼角，商品圖從標籤下方開始，互不遮擋 */
  padding: 56px 14px 0;
}

/* 用固定圖框 + object-fit: contain 控制，豎長圖也不會溢出圖框把文字區擠掉 */
.pcard__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform .6s var(--ease);
}

.pcard:hover .pcard__media img { transform: scale(1.045); }

.pcard__badge {
  position: absolute;
  left: 15px;
  top: 14px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  background: var(--red);
}

.pcard__badge--new { background: #C8873C; }
.pcard__badge svg { width: 13px; height: 13px; }

.pcard__body {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pcard__series {
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--red);
}

.pcard__name {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.pcard__name a:hover { color: var(--red); }

/* 整卡可点：把商品名链接的伪元素拉伸铺满卡片。
   比给 article 套一层 <a> 更稳——不会因块级链接包住块级元素而产生
   语义与光标问题，也保住文字仍可正常选中。
   层次：覆盖层 z-index:1，购物车按钮 z-index:2 压在它上面，
   因此点按钮不会误触跳转 */
.pcard__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pcard__price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
}

.pcard__price .cur {
  font-size: 15px;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .02em;
}

.pcard__price .num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}

.pcard__price .from {
  font-size: 14px;
  color: var(--text-2);
  margin-left: 2px;
}

.pcard__cart {
  margin-top: auto;
  height: 47px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  letter-spacing: .12em;
  border-radius: 2px;
  /* 压在整卡覆盖层之上，保证按钮自身可点 */
  position: relative;
  z-index: 2;
  transition: background .3s var(--ease);
}

.pcard__body .pcard__price + .pcard__cart { margin-top: 20px; }

/* 滑過整張卡時，按鈕一併轉深色——讓「可點」的信號集中在動作按鈕上，
   不必等指標真的移到按鈕上才回饋 */
.pcard:hover .pcard__cart,
.pcard:focus-within .pcard__cart,
.pcard__cart:hover { background: var(--red-dk); }

/* ---------- 4. 個性化選購（7 卡橫向滑動） ---------- */
.cats { padding: 94px 0 0; background: #fff; }

.cats__viewport { overflow: hidden; }

.cats__track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.cats__track::-webkit-scrollbar { display: none; }

.ccard {
  flex: 0 0 calc((100% - 78px) / 4);
  /* 比例對齊參考圖：卡寬 350 / 卡高 528 */
  aspect-ratio: 350 / 528;
  padding: 27px 27px 30px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #EAEAEA;
  scroll-snap-align: start;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  cursor: pointer;
}

.ccard__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F2EEE7;
}

.ccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.ccard:hover .ccard__media img { transform: scale(1.05); }

.ccard__num {
  margin: 25px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .1em;
  color: #A2A2A2;
}

.ccard__num em {
  font-style: normal;
  color: var(--ink-2);
}

.ccard__title {
  margin: 23px 0 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--red);
  line-height: 1.35;
}

.ccard__desc {
  margin: 19px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: #989898;
}

.ccard__link {
  margin: 26px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .08em;
  color: #333333;
  width: max-content;
}

.ccard__link svg { width: 13px; height: 13px; color: var(--red); }

/* 佔位卡（圖片待補）：不顯示 hover 高亮，圖框用虛線提示待補 */
.ccard--empty { cursor: default; }
.ccard--empty .ccard__media {
  background: #FAF8F4;
  border: 1px dashed #E2DCD2;
}
.ccard--empty .ccard__link { visibility: hidden; }

/* 選中（紅底） */
.ccard.is-on {
  background: var(--red);
  border-color: var(--red);
}

.ccard.is-on .ccard__num { color: rgba(255, 255, 255, .55); }
.ccard.is-on .ccard__num em { color: rgba(255, 255, 255, .88); }
.ccard.is-on .ccard__title,
.ccard.is-on .ccard__desc,
.ccard.is-on .ccard__link { color: #fff; }
.ccard.is-on .ccard__link svg { color: #fff; }

/* 進度條 + 箭頭 */
.cats__foot {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}

.cats__bar {
  position: relative;
  flex: 1;
  height: 3px;
  background: #EFECE7;
  overflow: hidden;
}

.cats__bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 25%;
  background: var(--red);
  transition: width .15s linear, transform .15s linear;
}

.cats__nav { display: flex; gap: 10px; }

.cats__nav button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all .3s var(--ease);
}

.cats__nav button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.cats__nav button:disabled { opacity: .35; cursor: default; }
.cats__nav button:disabled:hover { background: none; border-color: var(--line); color: var(--ink-2); }
.cats__nav svg { width: 13px; height: 13px; }

/* ---------- 5. 重點推薦 ---------- */
.selection { padding-top: 108px; background: #fff; }

.selection__band {
  /* 背景 = 图层22 米色底 + PSD 裡 4% multiply 攝影圖（依原混合參數合成） */
  background: #F3EEE8 url("../img/bg-selection.jpg") center center / cover no-repeat;
  padding: 109px 0 117px;
}

.rec__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.rcard {
  position: relative;
  height: 302px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 57px;
  color: #333;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 18px 44px -26px rgba(62, 44, 18, .26), 0 2px 8px rgba(62, 44, 18, .05);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}

.rcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -30px rgba(62, 44, 18, .34), 0 2px 8px rgba(62, 44, 18, .05);
}

/* 舊版金 / 紅底修飾類已停用，統一回白卡 */
.rcard--gold,
.rcard--red { background: #fff; }

/* 右側產品托盤：白卡上隱形，僅保留定位 */
.rcard__plate {
  position: absolute;
  right: 41px;
  top: 41px;
  width: 227px;
  height: 227px;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
}

.rcard__plate img {
  max-width: 216px;
  max-height: 207px;
  width: auto;
  object-fit: contain;
  transition: transform .6s var(--ease);
}

.rcard:hover .rcard__plate img { transform: scale(1.05); }

.rcard__title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--red);
}

.rcard__desc {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #333;
  max-width: 300px;
}

.rcard .tlink {
  margin-top: 26px;
  color: var(--red);
  width: max-content;
}

.rcard .tlink::after { opacity: .85; }

/* ---------- 6. 公司新聞 · 行業資訊 ---------- */
.news { padding: 90px 0 85px; background: #fff; }

.news__grid {
  display: grid;
  grid-template-columns: 1.09fr 1fr .94fr;
  gap: 16px;
  /* 拉伸對齊：卡片陰影框與行業動態面板同高、上下齊平 */
  align-items: stretch;
}

.ncard {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 內留白：圖片不頂邊，文字左右有留白 */
  padding: 22px 22px 24px;
  background: #fff;
  border-radius: 4px;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}

/* 靠近（hover）時浮起並帶陰影 */
.ncard:hover {
  box-shadow: 0 22px 44px -20px rgba(48, 34, 14, .26);
  transform: translateY(-2px);
}

.ncard__media {
  height: 289px;
  border-radius: 4px;
  overflow: hidden;
  background: #F2EEE7;
  flex-shrink: 0;
}

.ncard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.ncard:hover .ncard__media img { transform: scale(1.04); }

.ncard__date {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--text-3);
}

.ncard__title {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .02em;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}

/* 靠近整張卡片即變紅，不必精準移到文字上 */
.ncard:hover .ncard__title { color: var(--red); }
.ncard__title a:hover { color: var(--red); }

.ncard__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
  text-align: justify;
  /* 撐滿剩餘高度，讓卡片底部與面板齊平 */
  flex: 1 1 auto;
}

/* 行業動態面板 */
.npanel {
  /* 高度交給 grid stretch 統一，與左側新聞卡上下齊平 */
  min-height: 478px;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 4px;
  box-shadow: 0 14px 40px -22px rgba(48, 34, 14, .3);
  padding: 30px 30px 8px;
  display: flex;
  flex-direction: column;
}

.npanel__tag {
  display: inline-grid;
  place-items: center;
  width: max-content;
  height: 40px;
  padding: 0 22px;
  border-radius: 20px;
  background: #1B1B1B;
  color: #fff;
  font-size: 14px;
  letter-spacing: .14em;
}

.npanel ul { margin-top: 20px; flex: 1; overflow: hidden; }

.npanel li {
  padding: 14px 0;
  border-bottom: 1px solid #EFEFEF;
}

.npanel li:last-child { border-bottom: 0; }

.npanel time {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--text-3);
  margin-bottom: 8px;
}

.npanel h4 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}

/* 靠近單條動態即變紅 */
.npanel li:hover h4 { color: var(--red); }
.npanel a:hover h4 { color: var(--red); }

/* ---------- 7. 響應式 ---------- */
@media (max-width: 1500px) {
  .hero h1 { font-size: 68px; }
  .hero { height: 720px; }
    .about__grid { grid-template-columns: 590px 1fr; gap: 46px; }
  .about__media { height: 420px; }
  .pcard__media { height: 420px; }
  .ccard { padding: 22px 22px 26px; }
  .ccard__title { font-size: 21px; }
  .ccard__desc { font-size: 14px; }
  .rcard { padding: 0 44px; }
  .rcard__title { font-size: 32px; }
  .rcard__plate { width: 190px; height: 190px; right: 34px; }
  .rcard__plate img { max-width: 174px; max-height: 172px; }
  .npanel { min-height: 440px; }
  .ncard__media { height: 250px; }
}

@media (max-width: 1240px) {
  .hero { height: 640px; }
  .hero__slide--main { background-position: 62% center; }
    
  .hero h1 { font-size: 58px; }
  .hero__sub { font-size: 16px; margin-top: 30px; }
  .hero__btns { margin-top: 64px; }
  .about__grid { grid-template-columns: 480px 1fr; gap: 34px; }
  .about__media { height: 360px; }
  .about__text { font-size: 15px; line-height: 1.85; margin-top: 26px; }
  .best__grid { gap: 24px 18px; }
  .pcard__media { height: 360px; padding: 30px 12px 0; }
  .pcard__name { font-size: 21px; }
  .ccard { flex-basis: calc((100% - 52px) / 3); padding: 20px 20px 24px; }
  .ccard__num { font-size: 14px; }
  .ccard__title { font-size: 20px; }
  .rcard { height: 270px; padding: 0 34px; }
  .rcard__title { font-size: 27px; }
  .rcard__desc { font-size: 15px; margin-top: 10px; }
  .rcard__plate { width: 158px; height: 158px; right: 26px; top: 34px; }
  .rcard__plate img { max-width: 144px; max-height: 140px; }
  .news__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .npanel { grid-column: 1 / -1; height: auto; }
  .npanel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
}

@media (max-width: 1024px) {
  .hero { height: 560px; }
  .hero__slide--main { background-position: 68% center; }
    
  .hero__chips { margin-top: 22px; }
  .hero h1 { font-size: 46px; }
  .hero__sub { font-size: 15px; max-width: 380px; }
  .about__grid { grid-template-columns: 1fr; gap: 30px; }
  .about__media { height: 380px; }
  .about__copy { padding-top: 0; }
  .city__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .best__grid { grid-template-columns: 1fr 1fr; }
  .ccard { flex-basis: calc((100% - 26px) / 2); }
  .rec__grid { grid-template-columns: 1fr; gap: 16px; }
  .rcard { height: 230px; }
  .news__grid { grid-template-columns: 1fr; gap: 30px; }
  .npanel ul { grid-template-columns: 1fr; }
  .ncard__media { height: 240px; }
}

@media (max-width: 720px) {
  /* 手機端：輪播改為逐屏顯示（高度隨內容），第①屏文字在上、產品圖在下 */
  .hero { height: auto; }
  .hero__viewport { position: static; }
  .hero__slide { position: relative; inset: auto; display: none; }
  .hero__slide.is-on { display: block; }
  .hero.is-anim .hero__slide.is-on { animation: heroFade .6s var(--ease); }
  /* 第①③屏改 flex 縱排：文字在上、圖在下（需高於上面的 display:block） */
  .hero__slide--main.is-on,
  

  /* 只在啟用時才 flex（否則會蓋掉上面的 display:none，三屏疊在一起） */
  .hero__slide--main,
      .hero__in { order: 1; display: block; height: auto; }
  .hero__art {
    order: 2;
    display: block;
    position: static;
    width: 78%;
    max-width: 300px;
    height: auto;
    margin: 18px auto 0;
    filter: drop-shadow(0 16px 24px rgba(120, 82, 20, .2));
  }

  .hero__art img { display: block; width: 100%; height: auto; }

  /* ② 生產基地 */
  .hero__slide--plant { padding: 44px 0 54px; background-position: 72% center; }
  .hero__slide--plant .hero__copy { padding: 24px 22px; border-radius: 12px; }
  .hero__chips { display: none; }
  .hero__eyebrow { margin-bottom: 16px; font-size: 14px; letter-spacing: .18em; }

    

  .hero__dots { bottom: 14px; gap: 8px; }
  .hero__dots button { width: 30px; }
  .hero__dots b { display: none; }
  .hero__nav { width: 38px; height: 38px; opacity: .92; }
  .hero__nav svg { width: 17px; height: 17px; }
  .hero__nav--prev { left: 10px; }
  .hero__nav--next { right: 10px; }

  .hero h1 { font-size: 34px; letter-spacing: .02em; line-height: 1.15; }
  .hero__sub { margin-top: 18px; font-size: 14px; line-height: 1.75; max-width: 100%; }
  .hero__sub br { display: none; }
  .hero__btns { margin-top: 24px; gap: 10px; }
  .hero__btns .btn { min-width: 108px; height: 44px; }
  .about { padding: 46px 0 54px; }
  .about__media { height: 240px; }
  .about__text { font-size: 14px; line-height: 1.9; margin-top: 20px; }
  .about__copy .tlink { margin-top: 26px; }
  .city { margin-top: 30px; }
  .city__card { height: 84px; }
  .city__card span { font-size: 14px; letter-spacing: .08em; }
  .best { padding: 46px 0 54px; }
  .best__grid { grid-template-columns: 1fr; gap: 16px; }
  .pcard__media { height: 320px; padding: 20px 12px 0; }
  .pcard__name { font-size: 20px; }
  .cats { padding: 46px 0 0; }
  .ccard { flex-basis: 76%; height: auto; padding: 18px 18px 22px; }
  .ccard__num { margin-top: 18px; font-size: 14px; }
  .ccard__title { margin-top: 16px; font-size: 19px; }
  .ccard__desc { margin-top: 14px; font-size: 14px; }
  .ccard__link { margin-top: 22px; }
  .cats__foot { margin-top: 20px; gap: 14px; }
  .cats__nav button { width: 32px; height: 32px; }
  .selection { padding-top: 50px; }
  .selection__band { padding: 46px 0 54px; }
  .rcard { height: auto; padding: 26px 22px; }
  .rcard__title { font-size: 24px; }
  .rcard__desc { font-size: 14px; max-width: 60%; }
  .rcard__plate { width: 110px; height: 110px; right: 18px; top: 24px; }
  .rcard__plate img { max-width: 100px; max-height: 96px; }
  .rcard .tlink { margin-top: 18px; }
  .news { padding: 46px 0 54px; }
  .ncard__media { height: 200px; }
  .ncard__title { font-size: 19px; }
  .npanel { padding: 20px 18px 4px; }
  .npanel h4 { font-size: 15px; }
}