@charset "utf-8";
/* ==========================================================================
   inner.css — 內頁（頁首 banner · 麵包屑 · 內容版式 · 商城 · 詳情 · 文章 · 聯繫）
   與首頁共用 base.css 的變數與公共組件
   ========================================================================== */

/* ---------- 1. 內頁頁首 ---------- */
.phero {
  position: relative;
  height: 300px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 50% -20%, #FFFDF7 0%, #FBF1DC 42%, #F2E2C4 100%);
}

/* 金色細紋理 */
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 82%, rgba(215, 153, 68, .16), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(220, 18, 32, .07), transparent 34%);
}

/* 巨大幽靈字 */
.phero__ghost {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-family: var(--serif);
  font-size: 190px;
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(160, 120, 60, .07);
  white-space: nowrap;
  user-select: none;
}

.phero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .22em;
  color: var(--red);
  margin-bottom: 18px;
}

.phero__eyebrow i { display: block; width: 30px; height: 2px; background: var(--red); }

.phero__title {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-2);
  line-height: 1.15;
}

.phero__sub {
  margin-top: 16px;
  font-size: 15px;
  color: var(--text-2);
  letter-spacing: .04em;
}

/* ---------- 2. 麵包屑 ---------- */
.crumb {
  border-bottom: 1px solid var(--line-2);
  background: #fff;
}

.crumb__in {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-3);
  letter-spacing: .04em;
}

.crumb a { color: var(--text-2); }
.crumb a:hover { color: var(--red); }
.crumb span { color: var(--ink-2); }
.crumb i { font-style: normal; color: var(--line); }

/* ---------- 3. 通用內容版式 ---------- */
.psec { padding: 84px 0; }
.psec--cream { background: var(--cream); }

/* 發展歷程：城市天際線作極淡底圖
   用獨立偽元素承載圖片並壓到 5% 透明度，
   而不是把 opacity 下在整個 section 上——否則文字、年份也會一起變淡 */
.psec--history {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.psec--history::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 圖片比例(1.5)與容器(1.43)接近，cover 時垂直剛好鋪滿、只在橫向裁切，
     能保住整片城市天際線的寬度；放大會裁掉兩側建築只剩一座塔，故用 cover */
  background: url("../img/history-bg.jpg") center / cover no-repeat;
  opacity: .03;
  /* 與米色底做一次疊色，讓藍調不至於發灰 */
  mix-blend-mode: multiply;
  pointer-events: none;
}
.psec--tight { padding: 64px 0; }

.plead {
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--ink-2);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.plead em { font-style: normal; color: var(--red); }

.pbody {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 2.05;
  color: #5A5D63;
  text-align: left;
}

.pbody p + p { margin-top: 20px; }

/* 官網條目列表：序號由 CSS 生成，行距緊湊 */
.pbody ul.pd-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  counter-reset: pd;
}

.pbody ul.pd-list li {
  counter-increment: pd;
  position: relative;
  padding-left: 30px;
  line-height: 1.9;
}

.pbody ul.pd-list li::before {
  content: counter(pd);
  position: absolute;
  left: 0;
  top: .12em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* 圖文兩欄 */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.split--rev .split__media { order: 2; }

/* 集團簡介：左圖右文，右欄鎖定與圖片同高（480px），
   正文超出時在框內上下滑動，不讓文字拖長破壞左右平衡 */
.split--sticky { align-items: start; }

.split__copy--fit {
  height: 480px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.split__scroll {
  margin-top: 26px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 只讓框內滾動，滾到底不會帶動整頁 */
  overscroll-behavior: contain;
  padding-right: 16px;
  scrollbar-width: thin;
  scrollbar-color: #D6D0C6 transparent;
}

/* 細滾動條，與站內米色系統一 */
.split__scroll::-webkit-scrollbar { width: 4px; }
.split__scroll::-webkit-scrollbar-track { background: transparent; }

.split__scroll::-webkit-scrollbar-thumb {
  background: #D6D0C6;
  border-radius: 4px;
}

.split__scroll::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* 還有內容可滾時，底部用 mask 淡出，避免文字被硬切一刀
   （用 mask 而非覆蓋白色圖層，底色變化時不會露出白塊） */
.split__scroll.is-more {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
}

/* 正文首段不需要額外上邊距（容器已有 margin-top） */
.split__scroll .pbody > p:first-child { margin-top: 0; }

.split__scroll .mlist { margin-top: 24px; }

/* 滑動提示：滑到底後由 JS 淡出 */
.split__hint {
  flex: 0 0 auto;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-3);
  transition: opacity .4s var(--ease);
}

.split__hint svg { width: 13px; height: 13px; animation: hintBob 1.8s var(--ease) infinite; }

.split__hint.is-hide { opacity: 0; }

@keyframes hintBob {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

.split__media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #EEE9E1;
}

.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.split__media--h420 { height: 420px; }
.split__media--h480 { height: 480px; }

.split__copy .sec-head__eyebrow { margin-bottom: 0; }

.split__title {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
  line-height: 1.25;
}

.split__copy .pbody { margin-top: 26px; }

/* 小徽章列表 */
.mlist { margin-top: 30px; display: grid; gap: 14px; }

.mlist li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
}

.mlist svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 6px; color: var(--red); }

