/*
Theme Name: Li-Dah Construction Machinery
Theme URI: https://lcmahine.com
Author: Li-Dah Construction Machinery
Author URI: https://lcmahine.com
Description: Apple-inspired theme for Li-Dah aerial work platform rental. Multi-brand equipment catalog, knowledge center, merchandise shop. GEO/AEO optimized.
Version: 4.61
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lidah
Requires at least: 6.0
Requires PHP: 7.4
*/

/* v4.44: WP 標準 a11y class — 視覺隱藏但螢幕閱讀器 / Googlebot 讀得到。
   用於 h1 加品牌名+服務動詞(出租/租賃/維修/買賣)等 SEO + a11y 雙用文字。 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ============================================
   DESIGN SYSTEM
   ============================================ */
:root {
  --color-primary: #E8630A;
  --color-primary-hover: #D05A09;
  --color-text: #1D1D1F;
  --color-text-secondary: #86868B;
  --color-text-tertiary: #ABABAF;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F5F5F7;
  --color-bg-tertiary: #FBFBFD;
  --color-border: rgba(0,0,0,0.08);
  --color-border-hover: rgba(0,0,0,0.16);
  --color-dark: #1D1D1F;
  --color-dark-secondary: #2C2C2E;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 980px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 10px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.14);
  /* v4.51: 改 Apple 官方 ease-in-out bezier(實爬 apple.com/tw store-home.css)*/
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.6, 1);
  --transition-fast: 0.15s cubic-bezier(0.25, 0.1, 0.3, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-width: 1440px;
  --nav-height: 48px;
}

/* ============================================
   GRADIENT TEXT (Apple-style)
   ============================================ */
.text-gradient { background: linear-gradient(90deg, #E8630A 0%, #F59E0B 50%, #E8630A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--apple { background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 20%, #D946EF 40%, #EC4899 60%, #F97316 80%, #EAB308 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--blue { background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--green { background: linear-gradient(90deg, #059669 0%, #2DD4BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--purple { background: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; }

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 60px 0; }
.section--alt { background: var(--color-bg); }
.section__title { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; }
.section__subtitle { font-size: 17px; color: var(--color-text-secondary); margin-bottom: 32px; }

/* ============================================
   NAVIGATION
   ============================================ */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(251,251,253,0.88); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--color-border); height: var(--nav-height); }
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-nav__logo { font-size: 16px; font-weight: 600; color: var(--color-text); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.site-nav__logo img, .site-nav__logo-img { height: 36px; width: auto; max-width: 160px; object-fit: contain; filter: brightness(0) saturate(100%) invert(44%) sepia(96%) saturate(1200%) hue-rotate(4deg) brightness(92%); }
.site-nav__mob-merch { display: none; }

.site-nav__menu { display: flex; align-items: center; gap: 24px; }
.site-nav__link { font-size: 14px; color: var(--color-text-secondary); transition: color 0.2s; }
.site-nav__link:hover, .site-nav__link--active { color: var(--color-text); }
.site-nav__cta { font-size: 13px; color: #fff; background: var(--color-primary); padding: 6px 16px; border-radius: var(--radius-pill); transition: background 0.2s; }
.site-nav__cta:hover { background: var(--color-primary-hover); }
.mob-tab { display: none; }

/* ============================================
   HERO / HOMEPAGE
   ============================================ */
.hero { text-align: center; padding: 48px 0 0; }
.hero__title { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; }
.hero__subtitle { font-size: 17px; color: var(--color-text-secondary); margin-top: 8px; }
.hero__cats { display: flex; gap: 32px; justify-content: center; margin-top: 28px; }
.hero__cat { text-align: center; cursor: pointer; transition: transform 0.2s; }
.hero__cat:hover { transform: scale(1.06); }
.hero__cat-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-bg); box-shadow: var(--shadow-card); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; }
.hero__cat:hover .hero__cat-icon { box-shadow: var(--shadow-card-hover); }
.hero__cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.hero__cat-name { font-size: 17px; }

/* ============================================
   HORIZONTAL SCROLL
   ============================================ */
