/* ===================================================
   INTRO PAGE — 東光醫療器材
   Aesthetic: 陽春親民感 — warm, simple, functional
   =================================================== */

/* ── Header ──
   兩層固定：主列 64px + 資訊列 36px（--header-total = 100px）。
   下方版位（.cat-main、.intro-subhero、.intro-nav-mobile）都以此偏移。 */
:root {
  --infobar-height: 36px;
  --header-total: 100px; /* 64 + 36 */
}

/* 錨點跳轉（#contact 等）避開固定 header */
[id] {
  scroll-margin-top: calc(var(--header-total) + 12px);
}

.intro-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
  transition: transform 0.28s ease;
}

/* 向下捲動時收起頁首，向上捲動時滑回（見 NAV_JS） */
.intro-header.header-hidden {
  transform: translateY(-100%);
}

.intro-header-inner {
  /* 1140 = 內容 1100 + 左右各 20 內距，讓內容寬度與主畫面、頁尾（1100）對齊 */
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── 常駐資訊列：市立醫院對面・電話・營業時間 ── */
.intro-infobar {
  background: var(--color-primary);
  height: var(--infobar-height);
  overflow: hidden;
}

.intro-infobar-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

.intro-infobar a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
}

.intro-infobar a:hover {
  text-decoration: underline;
}

.intro-infobar-loc strong {
  font-weight: 700;
}

.intro-infobar-hours {
  color: rgba(255,255,255,0.78);
}

.intro-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.intro-logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary-pale);
}

.intro-logo-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  white-space: nowrap;
}

/* 中間寬度：店名與完整 tab 條無法並存，先隱藏店名（logo 保留）；
   ≤900px 導覽收成漢堡後空間足夠，店名恢復顯示 */
@media (max-width: 1200px) and (min-width: 901px) {
  .intro-logo-name { display: none; }
}

.intro-logo-sub {
  font-size: 11px;
  color: var(--color-text-muted);
}

.intro-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}

.intro-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
}

/* 下拉子分類選單（hover / 鍵盤 focus 展開） */
.intro-nav-drop {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  flex-direction: column;
  min-width: 150px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 6px 0;
  z-index: 101;
}

.intro-nav-item:hover .intro-nav-drop,
.intro-nav-item:focus-within .intro-nav-drop {
  display: flex;
}

.intro-nav-drop a {
  padding: 8px 16px;
  border-radius: 0;
  font-size: 13px;
}

.intro-nav a {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.intro-nav a:hover,
.intro-nav a.active {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

/* 租賃專區：細框藥丸低調強調，與文字式分類 tab 區隔 */
.intro-nav a.nav-rental {
  border: 1.5px solid var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: 600;
  margin-left: 8px;
}

.intro-nav a.nav-rental:hover,
.intro-nav a.nav-rental.active {
  background: var(--color-primary-pale);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 靠右對齊後，最末幾個 tab 的下拉選單改靠右展開，避免超出視窗 */
.intro-nav-item:nth-last-child(-n+2) .intro-nav-drop {
  left: auto;
  right: 0;
}

/* 僅供螢幕閱讀器與 SEO 的隱藏標題 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.intro-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.intro-header-phone:hover {
  background: var(--color-primary-dark);
  color: white;
}

.intro-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.intro-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.intro-nav-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(76vw, 290px);
  background: var(--color-surface);
  box-shadow: -10px 0 30px rgba(0,0,0,0.20);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 200;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}

/* 半透明遮罩（點擊可關閉，見 NAV_JS） */
.intro-nav-mobile::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: min(76vw, 290px); /* 只蓋抽屜以外的區域 */
  background: rgba(30, 15, 6, 0.38);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.intro-nav-mobile.open {
  transform: none;
  visibility: visible;
}

.intro-nav-mobile.open::before {
  opacity: 1;
}

.intro-nav-mobile a {
  display: block;
  padding: 13px 6px;
  font-size: 15px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
}

.intro-nav-mobile a:last-child {
  border-bottom: none;
}

.intro-nav-mobile a.mob-home {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 16px;
  padding-top: 6px;
}

.intro-nav-mobile a.nav-rental {
  color: var(--color-primary);
  font-weight: 700;
}

.intro-nav-mobile a:hover {
  color: var(--color-primary);
}

/* ── Hero ── */
.intro-hero {
  min-height: 62vh;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 64px;
  position: relative;
  overflow: hidden;
}

.intro-hero-inner {
  max-width: 640px;
}

.intro-hero-logo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.intro-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary-pale);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  padding: 4px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-family: var(--font-heading);
  margin-bottom: 20px;
}

.intro-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 5vw, 46px);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 12px;
}

.intro-hero-sub {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
  line-height: 1.7;
}