/* ---------- 4. 數據條 ---------- */
.stats {
  display: grid;
  /* 五項：成立年份 / 註冊資金 / 專利 / 標準 / 批文。
     多出一列後每格變窄，故間距由 30 收到 22，
     字號由 52 收到 46，讓「74,000 + 萬元」不致擠壓或換行 */
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  padding: 54px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats__item { text-align: center; }

.stats__num {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  letter-spacing: .02em;
}

/* 單位字（年／項／萬呎／國）跟著數字走，但略輕一檔，避免與數字搶視覺 */
.stats__num small { font-size: 18px; margin-left: 4px; font-weight: 500; }

/* 數字滾動計數：ghost 保留最終寬度（避免 0→151 時字元變多造成抖動），
   live 疊在同一格做視覺動畫。
   ghost 用 opacity:0 而非 visibility:hidden —— 後者會讓讀屏讀不到真實數字 */
.stats__num .num {
  display: inline-grid;
  vertical-align: baseline;
}

.stats__num .num > * {
  grid-area: 1 / 1;
}

.stats__num .num__ghost { opacity: 0; }

.stats__label {
  margin-top: 14px;
  font-size: 14px;
  /* 原 --text-2(#8A8D93) 對比僅 3.55:1，偏淺且未達 AA；改 --text(#55585E) 為 7.1:1 */
  color: var(--text);
  letter-spacing: .1em;
}

/* ---------- 5. 歷程時間軸 ---------- */
.timeline {
  position: relative;
  margin-top: 56px;
  padding-left: 0;
  display: grid;
  gap: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: translateX(-.5px);
}

.titem {
  display: grid;
  /* 中欄由 120px 收到 104px：卡片加高後左右內距變寬，
     不讓內容區變窄導致說明文字多折一行 */
  grid-template-columns: 1fr 104px 1fr;
  gap: 0;
  /* 年份與卡片垂直居中對齊（原本 start 會讓年份頂在卡片上方） */
  align-items: center;
  /* 卡片自帶 20px 上下內距，這裡收到 4px，維持行間節奏不因加高而鬆散 */
  padding: 4px 0;
}

.titem__year {
  grid-column: 2;
  /* 必須鎖定第 1 行：偶數項的卡片在第 1 欄，若不指定，
     瀏覽器按「行優先」填充會把卡片擠到第 2 行，導致年份與卡片無法居中對齊 */
  grid-row: 1;
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  transition: color .35s var(--ease);
}

.titem__card {
  grid-column: 3;
  grid-row: 1;
  /* 內距常駐：hover 只換底色與陰影，文字位置不變、不會跳動 */
  padding: 20px 24px;
  /* 10px 外距 + 24px 內距 = 原本 30px 的起始留白 */
  margin-left: 10px;
  border-radius: 4px;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
  /* 內容在框內垂直居中：標題與說明上下留白相等 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 統一最小高度，各年卡片視覺高度一致，時間軸更整齊 */
  min-height: 132px;
}

.titem:nth-child(even) .titem__card {
  grid-column: 1;
  margin-left: 0;
  margin-right: 10px;
  text-align: right;
}

/* 滑過某一年份（含卡片本身）→ 該年卡片浮出白底＋陰影，標題轉品牌紅
   陰影沿用首頁新聞卡片同款；米色底上比白底更顯眼，故 alpha 略降
   限定支援 hover 的裝置：觸屏點一下不會留下「卡住的高亮」 */
@media (hover: hover) {
  .titem:hover .titem__card {
    background: #fff;
    box-shadow: 0 22px 44px -20px rgba(48, 34, 14, .16);
  }

  .titem:hover .titem__card h4 { color: var(--red); }
}

.titem__card h4 {
  font-family: var(--serif);
  font-size: 20px;
  /* 全局 h1–h5 重置為 400，此處需單獨加粗，與站內其他小標題同級 */
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
  margin-bottom: 8px;
}

/* 說明文字原本用 --text-2(#8A8D93) 對比僅 3.55:1，偏淺；改 --text(#55585E) 為 7.1:1 */
.titem__card p { font-size: 14px; line-height: 1.85; color: var(--text); }

/* ---------- 6. 特色卡（三/四欄） ---------- */
.fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 三張卡片文字量差異大（官網原文長短不一），
     讓同列卡片等高，否則底邊參差、區塊收不齊 */
  align-items: stretch;
  gap: 24px;
}

.fgrid--4 { grid-template-columns: repeat(4, 1fr); }

.fcard {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 34px 30px;
  transition: all .4s var(--ease);
}

.fcard:hover {
  /* 標題已為紅色，hover 不再靠變色回饋，改以描邊轉紅 + 上浮 */
  border-color: rgba(220, 18, 32, .28);
  box-shadow: 0 22px 50px -26px rgba(48, 34, 14, .28);
  transform: translateY(-4px);
}

.fcard__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(220, 18, 32, .07);
  color: var(--red);
  margin-bottom: 20px;
}

.fcard__icon svg { width: 22px; height: 22px; }

.fcard h3 {
  font-family: var(--serif);
  font-size: 21px;
  /* 全局 h1–h5 重置為 400，此處需單獨加粗，否則標題與正文同粗細、層級出不來 */
  font-weight: 700;
  /* 標題取品牌紅，與上方圖說、四精神卡同一語彙；
     圖示本身已是紅色，標題跟上後整組更一致 */
  color: var(--red);
  letter-spacing: .02em;
  margin-bottom: 10px;
}

/* 說明文字原用 --text-2(#8A8D93)，在白底上對比僅 3.33:1，低於 AA 4.5，肉眼偏虛；
   改用 --text(#55585E) 為 7.1:1，仍比標題淺一階，層次保留而可讀性足夠 */
.fcard p { font-size: 14px; line-height: 1.85; color: var(--text); }

/* ---------- 7. 商城 ---------- */
.filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter__tabs { display: flex; flex-wrap: wrap; gap: 10px; }

.filter__tabs button {
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text);
  border: 1px solid var(--line);
  background: #fff;
  transition: all .3s var(--ease);
}

.filter__tabs button:hover { border-color: var(--red); color: var(--red); }

.filter__tabs button.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.filter__count { font-size: 14px; color: var(--text-3); letter-spacing: .04em; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
}

/* 卡片本身沿用首頁 .pcard 原樣（圖框 483px、contain 等比、名稱 24px），
   不再做任何覆寫，商城與首頁展示完全一致 */

.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}

.pager a,
.pager span {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
  transition: all .3s var(--ease);
}

.pager .is-on,
.pager a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- 8. 產品詳情 ---------- */
.pd {
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 56px;
  align-items: start;
}

/* 畫廊：縮圖正方形直列靠左，大圖在右；右欄文字相應收窄 */
.pd__gallery {
  position: sticky;
  top: 110px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pd__thumbs {
  order: -1;
  flex: 0 0 100px;
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.pd__thumbs button {
  aspect-ratio: 1 / 1;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: #fff;
  padding: 8px;
  transition: border-color .3s var(--ease);
}

.pd__main {
  flex: 1;
  min-width: 0;
  height: 560px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  display: grid;
  place-items: center;
  padding: 40px;
}

.pd__main img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pd__thumbs button.is-on,
.pd__thumbs button:hover { border-color: var(--red); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: contain; }

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

.pd__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
  line-height: 1.25;
}

.pd__meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pd__meta span {
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--bronze-dk);
  border: 1px solid #E6D8BF;
  background: #FDF9F1;
  padding: 5px 12px;
  border-radius: 2px;
}