.hscroll-wrap { position: relative; padding: 32px 0; }
.hscroll-wrap__title { font-size: 24px; font-weight: 600; padding-inline: max(48px, calc((100vw - 1200px) / 2 + 48px)); padding-block: 0 16px; }
.hscroll { display: flex; gap: 16px; padding-inline: max(48px, calc((100vw - 1200px) / 2 + 48px)); padding-block: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-behavior: smooth; cursor: grab; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll:active { cursor: grabbing; }
.hscroll-arrow { position: absolute; top: 50%; transform: translateY(-30%); width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; font-size: 16px; color: var(--color-text-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: var(--transition-base); }
.hscroll-arrow:hover { background: var(--color-bg-secondary); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.hscroll-arrow--left { left: 8px; }
.hscroll-arrow--right { right: 8px; }

/* Scroll Card */
.scroll-card { flex: 0 0 220px; border-radius: var(--radius-xl); overflow: hidden; scroll-snap-align: start; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; background: var(--color-bg); box-shadow: var(--shadow-card); }
/* Big variant — used for 車隊集錦 (橫向形象 banner，gradient 底 + 大 icon) */
.scroll-card--big { flex: 0 0 480px; }
.scroll-card--big .scroll-card__image { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.scroll-card--big .scroll-card__name { font-size: 22px; }
.scroll-card--big .scroll-card__tag { font-size: 15px; }
/* 漸層形象底 + 大 icon（壓在中央） */
.scroll-card--big .scroll-card__hero {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--card-bg-1, #1D1D1F) 0%, var(--card-bg-2, #2C2C2E) 100%);
  color: #fff;
  transition: transform 0.5s ease;
}
.scroll-card--big:hover .scroll-card__hero { transform: scale(1.04); }
.scroll-card--big .scroll-card__hero-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; font-weight: 600;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.scroll-card--big .scroll-card__hero-icon { font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); }
.scroll-card--big .scroll-card__hero-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.scroll-card--all .scroll-card__hero { background: linear-gradient(135deg, #1D1D1F 0%, #2C2C2E 100%); }
.scroll-card--all .scroll-card__hero-icon { font-size: 40px; }
@media (max-width: 640px) {
  .scroll-card--big { flex: 0 0 320px; }
  .scroll-card--big .scroll-card__name { font-size: 18px; }
  .scroll-card--big .scroll-card__hero-icon { font-size: 48px; }
  .scroll-card--big .scroll-card__hero-title { font-size: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .scroll-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-card-hover); }
}
.scroll-card__image { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.scroll-card__image img { width: 100%; height: 100%; object-fit: cover; }
.scroll-card__model { font-size: 32px; font-weight: 600; opacity: 0.85; color: #fff; transition: var(--transition-bounce); }
@media (hover: hover) and (pointer: fine) {
  .scroll-card:hover .scroll-card__model { transform: scale(1.08) translateY(-3px); }
}
.scroll-card__badge { position: absolute; top: 10px; left: 10px; font-size: 12px; padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(6px); }
.scroll-card__body { padding: 14px 16px; }
.scroll-card__name { font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.scroll-card__tag { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 6px; }
.scroll-card__spec { font-size: 16px; }
.scroll-card__spec span { color: var(--color-primary); font-weight: 600; }

/* Gradient backgrounds for scroll cards */
.bg-dark { background: linear-gradient(155deg,#1D1D1F,#3A3A3C); }
.bg-blue { background: linear-gradient(155deg,#0066CC,#338ADD); }
.bg-green { background: linear-gradient(155deg,#1D7A3C,#2DA050); }
.bg-purple { background: linear-gradient(155deg,#5856D6,#7B79E0); }
.bg-red { background: linear-gradient(155deg,#CC2936,#E04450); }
.bg-orange { background: linear-gradient(155deg,#E8630A,#F08030); }
.bg-charcoal { background: linear-gradient(155deg,#2C2C2E,#48484A); }

/* ============================================
   EQUIPMENT CARD (GRID)
   ============================================ */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.equip-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; box-shadow: var(--shadow-card); }
@media (hover: hover) and (pointer: fine) {
  .equip-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-card-hover); }
  .equip-card:hover .equip-card__model-text { transform: scale(1.12) translateY(-3px); color: var(--color-text); }
}
.equip-card__image { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 14px; }
.equip-card__image img { width: 100%; height: 100%; object-fit: contain; }
.equip-card__model-text { font-size: 20px; font-weight: 600; color: var(--color-text-secondary); transition: var(--transition-bounce); }
.equip-card__type-badge { position: absolute; top: 8px; left: 8px; font-size: 16px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; }
.equip-card__body { padding: 12px 14px; }
.equip-card__meta { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 2px; }
.equip-card__name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.equip-card__specs { font-size: 14px; display: flex; gap: 12px; }
.equip-card__specs .label { color: var(--color-text-secondary); }
.equip-card__specs .value { font-weight: 600; }

/* ============================================
   IMAGE CAROUSEL
   ============================================ */
.carousel { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.carousel__slides { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel__slides::-webkit-scrollbar { display: none; }
.carousel__slide { min-width: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; }
.carousel__slide img { width: 100%; height: auto; display: block; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--color-text-secondary); transition: background 0.2s; z-index: 2; }
.carousel__arrow:hover { background: rgba(255,255,255,0.95); }
.carousel__arrow--left { left: 8px; }
.carousel__arrow--right { right: 8px; }
.carousel__dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: background 0.2s; }
.carousel__dot--active { background: var(--color-primary); }
.carousel__thumbs { display: flex; gap: 8px; padding: 10px 0 0; }
.carousel__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: 0.5; transition: opacity 0.2s, border-color 0.2s; }
.carousel__thumb--active { opacity: 1; border-color: var(--color-primary); }
.carousel__thumb:hover { opacity: 0.8; }
.carousel__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================
   EQUIPMENT DETAIL
   ============================================ */
.equip-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.equip-detail__brand { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); margin-bottom: 4px; }
.equip-detail__title { font-size: 28px; font-weight: 600; margin-bottom: 6px; }
.equip-detail__tag { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 20px; }
.equip-detail__actions { margin-bottom: 24px; display: flex; gap: 10px; }
/* v4.52.4: Apple iPad Pro 風 hero — H1 區寬版掛頂左對齊 + 圖規 2 column */
.equip-hero { max-width: 920px; margin: 0 0 32px; padding-top: 8px; }
.equip-hero__eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 8px; }
.equip-hero__title { font-size: 48px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; margin: 0 0 12px; color: var(--color-text); }
.equip-hero__tag { font-size: 19px; line-height: 1.45; color: var(--color-text-secondary); margin: 0 0 22px; max-width: 600px; }
.equip-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.equip-detail--apple { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); align-items: start; }
.equip-detail--apple .equip-detail__media { background: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: 12px; }
.equip-detail--apple .equip-detail__specs { padding-top: 0; }
.equip-detail--apple .equip-detail__h2 { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 768px) {
  .equip-hero__title { font-size: 32px; letter-spacing: -0.018em; }
  .equip-hero__tag { font-size: 17px; }
  .equip-detail--apple { grid-template-columns: 1fr; gap: 20px; }
}
.btn-outline { font-size: 15px; padding: 9px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-primary); color: var(--color-primary); cursor: pointer; transition: var(--transition-base); display: inline-block; letter-spacing: -0.016em; }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-primary { font-size: 15px; padding: 9px 18px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; cursor: pointer; transition: background 0.2s; display: inline-block; letter-spacing: -0.016em; }
.btn-primary:hover { background: var(--color-primary-hover); }
/* v4.51: 中文不套西文字距(Apple 慣例:.button:lang(zh){letter-spacing:0}) */
:lang(zh) .btn-primary, :lang(zh) .btn-outline { letter-spacing: 0; }

/* Spec Table */
.spec-table { margin-top: 20px; }
.spec-table__title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.spec-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.spec-row:last-child { border-bottom: none; }
.spec-row__label { color: var(--color-text-secondary); }
.spec-row__value { font-weight: 600; text-align: right; }

/* ============================================
   MERCHANDISE CARD
   ============================================ */
.merch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.merch-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; box-shadow: var(--shadow-card); }
@media (hover: hover) and (pointer: fine) {
  .merch-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-card-hover); }
}
.merch-card__image { aspect-ratio: 1/1; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.merch-card__image img { width: 100%; height: 100%; object-fit: cover; }
.merch-card__body { padding: 12px 14px; }
.merch-card__name { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.merch-card__desc { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 6px; }
.merch-card__price { font-size: 16px; font-weight: 600; color: var(--color-primary); }

/* Merchandise Detail */
.merch-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.merch-detail__cat { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); margin-bottom: 4px; }
.merch-detail__title { font-size: 28px; font-weight: 600; margin-bottom: 6px; }
.merch-detail__price { font-size: 24px; font-weight: 600; color: var(--color-primary); margin-bottom: 14px; }
.merch-detail__desc { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 20px; }

/* ============================================
   ARTICLE CARD (KNOWLEDGE CENTER)
   ============================================ */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; box-shadow: var(--shadow-card); }
@media (hover: hover) and (pointer: fine) {
  .article-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-card-hover); }
}
.article-card__image { aspect-ratio: 16/10; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }
.article-card__time { position: absolute; top: 8px; left: 8px; font-size: 16px; padding: 3px 8px; border-radius: 6px; color: #fff; }
.article-card__body { padding: 16px; }
.article-card__title { font-size: 16px; font-weight: 600; line-height: 1.4; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Article Detail */
.article-content { max-width: 720px; margin: 0 auto; }
.article-content h1 { font-size: 28px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.article-content .meta { font-size: 17px; color: var(--color-text-secondary); margin-bottom: 24px; }
.article-content .featured-image { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16/9; background: var(--color-bg-secondary); }
.article-content .featured-image img { width: 100%; height: 100%; object-fit: cover; }
.article-body { font-size: 17px; line-height: 1.9; }
.article-body h2 { font-size: 20px; font-weight: 600; margin: 28px 0 12px; }
.article-body p { margin-bottom: 14px; }
.article-body .tip-box { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 17px; color: var(--color-text-secondary); line-height: 1.7; margin: 16px 0; }
.article-body .tip-box b, .article-body .tip-box strong { color: var(--color-text); font-weight: 600; }

/* ============================================
   FAQ (GEO/AEO)
   ============================================ */
.faq-section { margin-top: 32px; }
.faq-section__title { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px; }
.faq-item__question { padding: 14px 18px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--color-bg); transition: background 0.2s; }
.faq-item__question:hover { background: var(--color-bg-secondary); }
.faq-item__arrow { font-size: 16px; color: var(--color-text-secondary); transition: transform 0.2s; }
.faq-item--open .faq-item__arrow { transform: rotate(90deg); }
.faq-item__answer { padding: 0 18px 16px; font-size: 17px; color: var(--color-text-secondary); line-height: 1.7; display: none; }
.faq-item--open .faq-item__answer { display: block; }

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.about-intro__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 6px; }
.about-intro__heading { font-size: 24px; font-weight: 600; line-height: 1.3; margin-bottom: 12px; }
.about-intro__text { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; }
.about-intro__image { aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-secondary); }
.about-intro__image img { width: 100%; height: 100%; object-fit: cover; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.stat-card { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.stat-card__number { font-size: 28px; font-weight: 600; color: var(--color-primary); }
.stat-card__label { font-size: 16px; color: var(--color-text-secondary); margin-top: 4px; }

/* Timeline */
/* Timeline horizontal scroll cards */
.tl-hscroll-wrap { position: relative; margin-top: 24px; }
.tl-hscroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 max(24px, calc((100vw - 960px) / 2)); }
.tl-hscroll::-webkit-scrollbar { display: none; }
.tl-card { scroll-snap-align: start; flex-shrink: 0; width: 560px; height: 420px; border-radius: 20px; overflow: hidden; background-color: #1D1D1F; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 36px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.tl-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tl-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); z-index: 1; pointer-events: none; }
.tl-card__year { position: relative; z-index: 2; font-size: 40px; font-weight: 800; color: rgba(255,255,255,0.95); letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.tl-card__bottom { position: relative; z-index: 2; text-align: right; }
.tl-card__title { font-size: 26px; font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.tl-card__desc { font-size: 15px; color: rgba(255,255,255,0.85); margin-top: 8px; line-height: 1.5; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.tl-hscroll-arrows { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.tl-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-base); }
.tl-arrow:hover { background: var(--color-text); color: var(--color-bg); }

/* Founder */

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact-form label { font-size: 17px; display: block; margin-bottom: 5px; color: var(--color-text-secondary); }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 16px; background: var(--color-bg); color: var(--color-text); margin-bottom: 14px; transition: border-color 0.2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-primary); }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form .submit-btn { display: block; width: 100%; text-align: center; padding: 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.contact-form .submit-btn:hover { background: var(--color-primary-hover); }
.contact-info-card { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; }
.contact-info-card__title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.contact-info-item { margin-bottom: 12px; }
.contact-info-item__label { font-size: 17px; color: var(--color-text-secondary); letter-spacing: 0.04em; margin-bottom: 2px; }
.contact-info-item__value { font-size: 17px; font-weight: 600; }

/* Contact Page — Apple Style */
.ct-hero { padding: 80px 0 48px; text-align: center; }
.ct-hero__title { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-text); }
.ct-hero__sub { font-size: 17px; color: var(--color-text-secondary); margin-top: 16px; line-height: 1.7; }
.ct-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -20px; }
.ct-action-card { display: block; background: #fff; border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; color: var(--color-text); }
.ct-action-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.ct-action-card__icon { width: 56px; height: 56px; border-radius: 50%; background: #f5f5f7; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.ct-action-card--green .ct-action-card__icon { background: #e8f5e9; color: #2e7d32; }
.ct-action-card--blue .ct-action-card__icon { background: #e3f2fd; color: #1565c0; }
.ct-action-card__label { font-size: 16px; color: var(--color-text-secondary); letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
.ct-action-card__value { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.ct-action-card__hint { font-size: 16px; color: var(--color-text-secondary); }

.ct-info-block { margin-bottom: 28px; }
.ct-info-block__eyebrow { font-size: 16px; font-weight: 600; color: var(--color-primary); letter-spacing: 0.08em; margin-bottom: 8px; }
.ct-info-block__heading { font-size: 28px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; }
.ct-info-rows { display: flex; flex-direction: column; gap: 14px; }
.ct-info-row { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.ct-info-row__label { font-size: 16px; color: var(--color-text-secondary); font-weight: 600; letter-spacing: 0.04em; width: 50px; flex-shrink: 0; }
.ct-info-row__value { font-size: 17px; font-weight: 500; }

.ct-hours-block { margin-bottom: 28px; }
.ct-hours-grid { display: flex; flex-direction: column; gap: 10px; }
.ct-hours-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #fff; border-radius: 12px; }
.ct-hours-item__day { font-size: 16px; font-weight: 600; }
.ct-hours-item__time { font-size: 16px; color: var(--color-text-secondary); }
.ct-hours-item--highlight { background: var(--color-primary); color: #fff; }
.ct-hours-item--highlight .ct-hours-item__time { color: rgba(255,255,255,0.85); }

.ct-qr-block { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border-radius: 16px; }
.ct-qr-block__img { width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); }

.ct-photo-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; }

/* Contact overlay card — text on image */
.ct-overlay-card { border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; background-color: #1D1D1F; position: relative; min-height: 400px; display: flex; align-items: flex-end; }
.ct-overlay-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); border-radius: 20px; }
.ct-overlay-card__content { position: relative; z-index: 1; padding: 40px; width: 100%; }
.ct-overlay-rows { display: flex; flex-direction: column; gap: 10px; }
.ct-overlay-row { display: flex; align-items: baseline; gap: 16px; font-size: 15px; color: rgba(255,255,255,0.9); }
.ct-overlay-row__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5); min-width: 70px; }

.ct-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }

/* Apple-style big cards — text on image */
.ct-bigcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ct-bigcard { border-radius: 20px; overflow: hidden; position: relative; min-height: 360px; display: flex; align-items: flex-end; background-color: #1D1D1F; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: transform 0.2s; }
.ct-bigcard:hover { transform: translateY(-4px); }
.ct-bigcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ct-bigcard__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%); z-index: 1; pointer-events: none; }
.ct-bigcard__text { position: relative; z-index: 2; padding: 24px; width: 100%; }
.ct-bigcard__title { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.ct-bigcard__desc { font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.ct-feat-card { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; }
.ct-feat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.ct-feat-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); }
.ct-feat-card__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.ct-feat-card__desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner { background: var(--color-dark-secondary); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; top: -40%; right: -15%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(232,99,10,0.15), transparent 70%); }
.cta-banner__title { font-size: 22px; font-weight: 600; color: #fff; position: relative; margin-bottom: 6px; }
.cta-banner__text { font-size: 16px; color: rgba(255,255,255,0.5); position: relative; margin-bottom: 16px; }

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 16px; }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb span { margin: 0 6px; }

/* ============================================
   PILL FILTER
   ============================================ */
.filter-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
/* v4.52.4: filter-pills 一體式 segmented control(Apple iPad picker 風) */
/* v4.52.5: 加 slider span 提供 active 視覺(平滑滑動)+ JS replaceState 不污染 history */
.filter-pills {
  display: inline-flex; gap: 0; flex-wrap: nowrap;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-pill);
  padding: 4px;
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
}
.filter-slider {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.filter-slider.is-ready { opacity: 1; }
.filter-pill {
  position: relative; z-index: 1;
  font-size: 14px; font-weight: 500;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer; border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}
.filter-pill:hover { color: var(--color-text); }
.filter-pill--active {
  /* v4.52.5: 不再給 background — slider span 提供。only color/weight */
  color: var(--color-text);
  font-weight: 600;
}
.filter-pill--active:hover { color: var(--color-text); }
/* JS 未載入時 fallback:active pill 直接給白底(沒 slider 動畫) */
.filter-pills:not(.is-js-active) .filter-pill--active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
}
.brand-group-title { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.brand-group-title:first-of-type { margin-top: 16px; }
.filter-sort select { font-size: 16px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); }

/* ============================================
   VIEW MORE LINK
   ============================================ */
.view-more { text-align: center; margin-top: 20px; }
.view-more a { font-size: 15px; color: var(--color-primary); font-weight: 500; }
.view-more a:hover { text-decoration: underline; }

/* ============================================
   PAGINATION
   ============================================ */
.page-numbers { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.page-numbers a, .page-numbers span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text-secondary); border: 1px solid var(--color-border); transition: var(--transition-base); }
.page-numbers a:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.page-numbers .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-numbers .dots { border: none; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: 20px 0; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.site-footer__copy { font-size: 13px; color: var(--color-text-secondary); }
.site-footer__links { display: flex; gap: 16px; }
.site-footer__link { font-size: 13px; color: var(--color-text-secondary); }
.site-footer__link:hover { color: var(--color-text); }

/* Front-page service hscroll — 6 大卡 lifestyle 橫滾 (Apple Store 風 v4.24) */
.scroll-card.scroll-card--life {
  flex: 0 0 480px;
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  display: block;
}
.scroll-card--life:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.scroll-card--life .scroll-card__bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s ease;
}
.scroll-card--life:hover .scroll-card__bg-img { transform: scale(1.06); }
.scroll-card--life .scroll-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%);
}
.scroll-card--life .scroll-card__content {
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  z-index: 2;
}
.scroll-card--life .scroll-card__eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; opacity: 0.85; margin-bottom: 6px;
}
.scroll-card--life .scroll-card__title {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 8px;
}
.scroll-card--life .scroll-card__sub {
  font-size: 14px; line-height: 1.55; opacity: 0.92; margin-bottom: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scroll-card--life .scroll-card__cta {
  font-size: 13px; font-weight: 600;
}
@media (max-width: 640px) {
  .scroll-card.scroll-card--life { flex: 0 0 80vw; aspect-ratio: 3/4; border-radius: 18px; }
  .scroll-card--life .scroll-card__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.88) 100%); }
  .scroll-card--life .scroll-card__content { bottom: 24px; left: 22px; right: 22px; }
  .scroll-card--life .scroll-card__eyebrow { font-size: 10px; letter-spacing: 0.22em; margin-bottom: 8px; opacity: 0.95; }
  .scroll-card--life .scroll-card__title { font-size: 28px; line-height: 1.18; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.025em; }
  .scroll-card--life .scroll-card__sub { font-size: 13px; line-height: 1.6; opacity: 0.85; margin-bottom: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scroll-card--life .scroll-card__cta { font-size: 13px; opacity: 0.95; }
}

/* Front-page brand banner — 視覺斷點 + 形象訊號（深黑滿版） */
.brand-banner { padding: 96px 0; background: #1D1D1F; color: #fff; text-align: center; }
.brand-banner__eyebrow { font-size: 13px; letter-spacing: 0.15em; color: var(--color-primary); text-transform: uppercase; font-weight: 600; }
.brand-banner__title { font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.18; margin: 14px 0 12px; color: #fff; }
.brand-banner__sub { font-size: 16px; color: rgba(255,255,255,0.65); margin: 0 auto 48px; max-width: 560px; line-height: 1.7; }
.brand-banner__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; }
.brand-banner__stat-num { font-size: clamp(36px, 5vw, 48px); font-weight: 600; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1; }
.brand-banner__stat-label { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; }
@media (max-width: 640px) {
  .brand-banner { padding: 64px 0; }
  .brand-banner__title { margin-bottom: 8px; }
  .brand-banner__sub { font-size: 15px; margin-bottom: 36px; padding: 0 16px; }
  .brand-banner__stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}

/* Front-page equipment tabs — v4.52.9 改一體式 segmented + slider(對標 archive .filter-pills) */
.equip-tabs__pills-wrap { display: flex; justify-content: center; margin: 24px 0 32px; padding: 0 16px; }
.equip-tabs__pills {
  display: inline-flex; gap: 0; flex-wrap: nowrap;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-pill);
  padding: 4px;
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.equip-tabs__pills::-webkit-scrollbar { display: none; }
.equip-tabs__slider {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.equip-tabs__slider.is-ready { opacity: 1; }
.equip-tabs__pill {
  position: relative; z-index: 1;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast);
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.equip-tabs__pill:hover { color: var(--color-text); }
.equip-tabs__pill.is-active { color: var(--color-text); font-weight: 600; }
.equip-tabs__pill.is-active:hover { color: var(--color-text); }
.equip-tabs__panel { display: none; }
.equip-tabs__panel.is-active { display: block; animation: equipFadeIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes equipFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .equip-tabs__pill { padding: 7px 14px; font-size: 13px; }
}

/* List page ending — Why-us 4 cards (used on archive / blog list) */
/* 為什麼選立大 — 4 大 lifestyle 卡（跟首頁能幫你的同視覺，但 grid 不滑）v4.33 */
.why-grid-life {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.why-card-life {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  color: #fff;
}
.why-card-life:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.why-card-life__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s ease;
}
.why-card-life:hover .why-card-life__bg { transform: scale(1.06); }
.why-card-life__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%);
}
.why-card-life__content {
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  z-index: 2;
}
.why-card-life__title {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 8px;
}
.why-card-life__sub {
  font-size: 14px; line-height: 1.55; opacity: 0.92;
}
@media (max-width: 980px) {
  .why-grid-life { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .why-card-life__title { font-size: 24px; }
}
/* v4.52.17: 手機版「為什麼選立大」由直向堆疊改為向右滑(橫向 carousel),維持圖片尺寸 */
@media (max-width: 600px) {
  .why-grid-life {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: 16px;
    padding-bottom: 6px;
  }
  .why-grid-life::-webkit-scrollbar { display: none; }
  .why-card-life {
    flex: 0 0 auto;
    width: 86%;               /* 近滿版,露出下一張一角提示可滑 */
    max-width: 360px;
    aspect-ratio: 16/9;       /* 維持原比例,圖片視覺尺寸近乎不變 */
    scroll-snap-align: start;
  }
}

/* Floating action buttons */
.fab-group { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.fab { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: var(--transition-base); text-decoration: none; }
.fab:hover { background: var(--color-text); color: var(--color-bg); border-color: transparent; }
/* v4.52: 電話 / LINE 醒目色 FAB(全頁 conversion CTA)*/
.fab--phone { background: var(--color-primary); color: #fff; border-color: transparent; }
.fab--phone:hover { background: var(--color-primary-hover); color: #fff; transform: scale(1.08); }
.fab--line { background: #06C755; color: #fff; border-color: transparent; }
.fab--line:hover { background: #059A45; color: #fff; transform: scale(1.08); }

/* ============================================
   RELATED SECTION
   ============================================ */
.related-section { margin-top: 40px; }
.related-section__title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ============================================
   404
   ============================================ */
.page-404 { text-align: center; padding: 80px 0; }
.page-404__title { font-size: 64px; font-weight: 700; color: var(--color-primary); }
.page-404__text { font-size: 18px; color: var(--color-text-secondary); margin: 12px 0 24px; }

/* ============================================
   SERVICES PAGE (Apple Support style)
   ============================================ */
.svc-hero { text-align: center; padding: 56px 0 48px; }
.svc-hero__title { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; }
.svc-hero__subtitle { font-size: 16px; color: var(--color-text-secondary); margin-top: 8px; }
.svc-hero__grid { display: flex; gap: 20px; justify-content: center; margin-top: 36px; }
.svc-hero__item { flex: 0 0 200px; background: var(--color-bg); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; box-shadow: var(--shadow-card); }
.svc-hero__item:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-card-hover); }
.svc-hero__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.svc-hero__name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.svc-hero__desc { font-size: 16px; color: var(--color-text-secondary); }

.svc-section { padding: 20px 0; }

/* The unified card — image + text in one rounded container */
.svc-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg-secondary); border-radius: 28px; overflow: hidden; min-height: 420px; }
.svc-card--reverse { direction: rtl; }
.svc-card--reverse > * { direction: ltr; }

.svc-card__visual { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-bg-tertiary); }
.svc-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__placeholder { font-size: 18px; color: var(--color-text-tertiary); }

.svc-card__body { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; min-width: 0; }
.svc-card__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 8px; text-transform: uppercase; }
.svc-card__title { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; margin-bottom: 14px; }
.svc-card__text { font-size: 16px; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 24px; }
.svc-card__features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.svc-card__feat { padding-left: 14px; border-left: 2px solid var(--color-primary); }
.svc-card__feat-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.svc-card__feat-desc { font-size: 16px; color: var(--color-text-secondary); line-height: 1.5; }
.svc-card__link { font-size: 16px; color: var(--color-primary); font-weight: 500; }
.svc-card__link:hover { text-decoration: underline; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .hero__title { font-size: 28px; }
  .section__title { font-size: 24px; }
  .container { padding: 0 16px; }
}

/* ============================================
   MOBILE FIX v4.2
   ============================================ */

/* Navigation mobile fix */
@media (max-width: 768px) {
  .site-nav { height: auto; min-height: var(--nav-height); padding: 0; }
  .site-nav .container { flex-wrap: wrap; padding: 0 16px; min-height: var(--nav-height); }
  .site-nav__logo { padding: 12px 0; }
  .site-nav__logo img, .site-nav__logo-img { height: 28px; max-width: 140px; }
  .site-nav__menu { display: none !important; }
  .site-nav__mob-merch { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; color: #1D1D1F; background: rgba(0,0,0,0.06); border-radius: 99px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; }
  .site-nav__mob-merch:active { transform: scale(0.85); }
  .site-footer { display: none; }

  /* Bottom Tab Bar — Apple iOS 26 Liquid Glass */
  .mob-tab {
    display: flex; position: fixed; bottom: 14px; left: 16px; right: 16px;
    z-index: 200; height: 58px;
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(240,240,245,0.68) 100%);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-radius: 99px; padding: 6px;
    overflow: visible; /* v4.58: 讓果凍泡泡凸出藥丸上下緣 */
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.9),
      0 8px 24px rgba(0,0,0,0.10);
    margin-bottom: env(safe-area-inset-bottom, 0px);
    isolation: isolate;
  }
  /* Soft glow under bubble — radial halo for depth */
  .mob-tab__rainbow {
    position: absolute; z-index: 0; top: 50%; left: 0;
    width: 80px; height: 80px; border-radius: 50%;
    transform: translate(var(--bubble-x, 0px), -50%);
    background: radial-gradient(circle, rgba(232,99,10,0.50) 0%, rgba(255,178,94,0.22) 45%, rgba(232,99,10,0) 100%); /* v4.58: 品牌橘果凍光暈 */
    filter: blur(12px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
    pointer-events: none;
  }
  .mob-tab:has(.mob-tab__item--active) .mob-tab__rainbow { opacity: 0.55; }
  /* Liquid glass bubble — slides to active item via JS (Apple dock style: neutral gray) */
  .mob-tab__bubble {
    position: absolute; z-index: 1; top: 50%; left: 0;
    /* v4.59: 氣球橢圓(50%),66px 高過 58px 的 bar → 上下各凸 4px */
    width: 60px; height: 66px; border-radius: 50%;
    transform: translate(var(--bubble-x, 0px), -50%);
    background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.28) 100%);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.95),
      inset 0 -6px 10px rgba(232,99,10,0.10),
      0 6px 20px rgba(0,0,0,0.14),
      0 1px 4px rgba(0,0,0,0.08);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
    will-change: transform;
  }
  .mob-tab:has(.mob-tab__item--active) .mob-tab__bubble { opacity: 1; }
  /* Tab items */
  .mob-tab__item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; padding: 4px 0;
    text-decoration: none; color: rgba(0,0,0,0.55); font-size: 10px; font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 2;
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
  }
  .mob-tab__item:active { transform: scale(0.85) translateY(1px); transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .mob-tab__item--active { color: var(--color-primary); font-weight: 600; } /* v4.58: 染品牌橘 */
  .mob-tab__icon { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
  .mob-tab__icon svg { width: 22px; height: 22px; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-width 0.3s ease, filter 0.4s ease; will-change: transform; }
  .mob-tab__item--active .mob-tab__icon svg { transform: scale(1.12) translateY(-1px); stroke-width: 1.9; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
  .mob-tab__item span:last-child { transition: letter-spacing 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .mob-tab__item--active span:last-child { letter-spacing: 0.03em; transform: translateY(-1px); }

  /* Bottom padding for floating tab bar */
  body { padding-bottom: 82px; }
  /* v4.52.1: 手機 FAB 預設隱藏(bottom tab 已有聯絡入口),只 contact 頁顯示;桌面不變 */
  .fab-group { display: none; }
  .fab-group--mobile-show { display: flex; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); right: 12px; gap: 8px; }
  .fab-group--mobile-show .fab--home, .fab-group--mobile-show .fab--top { display: none; }
  .fab-group--mobile-show .fab { width: 48px; height: 48px; }

  /* Hero mobile — more prominent */
  .hero { padding: 36px 0 8px; }
  .hero__title { font-size: 32px; letter-spacing: -0.03em; }
  .hero__subtitle { font-size: 16px; margin-top: 6px; }
  .hero__cats { gap: 16px; margin-top: 24px; }
  .hero__cat-icon { width: 56px; height: 56px; font-size: 20px; }
  .hero__cat-name { font-size: 17px; font-weight: 600; }

  /* Horizontal scroll — smooth & show 2+ cards */
  .hscroll-wrap { padding: 24px 0; }
  .hscroll-wrap__title { padding-inline: 16px; padding-block: 0 12px; font-size: 22px; }
  .hscroll { gap: 12px; padding: 0 16px; scroll-snap-type: none; }
  .scroll-card { flex: 0 0 160px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .scroll-card__image { aspect-ratio: 1/1; }
  .scroll-card__body { padding: 10px 12px; }
  .scroll-card__name { font-size: 17px; }
  .scroll-card__tag { font-size: 17px; margin-bottom: 4px; }
  .scroll-card__spec { font-size: 17px; }
  .scroll-card__badge { font-size: 16px; padding: 2px 8px; }
  .scroll-card__model { font-size: 24px; }

  /* Equipment grid — better cards */
  .equip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .equip-card { box-shadow: var(--shadow-card); border-radius: var(--radius-md); }
  .equip-card__body { padding: 10px 12px; }
  .equip-card__name { font-size: 17px; }
  .equip-card__meta { font-size: 16px; }
  .equip-card__specs { font-size: 17px; gap: 8px; }

  /* Merch grid */
  .merch-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .merch-card { box-shadow: var(--shadow-card); }
  .merch-card__body { padding: 10px 12px; }
  .merch-card__name { font-size: 17px; }

  /* Article grid — 1 column for readability */
  .article-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .article-card { display: grid; grid-template-columns: 120px 1fr; border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: none; }
  .article-card__image { aspect-ratio: 1/1; border-radius: var(--radius-md) 0 0 var(--radius-md); }
  .article-card__body { padding: 12px 14px; display: flex; align-items: center; min-width: 0; }
  .article-card__title { font-size: 15px; line-height: 1.4; }
  .article-card__time { font-size: 11px; padding: 2px 6px; }

  /* Section spacing */
  .section { padding: 36px 0; }
  .section__title { font-size: 24px; }
  .section__subtitle { font-size: 17px; margin-bottom: 20px; }
  .container { padding: 0 16px; }

  /* Detail pages */
  .equip-detail, .merch-detail { grid-template-columns: 1fr; gap: 20px; }
  .equip-detail__title, .merch-detail__title { font-size: 24px; }
  .about-intro { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .ct-hero { padding: 48px 0 32px; }
  .ct-hero__title { font-size: 32px; }
  .ct-hero__sub { font-size: 17px; }
  .ct-hero__sub br { display: none; }
  .ct-actions { grid-template-columns: 1fr; gap: 12px; margin-top: -10px; }
  .ct-action-card { padding: 20px; display: flex; align-items: center; gap: 16px; text-align: left; }
  .ct-action-card__icon { margin: 0; width: 48px; height: 48px; flex-shrink: 0; }
  .ct-action-card__value { font-size: 15px; word-break: break-all; }
  .ct-action-card__label { font-size: 14px; }
  .ct-action-card__hint { font-size: 13px; }
  .ct-info-row__value { font-size: 15px; word-break: break-all; }
  .ct-info-row { gap: 12px; }
  .ct-bigcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 8px; }
  .ct-bigcard { width: calc(100vw - 48px) !important; min-width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; height: 280px !important; min-height: 0 !important; flex-shrink: 0; scroll-snap-align: start; }
  .ct-bigcards::-webkit-scrollbar { display: none; }
  .ct-bigcard__text { padding: 20px; }
  .ct-bigcard__title { font-size: 18px; }
  .ct-overlay-card { min-height: 320px; }
  .ct-overlay-card__content { padding: 24px; }
  .ct-overlay-row { font-size: 14px; }
  .ct-overlay-row__label { min-width: 60px; font-size: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card__number { font-size: 24px; }

  /* Carousel */
  .carousel { border-radius: var(--radius-md); }
  .carousel__arrow { width: 28px; height: 28px; font-size: 16px; }
  .carousel__dot { width: 6px; height: 6px; }
  .carousel__thumb { width: 52px; height: 52px; border-radius: 8px; }

  /* Spec table */
  .spec-row { font-size: 16px; padding: 8px 0; }

  /* Footer */
  .site-footer .container { flex-direction: column; text-align: center; gap: 8px; }
  .site-footer__links { flex-wrap: wrap; justify-content: center; }

  /* Breadcrumb */
  .breadcrumb { font-size: 17px; }

  /* Filter bar */
  .filter-bar { flex-direction: column; align-items: flex-start; }
  .filter-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; }

  /* CTA banner — more impactful */
  .cta-banner { padding: 32px 20px; border-radius: var(--radius-lg); }
  .cta-banner__title { font-size: 20px; }
  .cta-banner__text { font-size: 17px; }

  /* Related */
  .related-section .equip-grid { grid-template-columns: repeat(2, 1fr); }

  /* Timeline */
  .tl-card { width: calc(100vw - 48px); height: 340px; padding: 24px; }
  .tl-card__year { font-size: 32px; }
  .tl-card__title { font-size: 20px; }
  .tl-card__desc { font-size: 14px; }
  .tl-hscroll { padding: 0 16px; }

  /* View more link */
  .view-more { margin-top: 16px; }
  .view-more a { font-size: 15px; padding: 8px 20px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); display: inline-block; }

  /* Pagination mobile */
  .pagination-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pagination-wrap .page-numbers { white-space: nowrap; }

  /* Services page mobile */
  .svc-hero { padding: 36px 0 28px; }
  .svc-hero__title { font-size: 28px; }
  /* v4.39: 手機 3 個並排不能滑 (縮小卡片塞 viewport) */
  .svc-hero__grid { flex-direction: row; justify-content: center; gap: 8px; padding: 0 12px; }
  .svc-hero__item { flex: 1 1 0; min-width: 0; padding: 16px 8px; border-radius: var(--radius-md); }
  .svc-hero__icon { width: 44px; height: 44px; margin: 0 auto 8px; }
  .svc-hero__icon svg { width: 24px; height: 24px; }
  .svc-hero__name { font-size: 17px; }
  .svc-section { padding: 16px 0; }
  .svc-card, .svc-card--reverse { grid-template-columns: 1fr; direction: ltr; border-radius: 20px; min-height: auto; }
  .svc-card__visual { min-height: 240px; }
  .svc-card__body { padding: 24px 20px; }
  .svc-card__title { font-size: 22px; }
  .svc-card__text { font-size: 17px; }
  .svc-card__features { gap: 10px; }
  .svc-card__link { font-size: 16px; padding: 10px 20px; background: var(--color-primary); color: #fff; border-radius: var(--radius-pill); display: inline-block; text-align: center; }
  .svc-card__link:hover { text-decoration: none; }

  /* FAQ mobile */
  .faq-item__question { padding: 12px 14px; font-size: 16px; }
  .faq-item__answer { padding: 0 14px 14px; font-size: 17px; }
}

/* ============================================
   v3.4 - MOBILE/TABLET/DESKTOP RULES
   ============================================ */

/* Tablet (769-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .equip-grid { grid-template-columns: repeat(3, 1fr); }
  .equip-detail, .merch-detail { gap: 24px; }
  .scroll-card { flex: 0 0 200px; }
  .container { padding: 0 20px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-actions { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ct-action-card { padding: 24px 16px; }
  .ct-action-card__value { font-size: 17px; word-break: break-all; }
  .svc-card__body { padding: 32px 28px; }
  .svc-card__title { font-size: 24px; }
  .ct-hero__title { font-size: 40px; }
}

/* ALL hscroll arrows hidden by default, carousel arrows visible */
.hscroll-arrow { display: none; }
.carousel__arrow { display: none; }

/* Show arrows on desktop */
@media (min-width: 769px) {
  .carousel__arrow { display: flex; }
}

/* Show hscroll arrows only on desktop with mouse */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .hscroll-arrow { display: flex; }
}

/* Touch scrolling for carousels */
.carousel__slides {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  touch-action: auto;
}

/* Desktop: hide scrollbar on hscroll but keep overflow for arrows */
@media (min-width: 1025px) {
  .hscroll { overflow: hidden; }
}

/* ============================================
   v4.36 fix (2026-05-11): 卡片橫滾區
   - 給 box-shadow 上下空間(原本被 overflow-x: auto 切到看起來「上下不完整」)
   - 鎖 y 軸:滑鼠滾輪不會把卡片區帶捲
   - 最後一張卡留 right margin:不被切
   保留原本的橫滾體驗
   ============================================ */
.hscroll {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: none;
}
.hscroll-wrap {
  padding: 16px 0 !important;
}
.hscroll > *:last-child {
  margin-right: 48px;
}

/* v4.45: 設備頁 features (intro + bullets,LGMG layout) + 規格表 H2 */
.equip-detail__h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary, #E8630A);
  display: inline-block;
}
@media (max-width: 720px) {
  .equip-detail__h2 { font-size: 20px; }
}

/* ============================================
   v4.52.11: PARTNER LOGOS — logo 原色 + Apple iPad Pro 配置頁卡片框
   (預設細灰邊 → hover 黑邊 + 陰影,對標 Apple 11吋/13吋 選項卡片)
   ============================================ */
.partner-logos__title {
  font-size: 24px; font-weight: 600;
  text-align: center;
  letter-spacing: -0.011em;
  margin: 0 0 32px;
  color: var(--color-text);
}
/* v4.52.13: partner logos 改 single row 橫向 carousel(mobile 滑/desktop 箭頭) */
.partner-scroller { max-width: 1200px; margin: 0 auto; }
.partner-logos {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 4px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.partner-logos::-webkit-scrollbar { display: none; }
/* v4.52.16: partner logos 改 Apple 正方形倒圓角卡 — 對齊 equip/merch/article 卡語言
   (aspect 5/2→1/1、去細邊框改柔陰影、hover 上浮;卡寬 240 + 水平內距 16 維持 logo 原寬度) */
.partner-logo {
  flex: 0 0 240px;             /* 卡寬同前,變正方形 240×240 */
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 16px;               /* 水平內距同前 → logo 內容寬 208px,大小不變 */
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-xl);            /* 20px Apple 倒圓角 */
  box-shadow: var(--shadow-card);             /* 與其他卡同一柔陰影 token */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  scroll-snap-align: start;
}
.partner-logo:hover {
  box-shadow: var(--shadow-card-hover);       /* 與其他卡同一 hover 陰影 */
  transform: translateY(-6px);                /* 上浮 */
}
.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* v4.52.11: 移除 grayscale,直接原色顯示 */
}
@media (max-width: 768px) {
  .partner-logos__title { font-size: 20px; margin-bottom: 24px; }
  .partner-logos { gap: 12px; padding: 4px 16px 8px; }
  .partner-logo { flex-basis: 180px; padding: 10px 14px; }
}