.intro-hero-values {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.intro-hero-values span {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 5px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-heading);
}

.intro-hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: white;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast);
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.30);
}

.btn-hero-primary:hover {
  background: var(--color-primary-dark);
  color: white;
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  padding: 11px 26px;
  border-radius: var(--radius-md);
  font-size: 15px;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.btn-hero-outline:hover {
  background: var(--color-primary-pale);
}

/* ── Sections ── */
.intro-section {
  padding: 68px 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}

.intro-section-alt {
  background: var(--color-bg);
}

.intro-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Section headings ── */
.intro-heading {
  text-align: center;
  margin-bottom: 40px;
}

.intro-heading-label {
  display: inline-block;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--color-primary-rgb), 0.20);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.intro-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.intro-heading p {
  font-size: 15px;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.85;
}

/* ── About ── */
.intro-about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.intro-about-label {
  display: inline-block;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--color-primary-rgb), 0.20);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

.intro-about-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 18px;
  color: var(--color-text-primary);
}

.intro-about-text p {
  color: var(--color-text-secondary);
  line-height: 1.9;
  margin-bottom: 14px;
  font-size: 15px;
}

.intro-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

/* Classic fresh-grad left-border style */
.intro-value-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-primary-pale);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.intro-value-icon {
  width: 34px;
  height: 34px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  border: 1px solid var(--color-border-light);
}

.intro-value-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.intro-value-text span {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* About right side */
.intro-store-strip {
  display: flex;
  height: 280px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.intro-store-strip img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.82) saturate(0.85);
  transition: flex 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease;
  cursor: pointer;
}

.intro-store-strip img:hover {
  flex: 3;
  filter: brightness(1) saturate(1);
}

.intro-store-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.intro-store-photos img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  filter: brightness(0.95);
  transition: filter var(--transition-base);
}

.intro-store-photos img:hover {
  filter: brightness(1);
}

/* Stat cards */
.intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.intro-stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px 12px;
  text-align: center;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.intro-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 8px;
}

.intro-stat-num sup {
  font-size: 18px;
  vertical-align: super;
}

.intro-stat-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Services ── */
.intro-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.intro-service-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.intro-service-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.intro-service-icon {
  width: 60px;
  height: 60px;
  background: var(--color-primary-pale);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--color-primary);
}

.intro-service-icon-img {
  width: 110px;
  height: 110px;
  background: none;
  border: none;
  border-radius: 0;
}

.intro-service-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intro-service-card h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.intro-service-card p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.85;
}

/* ── Equipment ── */
.intro-equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.intro-equipment-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px 14px 16px;
  text-align: center;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.intro-equipment-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

.intro-equipment-photo {
  width: 100%;
  height: 190px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.intro-equipment-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

.intro-equipment-card:hover .intro-equipment-photo img {
  transform: scale(1.05);
}

.intro-equipment-card h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-text-primary);
}

.intro-equipment-card p {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ── Reviews ── */
.intro-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.intro-review-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intro-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.intro-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--color-primary-pale);
}

.intro-review-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.intro-review-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.intro-review-stars {
  color: var(--color-primary-light);
  font-size: 14px;
  letter-spacing: 2px;
}

.intro-review-star-empty {
  color: var(--color-border);
}

.intro-review-text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  flex: 1;
  border-top: 1px solid var(--color-border-light);
  padding-top: 12px;
}

.intro-review-time {
  font-size: 12px;
  color: var(--color-text-muted);
}

.intro-reviews-cta {
  text-align: center;
}

.intro-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-primary);
  padding: 8px 20px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.intro-reviews-link:hover {
  background: var(--color-primary);
  color: white;
}

/* ── Footer ── */
.intro-footer {
  background: var(--color-footer-bg);
  color: rgba(255,255,255,0.62);
  padding: 30px 24px 14px;
}

.intro-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.intro-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.intro-footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 社群／購物連結：圓形小圖示 */
.intro-footer-social {
  display: flex;
  gap: 10px;
}

.intro-footer .intro-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  transition: background var(--transition-fast);
}

/* hover：底色轉各服務的品牌色，圖示維持白色 */
.intro-footer .intro-footer-social a:hover {
  background: var(--color-primary);
  color: #fff;
}