.pd__price {
  margin-top: 26px;
  padding: 22px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pd__price .cur { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.pd__price .num { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--red); line-height: 1; }
.pd__price .from { font-size: 14px; color: var(--text-2); }

/* 描述與規格之間加一條貫穿右欄的虛線，區塊之間呼吸感更足 */
.pd__desc {
  margin-top: 24px;
  padding-bottom: 26px;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  line-height: 2;
  color: var(--text);
}

.pd__spec { margin-top: 30px; display: grid; gap: 0; }

.pd__spec div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.pd__spec dt { color: var(--text-3); letter-spacing: .06em; }
.pd__spec dd { margin: 0; color: var(--ink-2); }

/* 選購區壓到右欄底部視覺重心，與規格拉開距離 */
.pd__buy {
  margin-top: 48px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  height: 56px;
}

.qty button { width: 46px; height: 100%; font-size: 18px; color: var(--text-2); }
.qty input {
  width: 52px;
  height: 100%;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 15px;
  padding: 0;
}

.pd__buy .btn { height: 56px; padding: 0 44px; }

/* ---------- 同系列推薦：小卡橫向滾動軌道 ----------
   一屏 5 張小卡，隱藏滾動條，靠左右箭頭或滑鼠拖曳滾動 */
.relrail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 上下留出懸浮空間（軌道 overflow 會連豎向一起裁，
     用 padding 給上浮的卡和陰影留位，再用負 margin 抵消視覺空隙） */
  padding: 12px 0 30px;
  margin: -12px 0 -30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.relrail .pcard {
  flex: 0 0 calc((100% - 80px) / 5);
  scroll-snap-align: start;
}

/* 雙保險：軌道卡片不受全局淡入動畫影響，名稱常駐可見 */
.relrail .pcard.reveal { opacity: 1; transform: none; }

/* 小卡整體收緊：圖框加高、底部留出空隙；
   圖片改 auto + max 約束（flex 居中），等比縮小完整顯示、絕不裁切 */
.relrail .pcard__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  padding: 40px 12px 12px;
  overflow: hidden;
}
.relrail .pcard__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 新品角標縮小並貼角，頂部留白帶確保圖片從角標下方開始 */
.relrail .pcard__badge {
  top: 10px;
  left: 10px;
  height: 22px;
  font-size: 11px;
  padding: 0 7px;
}
.relrail .pcard__series { display: block; font-size: 12.5px; }
.relrail .pcard__body { padding: 0 16px 18px; }
.relrail .pcard__name {
  display: block;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relrail .pcard__name a { color: inherit; }
.relrail .pcard__cart { position: relative; z-index: 2; height: 38px; font-size: 14px; }
.relrail .pcard__price { margin-top: 8px; }
.relrail .pcard__price .num { font-size: 18px; }

/* 標題行右側的工具組：全部產品連結 + 前後箭頭 */
.sec-head__tools { display: flex; align-items: center; gap: 12px; }

.railbtn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

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

/* 加入購物車動效：按鈕成功態 + 小紅點飛向頂欄購物車 + 購物車彈跳 */
.pd__buy .btn.is-added {
  background: var(--red-dk);
  box-shadow: 0 10px 24px -8px rgba(220, 18, 32, .55);
}

.cart-fly {
  position: fixed;
  z-index: 999;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 4px 10px rgba(220, 18, 32, .45);
  pointer-events: none;
  animation: cartFly .7s cubic-bezier(.45, -.18, .7, 1) forwards;
}

@keyframes cartFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: .35; }
}

a[href="cart.html"].is-bump { animation: cartBump .55s var(--ease); }

@keyframes cartBump {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.3); }
  60%      { transform: scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fly { display: none; }
  a[href="cart.html"].is-bump { animation: none; }
}

/* 詳情分頁 */
/* 詳情分頁：正文通欄，與上方產品區左右邊緣對齊 */
.tabs {
  margin-top: 74px;
}



.tabs__head {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.tabs__head button {
  position: relative;
  padding: 0 28px;
  height: 54px;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--text-2);
}

.tabs__head button.is-on { color: var(--ink); }

.tabs__head button.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--red);
}

.tabs__body { padding-top: 34px; }

/* ---------- 9. 健康之選（需求分區：兩類一排，左圖右文） ---------- */
/* 版式：一行兩張卡片，卡內左圖右文；整卡可點（詳見下方拉伸連結） */
.needgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 34px;
}

.needcard {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0 28px;
  align-items: center;
  position: relative;   /* 作為拉伸連結的定位基準 */
  cursor: pointer;
  /* 邊框成卡：靜默時一道細邊，滑過時陰影 + 微浮起 */
  padding: 22px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}

.needcard:hover {
  border-color: rgba(220, 18, 32, .22);
  box-shadow: 0 18px 40px rgba(31, 24, 15, .13);
  transform: translateY(-4px);
}

.needcard__media {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: #EEE9E1;
}

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

.needcard:hover .needcard__media img { transform: scale(1.045); }

/* 卡內文字基礎樣式（沿用原語彙） */
.need__num {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--red);
}

.need__title {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.need__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
}

.need__tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

.need__tags span {
  font-size: 13px;
  color: var(--bronze-dk);
  background: #FBF6EC;
  border: 1px solid #EEE0C8;
  padding: 5px 11px;
  border-radius: 2px;
}

.need__link { margin-top: 20px; }

/* 「查看產品」按鈕化：與首頁商品卡購物車按鈕同款（紅底白字、懸停加深） */
.needcard .tlink {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 30px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  letter-spacing: .12em;
  border-radius: 2px;
  position: relative;
  z-index: 2;
  transition: background .3s var(--ease);
}

/* 按鈕化後移除原文字連結的下劃線動效 */
.needcard .tlink::after { display: none; }

.needcard .tlink svg { width: 12px; height: 12px; }

.needcard .tlink:hover,
.needcard:hover .tlink { background: var(--red-dk); }

/* 整卡可點：透明的整卡覆蓋層（同首頁商品卡做法），
   卡上任何位置點擊都進 shop.html；按鈕自身 z-index 更高，獨立響應懸停 */
.needcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 滑過整卡：標題轉紅，與圖片放大一起給「可點」反饋 */
.needcard .need__title { margin-top: 0; transition: color .3s var(--ease); }
.needcard:hover .need__title { color: var(--red); }

/* 預約諮詢 CTA：改深紅底，壓一層低透明度實景照增加質感，
   文字反白、按鈕反白，與上下米白區塊拉開層次 */
.psec--cream.cta-consult { background: var(--red-dk); }

.cta-consult { position: relative; overflow: hidden; }

.cta-consult::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/consult-hands.jpg) center / cover no-repeat;
  opacity: .28;
}

.cta-consult > .wrap { position: relative; z-index: 1; }

.cta-consult .plead { color: rgba(255, 255, 255, .92); }

.cta-consult .btn--red {
  background: #fff;
  color: var(--red-dk);
}

.cta-consult .btn--red:hover {
  background: var(--cream);
  color: var(--red-dk);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4);
}

/* ---------- 10. 文章 / 知識 ---------- */
.with-side {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: start;
}

.art__head { border-bottom: 1px solid var(--line-2); padding-bottom: 30px; }

