/* Yuyi · Direction B — Shared stylesheet
   Editorial / sigmacare style: white + steel blue + mint teal / serif Chinese
   ============================================================ */

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --cream: #f9fafb;
  --ink: #2d2d2d;
  --brown: #487da6;
  --brown-light: #6e6e6e;
  --rust: #487da6;
  --gold: #79c1cb;
  --line: #e2e8f0;

  --font-head: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font-head); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Top bar / nav ─────────────────────────────────────────── */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); padding: 0 64px; position: sticky; top: 0; z-index: 50; }
.site-header__top { display: flex; align-items: center; justify-content: flex-end; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--brown); gap: 24px; font-family: var(--font-ui); }
.site-header__contact { display: flex; gap: 24px; }
.site-header__main { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand__icon { width: 56px; height: 44px; object-fit: contain; }
.brand__textbox { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.brand__sub { font-size: 12px; color: var(--brown-light); letter-spacing: .03em; font-family: var(--font-ui); font-weight: 400; margin-top: 4px; }
.nav { display: flex; gap: 32px; font-size: 17px; color: var(--ink); font-family: var(--font-head); font-weight: 500; }
.nav a { padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.nav a:hover, .nav a.is-active { color: var(--rust); border-bottom-color: var(--rust); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--cream); padding: 64px 64px 32px; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.15); }
.site-footer__brand-name { font-family: var(--font-head); font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.site-footer__brand-en { font-size: 12px; opacity: .7; letter-spacing: .2em; font-family: var(--font-ui); margin-bottom: 24px; }
.site-footer__brand-desc { font-size: 15px; line-height: 1.85; opacity: .8; max-width: 420px; }
.site-footer__heading { font-family: var(--font-head); font-size: 15px; font-weight: 700; margin-bottom: 16px; color: #79c1cb; letter-spacing: .1em; }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; opacity: .8; }
.site-footer__list a:hover { opacity: 1; color: #79c1cb; }
.site-footer__bottom { padding-top: 24px; font-size: 12px; opacity: .6; text-align: center; font-family: var(--font-ui); letter-spacing: .1em; }

/* ── Section labels ─────────────────────────────────────────── */
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-family: var(--font-ui); letter-spacing: .25em; color: var(--brown); text-transform: uppercase; font-weight: 600; }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; display: inline-block; }
.label--rust { color: #487da6; }
.label--gold { color: #79c1cb; }
.label--cream { color: var(--cream); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 20px 36px; font-size: 19px; font-weight: 600; font-family: var(--font-head); letter-spacing: .05em; transition: transform .15s, box-shadow .15s; cursor: pointer; border-radius: 0; }
.btn--primary { background: #487da6; color: #ffffff; box-shadow: 4px 4px 0 var(--ink); }
.btn--primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn--cream { background: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn--cream:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--ghost-cream { background: transparent; color: var(--cream); border: 2px solid var(--cream); }
.btn--block { display: flex; width: 100%; justify-content: space-between; padding: 24px 28px; font-size: 20px; font-weight: 700; }
.link-arrow { font-size: 17px; color: var(--rust); font-family: var(--font-head); font-weight: 600; border-bottom: 2px solid var(--rust); padding-bottom: 2px; transition: opacity .15s; }
.link-arrow:hover { opacity: .7; }
.link-underline { font-size: 18px; color: var(--ink); font-family: var(--font-head); border-bottom: 2px solid var(--ink); padding-bottom: 4px; }

/* ── Photo / image cards ────────────────────────────────────── */
.photo { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #cbd5e1, #487da6); display: flex; align-items: flex-end; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(45,45,45,0) 60%, rgba(45,45,45,.35) 100%); mix-blend-mode: multiply; }
.photo__tag { position: relative; z-index: 2; margin: 12px; padding: 6px 12px; background: rgba(255,255,255,.92); color: #487da6; font-size: 11px; letter-spacing: .08em; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; }
.photo--ratio-4-5 { aspect-ratio: 4/5; }
.photo--ratio-4-3 { aspect-ratio: 4/3; }
.photo--ratio-16-9 { aspect-ratio: 16/9; }

/* ── Common section types ──────────────────────────────────── */
.section { padding: 96px 64px; }
.section--paper { background: var(--paper); border-bottom: 1px solid var(--line); }
.section--cream { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--rust { background: var(--rust); color: var(--cream); }
.container { max-width: 1280px; margin: 0 auto; }

/* ── Page hero (smaller pages) ─────────────────────────────── */
.page-hero { background: var(--paper); padding: 64px 64px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-family: var(--font-head); font-size: 64px; font-weight: 700; line-height: 1.18; max-width: 1000px; margin-top: 24px; }
.page-hero h1 em { font-style: italic; color: var(--rust); }
.page-hero p { margin-top: 24px; font-size: 19px; line-height: 1.85; color: var(--brown); max-width: 720px; }

/* ── Two-column hero (homepage / product) ─────────────────── */
.hero-split { background: var(--bg); position: relative; overflow: hidden; }
.hero-split__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.hero-split__text { padding: 88px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.hero-split__title { margin-top: 32px; font-family: var(--font-head); font-weight: 700; font-size: 72px; line-height: 1.18; color: var(--ink); letter-spacing: -.005em; }
.hero-split__title em { font-style: italic; color: var(--rust); font-weight: 600; }
.hero-split__lede { margin-top: 36px; padding-left: 24px; border-left: 3px solid var(--gold); font-size: 20px; line-height: 1.85; color: var(--brown); max-width: 520px; }
.hero-split__actions { display: flex; gap: 20px; margin-top: 44px; align-items: center; flex-wrap: wrap; }

/* ── Card grids ────────────────────────────────────────────── */
.card { background: var(--paper); border: 1px solid var(--line); padding: 36px 40px; transition: transform .2s; }
.card:hover { transform: translateY(-4px); }
.card__num { font-family: var(--font-head); font-size: 56px; font-weight: 700; color: var(--gold); line-height: .9; }
.card__small-num { font-family: var(--font-head); font-size: 20px; color: var(--gold); font-style: italic; margin-bottom: 12px; }
.card__title { font-family: var(--font-head); font-size: 26px; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
.card__desc { font-size: 16px; line-height: 1.85; color: var(--brown); }

/* ── Typography helpers ────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.section-title { font-family: var(--font-head); font-size: 44px; font-weight: 700; line-height: 1.2; margin-top: 16px; }
.section-title em { font-style: italic; color: var(--rust); }

/* ── Stats row ─────────────────────────────────────────────── */
.stats { display: grid; gap: 32px; }
.stat__value { font-family: var(--font-head); font-size: 36px; font-weight: 700; color: var(--ink); }
.stat__label { font-size: 14px; color: var(--brown); margin-top: 4px; letter-spacing: .1em; font-family: var(--font-ui); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field__label { font-size: 13px; color: var(--brown); letter-spacing: .15em; font-family: var(--font-ui); font-weight: 600; }
.form-field__label .req { color: var(--rust); margin-left: 4px; }
.form-input, .form-select, .form-textarea { padding: 14px 16px; font-size: 17px; font-family: var(--font-head); border: 1px solid var(--line); background: var(--cream); color: var(--ink); outline: none; border-radius: 0; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--rust); }
.form-textarea { min-height: 120px; resize: vertical; }

/* ── Tables / specs ────────────────────────────────────────── */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.spec-grid__cell { padding: 32px 28px; border-bottom: 1px solid var(--line); }
.spec-grid__cell:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.spec-grid__key { font-size: 13px; color: var(--brown); letter-spacing: .2em; font-family: var(--font-ui); font-weight: 600; }
.spec-grid__value { margin-top: 8px; font-family: var(--font-head); font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1; }
.spec-grid__sub { margin-top: 8px; font-size: 14px; color: var(--brown-light); }

/* ── Article rows (knowledge list) ─────────────────────────── */
.article-row { display: grid; grid-template-columns: 130px 1fr 1.4fr 100px 80px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding .15s, background .15s; }
.article-row:hover { background: var(--paper); padding-left: 12px; padding-right: 12px; }
.article-row__num { display: none; }
.article-row__tag { font-size: 12px; color: var(--rust); letter-spacing: .2em; font-family: var(--font-ui); font-weight: 600; }
.article-row__title { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.5; }
.article-row__desc { font-size: 14px; line-height: 1.7; color: var(--brown); }
.article-row__meta { font-size: 13px; color: var(--brown-light); font-family: var(--font-ui); text-align: right; }

/* ── Long-form article body ────────────────────────────────── */
.prose { font-size: 18px; line-height: 1.95; color: #2d2d2d; }
.prose p { margin-bottom: 24px; }
.prose h2 { font-family: var(--font-head); font-size: 32px; font-weight: 700; margin-top: 56px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.prose blockquote { margin: 32px 0; padding: 24px 32px; background: var(--paper); border-left: 4px solid var(--rust); font-style: italic; font-size: 19px; line-height: 1.85; }
.prose .dropcap { float: left; font-family: var(--font-head); font-size: 80px; line-height: .9; color: var(--rust); margin-right: 14px; margin-top: 6px; font-weight: 700; }
.prose .lede { margin-bottom: 28px; font-size: 22px; line-height: 1.8; color: var(--ink); }

/* ── Pagination ────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a { padding: 12px 18px; min-width: 44px; text-align: center; border: 1px solid var(--line); font-family: var(--font-head); font-size: 16px; }
.pagination a.is-active { background: var(--ink); color: var(--cream); }

/* ── Tag chip ──────────────────────────────────────────────── */
.tag { font-size: 13px; padding: 4px 12px; border: 1px solid var(--line); color: var(--brown); font-family: var(--font-ui); display: inline-block; }
.tag--filled { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; font-size: 22px; color: var(--rust); font-weight: 300; transition: transform .2s; }
.faq[open] summary::after { content: "−"; }
.faq p { margin-top: 12px; font-size: 16px; line-height: 1.85; color: var(--brown); padding-right: 40px; }

/* ── Hero banner (Swiper) ─────────────────────────── */
.hero-banner { width: 100%; }
.hero-swiper { width: 100%; aspect-ratio: 12 / 5; max-height: 800px; }
.hero-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next { color: rgba(255,255,255,.85); }
.hero-swiper .swiper-pagination-bullet { background: #ffffff; opacity: .6; }
.hero-swiper .swiper-pagination-bullet-active { background: #487da6; opacity: 1; }
@media (max-width: 768px) {
  .hero-swiper { aspect-ratio: 1 / 1; }
}

/* ── Responsive (basic) ────────────────────────────────────── */
@media (max-width: 960px) {
  .site-header, .section, .page-hero, .hero-split__text, .site-footer { padding-left: 24px; padding-right: 24px; }
  .site-header__contact { display: flex; gap: 0; font-size: 12px; }
  .site-header__contact span:nth-child(2) { display: none; }
  .site-header__top { padding: 8px 0; justify-content: flex-end; }
  .nav { display: none; }
  .hero-split__grid { grid-template-columns: 1fr; }
  .hero-split__title { font-size: 44px; }
  .page-hero h1 { font-size: 40px; }
  .section-title { font-size: 30px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .article-row { grid-template-columns: 1fr; padding: 12px 0; }
  .article-row__desc, .article-row__meta, .article-row__tag { display: none; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec-grid__cell:not(:nth-child(3n)) { border-right: none; }
  .spec-grid__cell:nth-child(odd) { border-right: 1px solid var(--line); }
}


/* ── Customer Swiper hover ─────────────────────────── */
.customer-swiper { width: 100%; padding-bottom: 8px; }
.customer-swiper .swiper-slide { height: auto; }
.customer-photo { overflow: hidden; }
.customer-photo img { transition: transform .35s ease, filter .35s ease; filter: brightness(.85); }
.customer-photo:hover img { transform: scale(1.06); filter: brightness(1.08); }

/* ── Mobile hamburger ─────────────────────────────── */
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; background: transparent; border: 0; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav { display: none; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 16px 24px; box-shadow: 0 8px 24px rgba(0,0,0,.06); z-index: 50; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .site-header { padding: 0 24px; position: relative; }
  .site-header__main { padding: 16px 0; }
  .brand__name { font-size: 18px; }
  .brand__sub { font-size: 9px; }
  .brand__icon { width: 44px; height: 34px; }
}

/* ── Customer pagination ───────────────────────────── */
.customer-pagination.swiper-pagination { position: relative; bottom: auto; left: auto; right: auto; text-align: center; margin-top: 32px; width: 100%; }
.customer-pagination .swiper-pagination-bullet { background: rgba(255,255,255,.4); width: 8px; height: 8px; opacity: 1; }
.customer-pagination .swiper-pagination-bullet-active { background: #79c1cb; }

/* ── Customer masonry gallery ─────────────────────── */
.customer-masonry { column-count: 5; column-gap: 14px; }
.customer-masonry .masonry-item { break-inside: avoid; margin: 0 0 14px; transition: opacity .25s, transform .25s; }
.customer-masonry .masonry-item img { width: 100%; height: auto; display: block; }
.customer-masonry.is-collapsed .masonry-item.is-extra { display: none; }
@media (max-width: 1024px) { .customer-masonry { column-count: 3; } }
@media (max-width: 640px) { .customer-masonry { column-count: 2; } }

/* ── Mobile RWD （< 768px） ─────────────────────────────────
   Breakpoint added 2026-05-05
   覆蓋 inline-style grid，補各 section 響應
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Section padding 縮減 ── */
  .section { padding: 56px 24px !important; }
  .page-hero { padding: 48px 24px !important; }
  .page-hero h1 { font-size: 36px; }
  .hero-split__title { font-size: 36px; }
  .section-title { font-size: 28px !important; }

  /* ── 手機版 grid 設定 ── */
  /* 產品列表（2/3欄）→ 一排兩個 */
  [style*='grid-template-columns:repeat(2'] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*='grid-template-columns:repeat(3'] { grid-template-columns: repeat(2, 1fr) !important; }
  /* 4欄/6欄（首頁雙主軸4格）→ 一排兩個 */
  [style*='grid-template-columns:repeat(4'] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*='grid-template-columns:repeat(6'] { grid-template-columns: repeat(2, 1fr) !important; }
  /* 為什麼選宇益：1fr 1.4fr / 1fr 1fr 兩欄圖文 → 單欄（因為是文字+圖，不是產品卡） */
  [style*='grid-template-columns:1fr 1.4fr'] { grid-template-columns: 1fr !important; }
  [style*='grid-template-columns:1fr 1fr'] { grid-template-columns: 1fr !important; }
  /* 手機 card font-size 縮小以適配 2 欄 */
  .card { padding: 16px 14px; }
  .card__title { font-size: 15px; }
  .card__desc { font-size: 13px; line-height: 1.6; }

  /* 手機 grid gap 縮小（一排兩個不要太佔空間） */
  [style*='gap:24px'] { gap: 12px !important; }
  [style*='gap:16px'] { gap: 8px !important; }
  /* 卡片內元素間距縮小 */
  .card [style*='margin-bottom:24px'] { margin-bottom: 12px !important; }
  .card [style*='margin-bottom:20px'] { margin-bottom: 10px !important; }

  /* ── CTA Band 大標縮字 ── */
  .section--rust .section-title,
  .section--ink .section-title { font-size: 28px !important; }

  /* ── Footer 改單欄 ── */
  .site-footer { padding-left: 24px; padding-right: 24px; padding-bottom: 32px; }
  .site-footer__grid { grid-template-columns: 1fr !important; gap: 32px; }

  /* ── 麵包屑 section padding 縮小（knowledge-article inline style 覆蓋） ── */
  [style*='padding:32px 64px'] { padding: 12px 24px !important; }

  /* ── prod-hero（product 內頁）麵包屑已透過 @900 media 處理，補手機 ── */
  .prod-hero { padding: 12px 24px !important; }

  /* ── stair-climber 特定 media/fleet grid（有具名 class） ── */
  .media-grid { grid-template-columns: 1fr !important; }
  .fleet-grid { grid-template-columns: 1fr !important; }


  /* ── stair-climber hero banner img（非 swiper）── */
  .hero-banner img { aspect-ratio: 1 / 1 !important; }

  /* ── hero-banner picture 手機顯示確保全寬覆蓋 ── */
  .hero-banner picture, .hero-banner picture img { width: 100%; display: block; }
}

/* ── 麵包屑 section：桌機縮為 16px（同 knowledge-article 的 32px → 16px） ── */
/* 影響範圍：有 padding:32px 64px 的麵包屑 section，桌機也縮 */
@media (min-width: 769px) {
  [style*='padding:32px 64px'] { padding: 16px 64px !important; }
}

/* ── Line 浮動按鈕 ──────────────────────────────────── */
.line-float-btn {
  position: fixed;
  bottom: 32px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #06C755;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(6,199,85,.45);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}
.line-float-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(6,199,85,.55);
}
.line-float-btn img { width: 32px; height: 32px; display: block; }
.line-float-btn::after {
  content: "Line 聯繫我";
  position: absolute;
  right: 68px;
  background: #333;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.line-float-btn:hover::after { opacity: 1; }
@media (max-width: 768px) {
  .line-float-btn { width: 52px; height: 52px; bottom: 20px; right: 16px; }
  .line-float-btn img { width: 28px; height: 28px; }
  .line-float-btn::after { display: none; }
}

/* ── Footer 淺色化（黑底改淺灰） ─────────────────────── */
.site-footer { background: #2a3a52; color: var(--cream); padding: 64px 64px 32px; }

/* ── 客戶實際使用 section（section--ink）改淺色 ─────── */
.section--ink { background: #f0f4f8; color: var(--ink); }
.section--ink .label--gold { color: var(--rust); }
.section--ink h2 { color: var(--ink) !important; }
.section--ink h2 em { color: var(--rust) !important; }
/* 舊版 customer-pagination bullet 在淺色背景調整 */
.customer-pagination .swiper-pagination-bullet { background: #487da6; opacity: .35; }
.customer-pagination .swiper-pagination-bullet-active { background: #487da6; opacity: 1; }

/* ── Inner page banner（about / subsidy 等扁平） ─── */
.hero-banner--inner picture, .hero-banner--inner img { display: block; width: 100%; }
.hero-banner--inner img { aspect-ratio: 16/5; object-fit: cover; max-height: 480px; }
@media (max-width: 768px) {
  .hero-banner--inner img { aspect-ratio: 1/1; max-height: none; }
}

/* ── Inner page banner text overlay ─── */
.hero-banner--inner { position: relative; }
.banner-text { position: absolute; top: 50%; left: 64px; transform: translateY(-50%); z-index: 2; max-width: 480px; color: var(--ink); }
.banner-text__eyebrow { display: inline-block; font-size: 13px; color: var(--gold); letter-spacing: .25em; font-family: var(--font-ui); font-weight: 600; font-style: italic; margin-bottom: 12px; }
.banner-text__title { font-family: var(--font-head); font-size: 44px; font-weight: 700; line-height: 1.25; color: var(--rust); margin-bottom: 12px; }
.banner-text__subtitle { font-size: 14px; line-height: 1.6; color: var(--brown); font-family: var(--font-head); }
@media (max-width: 768px) {
  .banner-text { left: 24px; right: 24px; top: 16px; transform: none; max-width: none; text-align: left; }
  .banner-text__eyebrow { font-size: 11px; margin-bottom: 6px; }
  .banner-text__title { font-size: 24px; line-height: 1.2; }
  .banner-text__subtitle { font-size: 12px; line-height: 1.5; }
}

/* hide HTML banner-text overlay on inner pages since Elsa banners have baked-in text (2026-05-19) */
.hero-banner--inner .banner-text { display: none !important; }


/* ── Medical category pages layout (2026-06-03 RWD fix) ── */
.medical-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.medical-layout__sidebar { position: sticky; top: 120px; align-self: start; }
.medical-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .medical-products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .medical-layout { grid-template-columns: 1fr; gap: 24px; }
  .medical-layout__sidebar { position: static; top: auto; margin-bottom: 8px; }
  .medical-products { grid-template-columns: 1fr; gap: 16px; }
}

/* ── 通用 responsive grid 系統（2026-06-05 全站 inline-grid 手機降欄正解） ── */
/* 等寬卡片：桌機 N 欄 → 平板(≤1024) 2 欄 → 手機(≤768) 單欄；gap 由各處 inline 自帶 */
.yz-grid { display: grid; }
.yz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.yz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.yz-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 不等寬圖文：桌機欄寬由 inline 的 --yz-cols 指定，手機統一單欄 */
.yz-grid--split { grid-template-columns: var(--yz-cols, 1fr 1fr); }

@media (max-width: 1024px) {
  .yz-grid--3,
  .yz-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .yz-grid--2,
  .yz-grid--3,
  .yz-grid--4,
  .yz-grid--split { grid-template-columns: 1fr; }
}

/* ── contact 聯絡資訊卡（桌機 2 欄、手機單欄、字級不溢出） ── */
.contact-info { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.contact-info__cell { padding: 40px 32px; }
.contact-info__cell--divider { border-right: 1px solid var(--line); }
.contact-info__value { font-family: var(--font-head); font-size: 26px; font-weight: 700; margin-bottom: 8px; word-break: break-word; }
@media (max-width: 768px) {
  .contact-info { grid-template-columns: 1fr; }
  .contact-info__cell { padding: 28px 24px; }
  .contact-info__cell--divider { border-right: none; border-bottom: 1px solid var(--line); }
  .contact-info__value { font-size: 20px; }
}