.intro-footer .intro-footer-social a[aria-label="LINE"]:hover { background: #06C755; }
.intro-footer .intro-footer-social a[aria-label="蝦皮商城"]:hover { background: #EE4D2D; }
.intro-footer .intro-footer-social a[aria-label="Facebook"]:hover { background: #1877F2; }

/* 電話與位置圖示僅在手機版顯示（桌面已有文字欄位） */
.intro-footer-social a.intro-footer-social-mobile {
  display: none;
}

/* 關於我們連結：桌面在社群圖示下方；手機版移至營業時間右側 */
.intro-footer-about {
  font-size: 13px;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.intro-footer-about:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

.intro-footer-about-mobile {
  display: none;
}

.intro-footer-contact-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 頁尾地圖（桌面） */
.intro-footer-map iframe {
  display: block;
  width: 280px;
  height: 150px;
  border: 0;
}

.intro-footer-brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.15);
}

.intro-footer-brand-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
}

.intro-footer-col h4 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}

.intro-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.intro-footer-col li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.58);
}

.intro-footer-col li svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.45;
}

.intro-footer-col a {
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.intro-footer-col a:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

.intro-footer-hours li {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  gap: 8px;
}

.fh-day {
  min-width: 5.5em;
  white-space: nowrap;
}

.fh-time {
  white-space: nowrap;
}

.intro-footer-bottom {
  max-width: 1100px;
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

/* ── Equipment card clickable ── */
.intro-equipment-card[data-gallery] {
  cursor: pointer;
}

.intro-equipment-more {
  display: inline-block;
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 5px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.intro-equipment-card:hover .intro-equipment-more {
  opacity: 1;
}

.intro-equipment-cat-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-pale);
  border: 1px solid rgba(var(--color-primary-rgb), 0.30);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.intro-equipment-cat-link:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ── Equipment slide-up transition ── */
.intro-equip-wrapper {
  position: relative;
  overflow: hidden;
}

#equip-overview-panel {
  transition: opacity 0.28s ease, transform 0.32s ease;
}

#equip-detail-panel {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: var(--color-surface);
  transform: translateY(48px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease;
}

.intro-equip-wrapper.show-detail #equip-overview-panel {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

.intro-equip-wrapper.show-detail #equip-detail-panel {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Equipment detail header ── */
.intro-equip-detail-header {
  margin-bottom: 32px;
}

.intro-equip-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.intro-equip-bc-parent {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.intro-equip-bc-parent:hover {
  color: var(--color-primary);
}

.intro-equip-bc-sep {
  font-size: clamp(16px, 2.2vw, 24px);
  color: var(--color-border);
  user-select: none;
}

.intro-equip-bc-current {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 600;
  color: var(--color-text-primary);
}

.intro-equip-note {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ── Slim hero（首頁：重點讓給聯絡資訊與商品目錄）── */
.intro-hero-slim {
  min-height: 0;
  padding: 96px 24px 48px;
}

.intro-hero-slim .intro-hero-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
}

.intro-hero-slim .intro-hero-sub {
  margin-bottom: 24px;
}

/* ── 內頁標題區（/about/ 等子頁）── */
.intro-subhero {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: calc(var(--header-total) + 40px) 24px 40px;
}

.intro-subhero h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 10px;
}

.intro-subhero p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.intro-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.intro-crumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.intro-crumb a:hover {
  color: var(--color-primary);
}

/* ── 首頁分類目錄卡 ── */
.intro-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.intro-cat-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px 20px 16px;
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.intro-cat-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 分類卡：名稱旁小圖示 + 子分類標籤（無圖片，資訊清楚不雜亂） */
.intro-cat-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.intro-cat-ic-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  flex-shrink: 0;
}

.intro-cat-card h3 .intro-cat-count {
  margin-left: auto;
}

.intro-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  flex: 1;
  align-content: flex-start;
}

.intro-cat-chip {
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.intro-cat-chip-more {
  color: var(--color-text-muted);
}

.intro-cat-card h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.intro-cat-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
  flex: 1;
}

/* ── 首頁：熱銷精選輪播 ── */
.home-feat {
  margin-bottom: 44px;
}

.carousel-wrap {
  position: relative;
}

.carousel-wrap .car-prev,
.carousel-wrap .car-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.carousel-wrap .car-prev { left: -14px; }
.carousel-wrap .car-next { right: -14px; }

.carousel-wrap .car-prev:hover,
.carousel-wrap .car-next:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.home-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px;
  scrollbar-width: none;   /* Firefox：隱藏滾動條 */
}

.home-carousel::-webkit-scrollbar {
  display: none;           /* Chrome / Safari / Edge */
}

.home-carousel .cat-card {
  scroll-snap-align: start;
}

/* ── 首頁版位 ──
   頁首已改為捲動自動收合，不再需要逐屏滿版（100vh）設計；
   各區以一般文章式間距自然銜接 */
.home-screen1 {
  background: var(--color-bg);  /* 與商品分類區（home-screen2）同底色 */
}

/* 提高權重蓋過 catalog.css 的 .cat-section padding */
.cat-section.home-screen1 {
  padding: 32px 16px 44px;
}

/* 首屏標題區 */
.home-hero-head {
  margin-bottom: 18px;
}