.art__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text-3);
  letter-spacing: .06em;
}

.art__meta b { font-weight: 400; color: var(--red); letter-spacing: .04em; }

.art__title {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.art__cover {
  margin-top: 32px;
  border-radius: 6px;
  overflow: hidden;
  height: 420px;
}

.art__cover img { width: 100%; height: 100%; object-fit: cover; }

.art__body { margin-top: 36px; }

.art__body h3 {
  font-family: var(--serif);
  font-size: 23px;
  color: var(--ink-2);
  margin: 34px 0 14px;
  letter-spacing: .02em;
  padding-left: 14px;
  border-left: 3px solid var(--red);
}

.art__body p { margin-bottom: 18px; }

.art__body blockquote {
  margin: 28px 0;
  padding: 24px 28px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-2);
}

.art__foot {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.art__foot span {
  font-size: 14px;
  color: var(--text-2);
  background: #F7F4EE;
  padding: 7px 14px;
  border-radius: 2px;
}

.artnav {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.artnav a {
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  transition: all .35s var(--ease);
}

.artnav a:hover { border-color: var(--red); background: #FFFCF7; }
.artnav small { display: block; font-size: 14px; color: var(--text-3); letter-spacing: .1em; margin-bottom: 8px; }
.artnav b { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--ink-2); line-height: 1.6; display: block; }

/* 側欄 */
.side { position: sticky; top: 110px; display: grid; gap: 26px; }

.side__box {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 26px 24px;
}

.side__title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink-2);
  letter-spacing: .06em;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.side__title::before {
  content: "";
  width: 3px;
  height: 16px;
  background: var(--red);
}

.side__list li { padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.side__list li:last-child { border-bottom: 0; }

.side__list a {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.side__list a:hover { color: var(--red); }
.side__list b { font-family: var(--mono); font-weight: 400; color: var(--text-3); font-size: 14px; }

/* 健康諮詢卡：暖黃底 + 紅色號碼 */
.side__box--dark {
  /* 單一暖黃（截圖實測 #F5E5C2），不再做漸層，避免兩端色差 */
  background: #F5E5C2;
  border-color: #E8D3A6;
  color: #6B5A3A;
}

.side__box--dark .side__title {
  color: var(--ink);
  border-bottom-color: rgba(120, 92, 40, .22);
}

.side__box--dark p { font-size: 14px; line-height: 1.9; margin-bottom: 18px; color: #6B5A3A; }

.side__box--dark .tel {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .04em;
  display: block;
  margin-bottom: 6px;
}

/* 列表頁 */
.nlist { display: grid; gap: 0; }

.nrow {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-2);
  transition: background .3s var(--ease);
}

.nrow:first-child { padding-top: 0; }

.nrow__media {
  height: 186px;
  border-radius: 4px;
  overflow: hidden;
  background: #F2EEE7;
}

.nrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.nrow:hover .nrow__media img { transform: scale(1.05); }

.nrow__date {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--text-3);
}

.nrow__title {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-2);
  /* 標題改為 700 後字面變寬，字距歸零讓長標題不產生單字孤行 */
  letter-spacing: 0;
  /* 最長標題（24 字）必然折行，用 balance 讓兩行字數均衡，避免末行只剩一字 */
  text-wrap: balance;
}

.nrow:hover .nrow__title { color: var(--red); }

.nrow__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
}

/* ---------- 11. 聯繫我們 ---------- */
.cgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.ccontact {
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 34px 24px;
  background: #fff;
  transition: all .4s var(--ease);
  display: flex;
  flex-direction: column;
  /* 置中排版 */
  align-items: center;
  text-align: center;
}

.ccontact:hover { box-shadow: 0 22px 50px -26px rgba(48, 34, 14, .26); transform: translateY(-4px); }

.ccontact__icon {
  /* 圓底與內部圖示一起放大 1/3：48 → 64 */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(220, 18, 32, .07);
  color: var(--red);
  margin-bottom: 22px;
}

/* 圖示同步放大 1/3：19 → 25 */
.ccontact__icon svg { width: 25px; height: 25px; }

.ccontact h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.ccontact p { font-size: 14px; line-height: 1.9; color: var(--text-2); }

/* 紅色重點資訊：全部統一為同一字級（以電話卡為基準 22px） */
.ccontact .big,
.ccontact .ccontact__strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .02em;
  line-height: 1.45;
}

/* 小標籤（產品諮詢熱線／業務聯繫熱線／傳真號碼…） */
.ccontact .ccontact__lb {
  font-size: 14px;
  color: var(--text-3);
  letter-spacing: .04em;
  margin-top: 10px;
}

/* 統一的「小標籤 → 紅字」節奏 */
.ccontact .ccontact__lb + .big,
.ccontact .ccontact__lb + .ccontact__strong { margin-top: 2px; }
.ccontact .big + .ccontact__lb,
.ccontact .ccontact__strong + .ccontact__lb { margin-top: 14px; }

/* 紅字之後接說明文字（電郵 / 傳真卡）時留出呼吸 */
.ccontact .big + p:not(.ccontact__lb),
.ccontact .ccontact__strong + p:not(.ccontact__lb) { margin-top: 14px; }

/* 官方微信二維碼卡 */
.ccontact--qr .ccontact__qr {
  margin: 4px 0 16px;
  width: 132px;
  height: 132px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.ccontact--qr .ccontact__qr img {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: contain;
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form label { display: block; font-size: 14px; color: var(--text-2); letter-spacing: .06em; margin-bottom: 8px; }
.form input,
.form textarea,
.form select {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink-2);
  background: #fff;
  outline: none;
  transition: border-color .3s var(--ease);
}

.form textarea { height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.8; }
.form input:focus,
.form textarea:focus,
.form select:focus { border-color: var(--red); }

.form__full { grid-column: 1 / -1; }

.form__note { font-size: 14px; color: var(--text-3); line-height: 1.8; }

.map {
  height: 340px;
  border-radius: 6px;
  overflow: hidden;
  background: #EDE7DC;
  position: relative;
  isolation: isolate;
}

/* 真實地圖底圖 */
.map__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 定位組合：標籤在上、紅釘在下，尖端對準中遠大廈所在位置 */
.map__marker {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* 公司名稱標籤 */
.map__label {
  padding: 8px 18px;
  background: #fff;
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(60, 45, 25, .3), 0 1px 3px rgba(60, 45, 25, .14);
  transition: color .3s var(--ease);
}

.map__marker:hover .map__label { color: var(--red); }

/* 紅色定位圖釘 */
.map__pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(220, 18, 32, .55);
  margin-top: 2px;
}

.map__pin svg {
  width: 19px;
  height: 19px;
  transform: rotate(45deg);
  color: currentColor;
}

/* 地址資訊：兩行排列，承接原清單位置 */
.mapmeta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}