/* ============================================
   v4.52.12: PILL SCROLLER + 左右箭頭(desktop 點箭頭 scroll,mobile 滑)
   ============================================ */
.pill-scroller {
  position: relative;
  display: flex; align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
}
/* 內部 .filter-pills / .equip-tabs__pills 維持原樣 — 已是 inline-flex overflow-x:auto */

.pill-arrow {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.pill-arrow:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.pill-arrow:active { transform: scale(0.95); }
.pill-arrow[hidden] { display: none; }
@media (max-width: 768px) {
  /* v4.52.17: 手機版分類 pill 維持單排橫向滑動(不換行、不放大,保留原本俐落樣),
     改:靠左起始 + 首尾留可點空間 + scroll-snap → 滑到的最後一顆也點得到;
     並略縮內距讓首頁 5 顆機型一排排得滿、通常不必滑即可全點。 */
  .pill-arrow { display: none !important; }
  .pill-scroller { gap: 0; justify-content: flex-start; }
  .equip-tabs__pills-wrap { padding: 0 12px; justify-content: flex-start; }
  .equip-tabs__pills,
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    max-width: 100%;
    scrollbar-width: none;
  }
  .equip-tabs__pills::-webkit-scrollbar,
  .filter-pills::-webkit-scrollbar { display: none; }
  .equip-tabs__pill,
  .filter-pill { flex-shrink: 0; scroll-snap-align: start; }
  .equip-tabs__pill { padding: 7px 10px; font-size: 13px; }
  .filter-pill { padding: 6px 11px; font-size: 13px; }
}