.home-hero-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  border: 3px solid var(--color-primary-pale);
  box-shadow: var(--shadow-card);
}

.home-hero-head h1 {
  font-size: clamp(28px, 4.6vw, 40px);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.home-hero-tag {
  font-size: 16px;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.home-screen1 .home-feat {
  margin-bottom: 0;
}

.home-screen1 .cat-search {
  margin-bottom: 24px;
}

.home-screen1 .cat-cat-head {
  margin-bottom: 12px;
}

.home-screen2 {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  scroll-margin-top: var(--header-total); /* 錨點落點貼齊 header */
}

.cat-section.home-screen2 {
  padding: 28px 16px 56px;
}

.home-cats {
  margin-bottom: 0;
}

.home-cats .intro-cat-grid {
  gap: 18px;
}

.home-cats .intro-cat-card {
  padding: 28px 28px 22px;
  background: var(--color-surface);
}

.home-cats .intro-cat-card h3 {
  font-size: 21px;
}

.home-cats .intro-cat-card .intro-cat-count {
  font-size: 13px;
}

.home-cats .intro-cat-card p {
  font-size: 15px;
  line-height: 1.8;
}

.home-cats .intro-cat-more {
  font-size: 14px;
}

/* 首頁分類區：直接列各類的商品。純分類目錄在 /category/ */
.home-cat-products .cat-cat-block:last-child {
  margin-bottom: 24px;
}

.home-cat-all {
  text-align: center;
  margin: 0;
}

.home-cat-all a {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.home-cat-all a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
}

/* 分類頁子分類輪播：一次四格 */
.cat-sub-carousel {
  grid-auto-columns: calc((100% - 42px) / 4); /* 3 個 14px 間距 */
}


.intro-cat-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 8px;
}

.intro-cat-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.intro-cat-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.intro-cat-note {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 18px;
}

/* ── Footer 連結列 ── */
.intro-footer-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.intro-footer-links a {
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  text-decoration: none;
}

.intro-footer-links a:hover {
  color: #fff;
}

/* ── /about/ 頁尾 CTA ── */
.intro-backcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.intro-backcta h2 {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.intro-backcta p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ── Responsive ── */
@media (min-width: 901px) {
  .intro-nav-mobile { display: none; }
}

@media (max-width: 900px) {
  .intro-header-inner { padding: 0 16px; }
  .intro-infobar-hours { display: none; }
  .intro-nav,
  .intro-header-phone { display: none; }
  .intro-hamburger { display: flex; }
  .intro-about-layout { grid-template-columns: 1fr; gap: 36px; }
  .intro-services-grid { grid-template-columns: 1fr; }
  .intro-equipment-grid { grid-template-columns: 1fr 1fr; }
  .intro-cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-sub-carousel { grid-auto-columns: calc((100% - 14px) / 2); }
  .intro-reviews-grid { grid-template-columns: 1fr; }
  .intro-backcta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .intro-footer-brand { display: none; }
  .intro-footer-inner { justify-content: center; }
  .intro-footer-brand-col { width: 100%; align-items: center; order: 9; }
  /* 手機版：電話與位置改為圖示（社群列內），文字欄位僅留營業時間；
     隱藏「聯絡資訊」標題與 FB／信箱圖示，關於我們移到營業時間右側 */
  .intro-footer-social a.intro-footer-social-mobile { display: inline-flex; }
  .intro-footer-social a.intro-footer-social-desktop { display: none; }
  .intro-footer-col li.intro-footer-phone-li { display: none; }
  .intro-footer-loc-col { display: none; }
  .intro-footer-map-col { display: none; }
  .intro-footer-contact-h4 { display: none; }
  .intro-footer-about-desktop { display: none; }

  .home-carousel { grid-auto-columns: 200px; }
  .cat-sub-carousel { grid-auto-columns: 200px; }
  .intro-infobar-inner { gap: 14px; font-size: 12px; padding: 0 12px; }
  .intro-infobar-addr,
  .intro-infobar-shopee .intro-infobar-shopee-text,
  .intro-infobar-line .intro-infobar-line-text { display: none; }
  .intro-section { padding: 52px 16px; }
  .intro-hero { padding: 90px 16px 52px; }
  .intro-hero-slim { padding: 84px 16px 40px; }
  .intro-subhero { padding: calc(var(--header-total) + 24px) 16px 32px; }
  .intro-stats { grid-template-columns: 1fr 1fr; }
  .intro-equipment-grid { grid-template-columns: 1fr 1fr; }
  .intro-cat-grid { grid-template-columns: 1fr; }
  .intro-footer-bottom { flex-direction: column; text-align: center; }
  .intro-backcta { padding: 24px 20px; }
}