.mapmeta > span { display: flex; align-items: baseline; gap: 10px; }

.mapmeta b {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
  flex: 0 0 auto;
  /* 兩個標籤等寬，內容左緣對齊 */
  min-width: 4.4em;
}

/* 地圖定位標記 */
.map__pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(220, 18, 32, .55);
  margin-top: 2px;
}

.map__pin svg {
  width: 19px;
  height: 19px;
  transform: rotate(45deg);
  color: currentColor;
}

/* 定位標籤 */
.map__label {
  padding: 8px 18px;
  background: #fff;
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(60, 45, 25, .3), 0 1px 3px rgba(60, 45, 25, .14);
}

/* ---------- 12. 響應式 ---------- */
@media (max-width: 1500px) {
  .phero { height: 270px; }
  .phero__title { font-size: 46px; }
  .split { gap: 50px; }
  .split__title { font-size: 34px; }
  .pd { grid-template-columns: 620px 1fr; gap: 44px; }
  .pd__main { height: 480px; }
  .needgrid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .with-side { grid-template-columns: 1fr 320px; gap: 44px; }
}

@media (max-width: 1240px) {
  .psec { padding: 64px 0; }
  .phero { height: 240px; }
  .phero__title { font-size: 40px; }
  .split { grid-template-columns: 1fr 1fr; gap: 34px; }
  .split__title { font-size: 30px; }
  .stats { gap: 16px; padding: 40px 0; }
  .stats__num { font-size: 40px; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .pd { grid-template-columns: 1fr; gap: 34px; }
  .pd__gallery { position: static; }
  /* 平板：推薦軌道一屏 4 張 */
  .relrail .pcard { flex-basis: calc((100% - 60px) / 4); }
  .relrail .pcard__badge { height: 24px; font-size: 12px; padding: 0 8px; }
  .pd__main { height: 420px; }
  .needgrid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .needcard { grid-template-columns: 230px 1fr; gap: 0 22px; }
  .with-side { grid-template-columns: 1fr; gap: 34px; }
  .side { position: static; }
  .nrow { grid-template-columns: 240px 1fr; gap: 22px; }
  .nrow__media { height: 156px; }
  .fgrid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .phero { height: 210px; }
  .phero__title { font-size: 34px; }
  .phero__ghost { font-size: 120px; }
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  /* 單欄時左右並排的前提消失，改回自然高度＋整頁滾動，不要在手機上做內滾 */
  .split__copy--fit { height: auto; }
  .split__scroll {
    overflow: visible;
    padding-right: 0;
    overscroll-behavior: auto;
  }
  .split__hint { display: none; }
  .split__media--h480, .split__media--h420 { height: 300px; }
  .fgrid, .fgrid--4 { grid-template-columns: 1fr 1fr; }
  .cgrid { grid-template-columns: 1fr 1fr; }
  /* 原為 4 項時的 2×2 排法；現為 5 項，收成兩欄會堆三行、過高。
     維持一行五項與桌面同形，只收字號與間距 */
  .stats { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .stats__num { font-size: 32px; }
  .stats__num small { font-size: 15px; margin-left: 3px; }
  .timeline::before { left: 18px; }
  .titem, .titem:nth-child(even) .titem__card {
    grid-template-columns: 36px 1fr;
    padding: 18px 0;
    text-align: left;
  }
  .titem__year { grid-column: 1; grid-row: 1; font-size: 18px; text-align: left; padding-top: 20px; }
  /* 單欄時卡片保留內距供 hover 用；2+16 = 原本的 18px 起始留白 */
  .titem__card, .titem:nth-child(even) .titem__card {
    grid-column: 2;
    grid-row: 1;
    padding: 16px;
    margin: 0 0 0 2px;
    min-height: 0;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .phero { height: 170px; }
  .phero__title { font-size: 27px; letter-spacing: .02em; }
  .phero__sub { font-size: 14px; margin-top: 10px; }
  .phero__ghost { font-size: 78px; }
  .phero__eyebrow { font-size: 14px; margin-bottom: 10px; }
  .crumb__in { height: 46px; font-size: 14px; }
  .psec { padding: 40px 0; }
  .needgrid { grid-template-columns: 1fr; gap: 30px; }
  .needcard { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .needcard__media { aspect-ratio: 16 / 9; }
  .plead { font-size: 17px; line-height: 1.9; }
  .pbody { font-size: 14px; line-height: 1.95; }
  .split__title { font-size: 24px; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .shop-grid .pcard__media { height: 180px; padding: 16px 10px 0; }
  .shop-grid .pcard__name { font-size: 15px; }
  .shop-grid .pcard__series { font-size: 14px; }
  .shop-grid .pcard__price .num { font-size: 16px; }
  .shop-grid .pcard__cart { height: 40px; font-size: 14px; }
  .fgrid, .fgrid--4 { grid-template-columns: 1fr; }
  .cgrid { grid-template-columns: 1fr; }
  /* 手機：五項改 2 欄，落單的第 5 項橫跨兩欄居中 */
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .stats__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats__num { font-size: 32px; }
  .stats__num small { font-size: 15px; margin-left: 3px; }
  .fcard { padding: 24px 22px; }
  .nrow { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .nrow__media { height: 190px; }
  .nrow__title { font-size: 18px; }
  .pd__title { font-size: 26px; }
  .pd__price .num { font-size: 30px; }
  .pd__buy .btn { flex: 1; padding: 0 18px; }
  /* 手機：大圖在上，縮圖恢復橫排放在下面 */
  .pd__gallery { flex-direction: column; }
  .pd__thumbs { order: 0; flex: none; width: 100%; grid-template-columns: repeat(4, 1fr); }
  .pd__thumbs button { height: auto; aspect-ratio: 1 / 1; }
  .pd__main { height: 380px; padding: 24px; }
  /* 手機：推薦軌道一屏 2 張小卡 */
  .relrail { gap: 12px; }
  .relrail .pcard { flex-basis: calc((100% - 12px) / 2); }
  .relrail .pcard__media { height: 160px; padding: 12px 8px 0; }
  .railbtn { width: 34px; height: 34px; }
  .form { grid-template-columns: 1fr; }
  .art__title { font-size: 24px; }
  .art__cover { height: 220px; }
  .artnav { grid-template-columns: 1fr; }
  .tabs__head { overflow-x: auto; }
  .tabs__head button { padding: 0 16px; font-size: 14px; height: 46px; white-space: nowrap; }
  .need__title { font-size: 19px; }
  .pager a, .pager span { min-width: 38px; height: 38px; }
  .map { height: 260px; }
  .mapmeta { flex-direction: column; gap: 4px; font-size: 14px; }
  .map__pin { width: 44px; height: 44px; }
  .map__pin svg { width: 22px; height: 22px; }
  .map__label { font-size: 17px; }
}

/* ---------- 13. 會員登入 / 註冊 ---------- */
.auth {
  display: grid;
  grid-template-columns: 1fr 540px;
  min-height: 570px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(48, 34, 14, .35);
}

.auth__form { padding: 62px 72px; }

.auth__title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
}

.auth__sub {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: .02em;
}

.fld { margin-top: 24px; }

.fld label {
  display: block;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-2);
  margin-bottom: 9px;
}

.fld input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  transition: border-color .3s var(--ease);
}

.fld input:focus { border-color: var(--red); }
.fld input::placeholder { color: #BFC2C6; }

.frow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-2);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.check input { width: 14px; height: 14px; accent-color: var(--red); }

.frow a { color: var(--red); }
.frow a:hover { text-decoration: underline; }

.auth__btn { width: 100%; margin-top: 28px; height: 56px; }

.auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 20px;
  font-size: 14px;
  color: var(--text-3);
  letter-spacing: .06em;
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.auth__note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-3);
}

.auth__note a { color: var(--text-2); text-decoration: underline; }

/* 右側品牌圖 */
.auth__media {
  position: relative;
  background: #E8E1D5 url("../img/cat-immunity.jpg") center / cover no-repeat;
  isolation: isolate;
}

.auth__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 14, 6, .18) 0%, rgba(20, 14, 6, .55) 62%, rgba(20, 14, 6, .82) 100%);
}