/* ============================================
   v4.57: FAB 走道(機型頁規格表被右下浮動鈕遮住)
   容器 1440 滿版時,≤1600px 視窗 FAB(右 24px+寬 44px)
   會壓住 .spec-row__value 右對齊數值 → 讓規格欄讓出走道。
   ≤768px FAB 本來就隱藏,規則鎖 769px 起。
   ============================================ */
@media (min-width: 769px) and (max-width: 1600px) {
  .equip-detail__specs { padding-right: 56px; }
}

/* ============================================
   v4.58: iOS 26 Liquid Glass 果凍三招(mob-tab 只在 ≤768px 顯示)
   ============================================ */
@media (max-width: 768px) {
  /* 鏡面高光點:玻璃左上那顆小白光 */
  .mob-tab__bubble::before {
    content: ""; position: absolute; top: 7px; left: 14px;
    width: 24px; height: 11px; border-radius: 50%;
    background: rgba(255,255,255,0.9); filter: blur(3px);
    transform: rotate(-8deg);
  }
  /* 果凍 squash & stretch:點 tab 時壓扁拉長再回彈(footer.php JS 加 .is-jelly)
     scale 是獨立 property,不撞 transform 的 translate */
  @keyframes lidahJellyMove {
    0%   { scale: 1 1; }
    30%  { scale: 1.28 0.78; }
    60%  { scale: 0.88 1.12; }
    80%  { scale: 1.06 0.96; }
    100% { scale: 1 1; }
  }
  /* v4.59: 進場充氣 pop — 每次頁面載入(含快取秒開)泡泡都從小彈出來,
     解「第一次有彈跳、之後快取秒換頁動畫被切掉」的體感落差 */
  @keyframes lidahJellyPop {
    0%   { scale: 0.3 0.3; }
    55%  { scale: 1.16 1.16; }
    75%  { scale: 0.92 0.92; }
    100% { scale: 1 1; }
  }
  .mob-tab__bubble.is-pop { animation: lidahJellyPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards; }
  /* 點擊滑動的 jelly 要蓋過進場 pop,規則放後面 */
  .mob-tab__bubble.is-jelly { animation: lidahJellyMove 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
  /* 老瀏覽器沒 backdrop-filter:底色改近不透明,避免霧霧髒髒 */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mob-tab { background: linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(240,240,245,0.96) 100%); }
  }
}