.auth__media-in {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 46px;
  color: #fff;
}

.auth__quote {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.62;
  letter-spacing: .04em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}

.auth__quote small {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: .14em;
  opacity: .8;
}

.auth__list {
  margin-top: 24px;
  display: grid;
  gap: 11px;
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
}

.auth__list li { display: flex; gap: 9px; align-items: flex-start; }
.auth__list svg { width: 14px; height: 14px; margin-top: 4px; flex: 0 0 14px; opacity: .85; }

/* ---------- 14. 購物車 ---------- */
.cart {
  display: grid;
  grid-template-columns: 1fr 384px;
  gap: 46px;
  align-items: start;
}

.cart__table { border-top: 2px solid var(--ink-2); }

.cart__row {
  display: grid;
  grid-template-columns: 92px 1fr 104px 132px 104px 34px;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
}

.cart__row--head {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--text-3);
}

.cart__thumb {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

.cart__thumb img { max-width: 84%; max-height: 84%; width: auto; object-fit: contain; }

.cart__name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-2);
  letter-spacing: .02em;
  line-height: 1.4;
}

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

.cart__spec { margin-top: 5px; font-size: 14px; color: var(--text-3); }

.cart__price,
.cart__sub {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: .02em;
}

.cart__sub { color: var(--red); font-weight: 600; }

.cart__del {
  font-size: 17px;
  line-height: 1;
  color: var(--text-3);
  transition: color .3s var(--ease);
}

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

.cart .qty { height: 44px; border: 1px solid var(--line); }
.cart .qty button { width: 36px; font-size: 15px; }
.cart .qty input { width: 42px; height: 100%; }

.cart__sum {
  background: var(--cream);
  border-radius: 4px;
  padding: 30px 28px 28px;
  position: sticky;
  top: 110px;
}

.cart__sum h3 {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink-2);
  letter-spacing: .06em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.cart__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 0;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px dashed var(--line);
}

.cart__line b { font-family: var(--serif); font-size: 17px; color: var(--ink-2); font-weight: 400; }
.cart__line .free { color: #1E8A4C; font-size: 14px; letter-spacing: .04em; }

.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
}

.cart__total span { font-size: 14px; letter-spacing: .08em; color: var(--ink-2); }
.cart__total b { font-family: var(--serif); font-size: 30px; color: var(--red); letter-spacing: .02em; }

.coupon { display: flex; gap: 8px; margin-top: 20px; }

.coupon input {
  flex: 1;
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  outline: none;
}

.coupon input:focus { border-color: var(--red); }

.coupon button {
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
  letter-spacing: .06em;
  background: var(--ink-2);
  color: #fff;
  border-radius: 2px;
  transition: background .3s var(--ease);
}

.coupon button:hover { background: #000; }

.cart__sum .btn { width: 100%; margin-top: 16px; }

.cart__back {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}

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

.cart__tip {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-3);
}

@media (max-width: 1240px) {
  .auth { grid-template-columns: 1fr 420px; }
  .auth__form { padding: 44px 46px; }
  .cart { grid-template-columns: 1fr 330px; gap: 30px; }
  .cart__row { grid-template-columns: 80px 1fr 90px 118px 90px 30px; gap: 12px; }
}

@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; }
  .auth__media { min-height: 300px; }
  .auth__media-in { left: 26px; right: 26px; bottom: 26px; }
  .auth__quote { font-size: 21px; }
  .cart { grid-template-columns: 1fr; gap: 26px; }
  .cart__sum { position: static; }
}

@media (max-width: 720px) {
  .auth__form { padding: 30px 22px; }
  .auth__title { font-size: 26px; }
  .auth__media { min-height: 220px; }
  .auth__quote { font-size: 18px; }
  .cart__row {
    grid-template-columns: 64px 1fr 64px;
    grid-template-areas: "thumb info del" "thumb qty sub";
    row-gap: 10px;
    padding: 16px 0;
  }
  .cart__row--head { display: none; }
  .cart__thumb { grid-area: thumb; width: 64px; height: 64px; }
  .cart__info { grid-area: info; }
  .cart__del { grid-area: del; justify-self: end; }
  .cart .qty { grid-area: qty; width: max-content; }
  .cart__sub { grid-area: sub; justify-self: end; white-space: nowrap; font-size: 15px; }
  .cart__price { display: none; }
  .cart__name { font-size: 15px; }
}

/* ---------- 15. 證書牆（認識我們 · 榮譽資質「時間給的證明」） ---------- */
/* 證書軌道：自動橫向滾動（跑馬燈），無滾動條。
   做成兩份內容首尾相接、整體左移 50%，即可無縫循環。
   拖動與滾動條全部取消 —— 內容會自己走過去，不必手動尋找。 */
.certrail {
  /* 裁掉溢出部分，同時徹底移除滾動條 */
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.certrail::-webkit-scrollbar { display: none; height: 0; }

.certrail__track {
  display: flex;
  /* 依內容總寬撐開，不被容器壓縮 */
  width: max-content;
  will-change: transform;
  animation: certMarquee 60s linear infinite;
}

/* 位移 -50%：恰為「一份內容」的長度（含每張右側留白），
   接回時與起點嚴絲合縫，看不出接縫 */
@keyframes certMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* 滑過整排暫停，方便停下細看某張；移開續走 */
.certrail:hover .certrail__track { animation-play-state: paused; }

/* 尊重系統「減少動態效果」設定：此類使用者改為可手動橫向捲動 */
@media (prefers-reduced-motion: reduce) {
  .certrail { overflow-x: auto; }
  .certrail__track { animation: none; }
}

/* 間距用 margin-right 而非父級 gap ：
   gap 只在相鄰項之間生效，克隆後總間隙少一個，-50% 會錯位半格；
   margin 屬於每項自身寬度的一部分，兩份內容長度嚴格相等 */
.cert {
  margin: 0 22px 0 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  /* JS 會按屏寬精確計算（四/三/兩張一屏），這裡先給兜底寬度，
     避免載入瞬間卡片寬度跟著圖說文字忽寬忽窄 */
  width: 262px;
}

/* 證書圖面：不描邊、不加投影，讓證書本身成為唯一的視覺主體。
   「畫框」是先前截圖裡那兩道灰線的來源，去掉後整排更乾淨。
   高度由 aspect-ratio 決定，統一比例以免圖說高低錯落 */
.cert__paper {
  display: block;           /* <a> 預設 inline，否則無法撐高 */
  position: relative;
  overflow: hidden;
  background: #FBF9F5;
  aspect-ratio: 4 / 5;
  transition: transform .4s var(--ease);
}

.cert__paper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.cert:hover .cert__paper { transform: translateY(-2px); }

.cert figcaption { margin-top: 11px; }

.cert figcaption b {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.cert figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--text-2);
}

/* ---------- 集團數據 ---------- */
/* 緊接證書牆之下，不再加分隔線，留白即可分層。
   上層四格為主數字（全站最需要被看見的四項），
   下層六行為細目，合計覆蓋集團十項數據。
   主數字左對齊而非居中：多數格帶一行說明，左對齊才讀得順 */
.gdata {
  margin-top: 46px;
}

/* 細目：標籤｜內容 兩欄，逐行以細線分隔，像一份可核對的清單 */
.gdata__rows {
  margin: 0;
  border-top: 1px solid var(--line-2);
}

.gdata__rows > div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0 30px;
  align-items: baseline;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-2);
}

.gdata__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }

.gdata__rows dt {
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--red);
}

.gdata__rows dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--text);
}

/* 行內數字加重：便於快速掃到「幾件、幾篇」 */
.gdata__rows dd i {
  font-style: normal;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}

@media (max-width: 1240px) {
  /* 卡片寬度與間距由腳本依屏寬統一計算（見 main.js 證書段） */
  .gdata__rows > div { grid-template-columns: 116px 1fr; gap: 0 22px; }
}

@media (max-width: 1024px) {
  /* 平板：腳本自動改為三張一屏 */
}

@media (max-width: 720px) {
  /* 手機：腳本自動改為兩張一屏 */
  .cert__paper { aspect-ratio: 3 / 4; }
  .cert figcaption b { font-size: 14.5px; }
  .cert figcaption span { font-size: 13px; }
  /* 手機：主數字改 2×2，分隔線只在第 1、3 格右側 */
  .gdata { margin-top: 34px; }
  /* 細目：標籤改為置於內容上方，兩欄在窄螢幕擠不下 */
  .gdata__rows > div { grid-template-columns: 1fr; gap: 7px; padding: 16px 0; }
  .gdata__rows dd { font-size: 15px; line-height: 1.85; }
}

/* ---------- 16. 企業文化（中科文化） ---------- */
/* 版式：左文右圖 + 四張實體卡片。
   純文字版會顯散：四個紅字浮在留白裡，上下沒有東西承接。
   加一張實景照給視線一個落點，四精神改為有邊框的卡片，
   每組字有自己的「面」，區塊才聚得住。 */

/* 上半：文字（左）+ 圖片（右）。
   圖片佔 46%，高度由文字欄撐起；align-items:stretch 讓圖與文字同高 */
.culture__lead {
  display: grid;
  /* 圖片由 520 收到 470、間距 76 收到 64：
     左欄可用寬度因此從 690 增至 750，兩段說明能排滿整行，
     不再在右側留出大片空白 */
  grid-template-columns: 1fr 470px;
  gap: 0 64px;
  align-items: stretch;
}

.culture__copy {
  display: flex;
  flex-direction: column;
  /* 兩段文字移入左欄後，內容比圖片高度短；
     置中讓左欄文字與右圖在垂直方向居中對齊，不留底部空洞 */
  justify-content: center;
  padding: 8px 0;
}

.culture__label {
  font-size: 14px;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--red);
}

/* 宗旨改為單行：17 字（含全角間隔）在左欄 750px 內，
   36px 約 648px，留出餘量不會折行 */
/* 兩句之間的間隔號：字號與大字同級會過於搶眼，
   收到 .5em 並左右各留 .45em，成為一個安靜的分隔記號 */
.creed__dot {
  display: inline-block;
  margin: 0 .45em;
  font-size: .5em;
  /* 中文字面重心偏下，往上提一點才落在視覺中線上 */
  vertical-align: .28em;
  color: var(--red);
}

.culture__creed {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  /* 字距收到 0：單行字數多，任何正字距都會把行推寬至折行 */
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink);
}

/* 定義段：與大字之間留足距離，小字不與標語擠在一塊 */
.culture__def {
  margin-top: 26px;
  /* 不限寬：跟著左欄寬度走。先前限 560 而左欄實際 690，
     右側因此空出一大塊 */
  font-size: 16px;
  line-height: 2;
  /* 字距略鬆至 .02em：兩段各兩行，末行原本只剩四五字，
     鬆一點讓末行更接近滿行，右端齊整 */
  letter-spacing: .02em;
  color: var(--text);
}

/* 圖片：與站內 split__media 同款圓角與投影，底部壓一條漸層放圖說 */
.culture__pic {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #EEE9E1;
  box-shadow: 0 20px 46px -24px rgba(48, 34, 14, .26);
}

.culture__pic img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

.culture__pic figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 22px 16px;
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .92);
  background: linear-gradient(180deg, rgba(20, 16, 10, 0) 0%, rgba(20, 16, 10, .58) 100%);
}

/* 四精神：四張並列卡片。
   給白底 + 細邊 + 內距，讓每組「大字 + 注解」成為獨立的一塊；
   四張等寬等高，用 grid 自動對齊，不靠 padding 硬撐
   （用 padding 會讓第 1 張與其餘三張的文字左緣錯開） */
.spirit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  margin-top: 64px;
  padding: 0;
}

.spirit__item {
  position: relative;
  padding: 30px 26px 28px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  list-style: none;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

/* 卡片上緣的紅條改為內縮的短記號：
   先前用 left/right:-1px 橫貫整卡，四張連起來像一道斷續的長線，
   與圖片上緣也對不齊。改為只在卡片內左上角壓 32px，
   像卡片上的題頭印記，四張各自獨立又被同一語彙串起 */
.spirit__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--red);
  border-radius: 4px 0 2px 0;
  opacity: .85;
  transition: width .4s var(--ease);
}

.spirit__item b {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  /* 兩字之間略開，避免「誠信」黏成一塊 */
  letter-spacing: .08em;
  color: var(--red);
}

.spirit__item span {
  display: block;
  margin-top: 14px;
  font-size: 15.5px;
  letter-spacing: .1em;
  color: var(--text);
}

@media (hover: hover) {
  .spirit__item:hover {
    border-color: transparent;
    box-shadow: 0 18px 40px -22px rgba(48, 34, 14, .26);
    transform: translateY(-3px);
  }
  .spirit__item:hover::before { width: 100%; }
}

/* 第二段說明：緊接在文化定義之後，同屬左欄文字，
   只需段間距（不另限寬，隨左欄寬度走）；
   字色比定義段略深，作為「怎麼做」的收束，與「是什麼」形成遞進 */
.culture__note {
  margin-top: 16px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .02em;
  color: var(--ink-2);
}

@media (max-width: 1240px) {
  .culture__lead { grid-template-columns: 1fr 380px; gap: 0 48px; }
  /* 單行在 1240 以下空間不足，收字號並允許換行，避免橫向溢出 */
  .culture__creed { font-size: 29px; white-space: normal; }
  .spirit { column-gap: 16px; }
  .spirit__item { padding: 26px 20px 24px; }
  .spirit__item b { font-size: 30px; }
}

@media (max-width: 1024px) {
  /* 圖片移到文字下方：窄螢幕若仍並排，文字欄會被壓到過窄 */
  /* 1024 仍維持左文右圖：若此處改成圖片通欄，
     會與下方「生產基地」的大圖結構撞版，兩區又變回同一套。
     只把圖片收窄、間距收小，橫向關係保住 */
  .culture__lead { grid-template-columns: 1fr 300px; gap: 0 40px; }
  .culture__pic img { min-height: 0; height: 300px; }
  .culture__def { max-width: none; }
  /* 四欄收成 2×2 */
  .spirit { grid-template-columns: repeat(2, 1fr); row-gap: 16px; margin-top: 46px; }
}

@media (max-width: 720px) {
  .psec--culture { padding: 54px 0; }
  .culture__creed { margin-top: 18px; font-size: 21px; line-height: 1.6; white-space: normal; }
  .culture__def { font-size: 15px; }
  .culture__pic img { height: 210px; }
  .culture__pic figcaption { padding: 26px 16px 12px; font-size: 12px; }
  .spirit { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 12px; margin-top: 36px; }
  .spirit__item { padding: 20px 16px 18px; }
  .spirit__item b { font-size: 24px; }
  .spirit__item span { margin-top: 10px; font-size: 13.5px; letter-spacing: .06em; }
  .culture__note { margin-top: 14px; font-size: 15px; }
}

/* ---------- 17. 生產基地（文字在上、三圖並排在下） ---------- */
/* 與上方「企業文化」刻意區分：
   文化區是「左文右圖 + 四張文字卡」的橫向對談，
   此處是「標題正文在上、三張實景圖並排在下」的縱向陳列。
   前者以文字為主、一圖為輔；後者以圖為證、三圖並列。 */

/* 文字區：左標題、右正文，底線對齊 */
.facility__info {
  display: grid;
  /* 左欄由 400 增至 470：標題字號提到 44px 後，
     「從一株靈芝到一粒膠囊」10 字需約 450px 才排得下單行 */
  grid-template-columns: 470px 1fr;
  gap: 0 64px;
  align-items: start;
  /* 左側一道通高細線：文化區沒有的記號，
     窄螢幕兩區都豎排時仍可分辨 */
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.facility__title {
  margin-top: 20px;
  font-family: var(--serif);
  /* 與站內其他區塊大標題（sec-head__title，1440 視口下為 44px）同級；
     原本 38px 比它們小一檔，放在同一頁裡顯得弱 */
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--ink);
}

.facility__text {
  padding-top: 8px;
}

.facility__text p {
  font-size: 16px;
  line-height: 2;
  letter-spacing: .015em;
  color: var(--text);
}

/* 第二段是總結語氣，略淡一階作收束 */
.facility__text p + p {
  margin-top: 22px;
  color: var(--text-2);
}

/* 三圖並排：每張 3:2，grid 等分。
   3:2 而非 4:3，是因為「廠房正面」原片為 2.38 的超寬全景，
   裁成 4:3 會切掉左右兩翼；3:2 對三張都留得住主體。
   三張圖已按 3:2 預裁（1330×887），故 cover 不會再切掉內容 */
.facility__shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.facility__shots figure {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #EEE9E1;
  aspect-ratio: 3 / 2;
}

.facility__shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}

/* 圖說：白字壓在底部漸層上，不佔版面高度 */
/* 圖說：白字壓在底部漸層上。
   漸層需壓得更沉（.62）且加長緩衝區，否則遇到明亮天空的圖
   （廠區全景下半是淺色草坪與天空）白字會糊掉 */
.facility__shots figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 13px;
  font-size: 13.5px;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, rgba(16, 12, 8, 0) 0%, rgba(16, 12, 8, .38) 46%, rgba(16, 12, 8, .72) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (hover: hover) {
  .facility__shots figure:hover img { transform: scale(1.05); }
}

@media (max-width: 1240px) {
  .facility__info { grid-template-columns: 390px 1fr; gap: 0 44px; }
  .facility__title { font-size: 38px; }
  .facility__shots { gap: 16px; margin-top: 44px; }
}

@media (max-width: 1024px) {
  /* 單欄：標題在上、正文在下 */
  .facility__info { grid-template-columns: 1fr; gap: 26px; }
  .facility__text { padding-top: 0; }
}

@media (max-width: 720px) {
  .facility__info { gap: 20px; padding-left: 18px; }
  .facility__title { margin-top: 14px; font-size: 27px; }
  /* 手機三欄太窄，改為一列一大圖，縱向依次陳列 */
  .facility__shots { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .facility__shots figure { aspect-ratio: 3 / 2; }
  .facility__text p { font-size: 15px; }
  .facility__shots figcaption { font-size: 13px; padding: 24px 14px 11px; }
}