.pinggo-main {
	width: 100%;
	max-width: 100%;
  overflow: hidden;
}

/* 2.9.190：手機「在 hero 上水平滑動 → 被瀏覽器當成上一頁」修正（第 1 層，CSS）。
   用戶 2026-09-23 回報：手機版首頁輪播往右滑會直接離開網站、回到瀏覽器分頁頁。
   根因：hero 是「不橫向捲動」的區塊，水平拖曳沒有任何人接手 → 瀏覽器拿去做自己的手勢
   （Chromium 的 swipe-to-navigate／WebKit 的邊緣滑動返回）。
   MDN：overscroll-behavior-x: contain|none 會關掉原生瀏覽器導航（含水平滑動上一頁）；
   這裡在**根節點**宣告，因為 swipe-to-navigate 是根捲動區的 overscroll，宣告在 hero 上沒有作用。
   只影響首頁（本檔僅在首頁載入），垂直捲動、水平卡片橫滑都不受影響。
   第 2 層（touchmove 接手）與第 3 層（history 保險）在 storefront.js。 */
html,
body.pinggo-storefront {
  overscroll-behavior-x: none;
}

.pinggo-main > section {
	width: 100%;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.pinggo-slideshow {
  position: relative;
  height: min(47vw, 670px);
  min-height: 520px;
  overflow: hidden;
  background: #eee;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  user-select: none;
}
.pinggo-slideshow__track,
.pinggo-slide,
.pinggo-slide__picture,
.pinggo-slide__picture img,
.pinggo-slide__video {
  width: 100%;
  height: 100%;
}
.pinggo-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.pinggo-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.pinggo-slide__picture img,
.pinggo-slide__video {
  object-fit: cover;
}
.pinggo-slide__picture.is-fit {
  background: #fff;
}
.pinggo-slide__picture.is-fit img {
  object-fit: contain;
}
/* ===== 2.9.92 影片輪播：滿版背景影片，畫面上只有我們的播放／暫停鈕 ===== */
.pinggo-slide--video .pinggo-slide__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0b0c;
}
.pinggo-slide__video .pinggo-slide__picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pinggo-slide__video-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
/* YouTube：把 16:9 播放器放大到鋪滿輪播（多出的部分裁掉），不會出現黑邊 */
.pinggo-slide__video-frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* 自架 mp4：原生 <video> 直接填滿裁切 */
.pinggo-slide__video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.pinggo-slide__video.is-ready .pinggo-slide__video-frame iframe,
.pinggo-slide__video.is-ready .pinggo-slide__video-frame video {
  opacity: 1;
}
/* 播放器逾時沒播起來（被擋／斷網）＝收起影片露出封面圖，不留黑畫面。 */
.pinggo-slide__video.is-blocked .pinggo-slide__video-frame iframe,
.pinggo-slide__video.is-blocked .pinggo-slide__video-frame video {
  opacity: 0;
}
/* 吃掉 YouTube 自己的懸停介面（標題列、logo、推薦影片） */
/* 2.9.97：布幕——用影片自己的 YouTube 首幀當海報，蓋住 iframe，
   直到 YouTube 回報「真的在播」才淡出；啟動轉圈、YouTube 控件、被擋的驗證頁都不會被看到，
   影片沒播起來時訪客看到的是首幀（而不是黑塊或破圖示）。 */
.pinggo-slide__video-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background-color: #0b0b0c;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.pinggo-slide__video.is-playing .pinggo-slide__video-curtain {
  opacity: 0;
}
.pinggo-slide__video-shield {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  cursor: default;
}
/* 2.9.117：影片輪播上的文案（參考 bodyguardz 排版：左側、垂直居中、左邊壓暗） */
.pinggo-slide__video .pinggo-slide__content {
  z-index: 4;
  top: 50%;
  right: auto;
  bottom: auto;
  left: var(--pinggo-video-left, 7%);
  max-width: 900px;
  /* 2.9.121 靠上一點 → 2.9.138 再往上 → 2.9.139 改由後台自訂器控制（--pinggo-video-shift）。 */
  transform: translateY(var(--pinggo-video-shift, -74%));
  /* 2.9.187：空白區不攔指標（原本是 auto，等於整塊吃掉點擊；本意就是「只有文字與按鈕可點」）。
     手機上這塊在 2.9.186 之後鋪滿整個 hero，「下一張」的分頁圓點（z-index 3）在它下面（z-index 4）
     → 圓點完全點不動（用戶 2026-09-22 回報；線上 elementFromPoint 實測命中的是 .pinggo-slide__content）。
     改 none 之後點擊會穿透到圓點，按鈕另外補回 auto（見下一條）。 */
  pointer-events: none;
  cursor: default;
}
/* 2.9.187：內容塊裡只有按鈕要能點（文字是純文字、點了也沒有行為）。 */
.pinggo-slide__video .pinggo-slide__content a {
  pointer-events: auto;
}
/* ① 自家 Logo（白字處理，配合深色影片） */
.pinggo-slide__brand {
  display: block;
  margin: 0 0 16px;
}
/* 提高權重：站上另有 `img{width:100%}` 之類的通用規則會蓋掉 max-width（2.9.119 線上實測抓到）。 */
.pinggo-slide__video .pinggo-slide__brand .pinggo-slide__brand-logo {
  display: block;
  width: auto;
  max-width: var(--pinggo-video-logo, 150px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
/* ② 品牌理念一句（不搶 Logo 的份量，但仍清楚可讀） */
.pinggo-slide__video .pinggo-slide__eyebrow {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  color: #fff;
  background: none;
  border-radius: 0;
  /* 2.9.170：理念文字與按鈕「同時拉開」——文字往上、按鈕往下各移動一半（--pinggo-video-gap 是淨增加的間距）。
     刻意不用 margin：這個內容塊是「垂直居中 ＋ translateY(-64%)」，加 margin 會把整塊撐高，
     文字會上移 1.14Δ 但按鈕只上移 0.14Δ（同向），越拉越奇怪。用 transform 則完全不影響版面。
     2.9.177：再加一個「只動文字」的微調 --pinggo-video-copy-shift（用戶要求「理念文案再單獨上移一點點」）——
     疊加在同一個 transform 上，按鈕完全不受影響（按鈕吃的是第 226 行那條）。 */
  transform: translateY(calc(var(--pinggo-video-gap, 0px) / -2 - var(--pinggo-video-copy-shift, 0px)));
  /* 2.9.121：用戶要求「理念文字要比 logo 大」→ 放大並加強一點字重。 */
  /* 2.9.128：用戶要求「再大一點、要換行才舒服」→ 放大並讓它自然折成兩行。 */
  /* 2.9.142：改回 33px（先前用 clamp 中段 vw 計算，桌機只剩約 26px，用戶反映變小）。 */
  font-size: var(--pinggo-video-copy, 33px);
  /* 2.9.121：用戶要求「理念文字要比 logo 大」→ 放大並加強一點字重。
     2.9.161：短句主張改走「細字重＋寬字距」→ 500 降到 300。
     2.9.163：用戶回饋「細字體第一眼好看，看久了和整體風格不匹配」→ 改回 **400**：
     站上 logo（圓潤飽滿）、按鈕（實心中等字重）都是 400-500 的重量級，300 的中文比周圍所有元素都輕，
     單看精緻、放在一起就「飄」。高級感改由尺寸與留白承擔，不再靠細筆畫。 */
  font-weight: 400;
  /* 2.9.159：用戶要求「文案換成斜體試一下」→ 先上 10°（中斜）。
     2.9.160：用戶「你看著來」→ 收斂到 8°。
     2.9.161：**移除偽斜體**——中文沒有真斜體，瀏覽器合成是機械扳斜，是廉價感的主要來源；
     改兩行短句＋細字重後不再需要斜體撐氣勢。 */
  font-style: normal;
  /* 2.9.163：字重回到 400 後筆畫變厚，行距要放鬆一點才不擠（1.42 → 1.5）。 */
  line-height: 1.5;
  /* 2.9.124：明確左對齊＋自然換行（先前用 26em 硬限制寬度，會斷在「值得｜留下的配件」中間）。 */
  text-align: left;
  /* 2.9.132：實測每字 34px。第一句「好的設計，不需要多說。」＝14 字。
     要讓它單獨成行、第二句全部換到第二行，行寬必須介於 14 字與「14 字＋第二句首字」之間：
     實測 494px 仍只收 13 字（瀏覽器對 CJK 的換行判定比帳面緊），故取 510px。 */
  max-width: 44em;
  text-wrap: pretty;
  /* 2.9.161：字距由 0.02em 拉到 0.07em。
     2.9.163：收到 0.04em——0.07em 配細字重是雜誌感，配上 400 字重則偏鬆散；
     0.04em 仍留一點呼吸，又落在中文正常範圍，和站上其他文字同一套節奏。 */
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* 給後台若把「主標題」也填了字的情況（保留大字，但不會擠壓） */
.pinggo-slide__video .pinggo-slide__video-title {
  margin: 0 0 20px;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
}
/* ③ 按鈕 */
/* 受控斷行：桌機在句號後斷一次；手機螢幕太窄時忽略這個斷行，讓它自然流動 */
.pinggo-slide__br {
  display: block;
  content: "";
  height: 0;
}
@media (max-width: 749px) {
  /* 2.9.155：用戶要求手機也維持同樣三行 → 不再隱藏固定換行，改為縮小字級避免過窄。 */
  /* 手機：字級縮到 0.5 倍，讓 10 字一行仍放得下（390px 寬） */
  .pinggo-slide__video .pinggo-slide__eyebrow {
    font-size: calc(var(--pinggo-video-copy, 44px) * 0.5);
  }

}
.pinggo-slide__video .pinggo-slide__cta {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  /* 2.9.170：與上方理念文字「同時拉開」——按鈕往下移動間距增量的一半（見 eyebrow 的說明）。 */
  transform: translateY(calc(var(--pinggo-video-gap, 0px) / 2));
}
.pinggo-slide__video .pinggo-slide__cta a {
  margin-left: 0;
}
.pinggo-slide__video .pinggo-slide__cta a {
  min-height: 46px;
  padding: 0 26px;
  background: var(--pinggo-slide-btn-bg, #fff);
  color: var(--pinggo-slide-btn-color, #111);
  font-size: 14px;
  text-shadow: none;
}
/* 2.9.171：輪播按鈕的「滑鼠移上去」底色由深灰 #2b2b2b 改成站上的藍 #3366ff（用戶 2026-09-22 指定）。
   ⚠ 這三處（本行下方、第 308 區塊、第 975 區塊）原本各自寫死 #2b2b2b，是同一類按鈕的同一個狀態，
   所以收斂成單一變數 --pinggo-btn-hover：以後要換色只改這一行（含 fallback 值）。
   首頁其他同款「查看詳情／立即選購」pill 按鈕不在輪播內，維持原本的深灰，本次不動。 */
.pinggo-slideshow {
  --pinggo-btn-hover: #3366ff;
}
.pinggo-slide__video .pinggo-slide__cta a:hover {
  background: var(--pinggo-btn-hover, #3366ff);
  color: #fff;
}

/* 2.9.183：hero 按鈕改「毛玻璃＋深字」（用戶 2026-09-22 從四個方案中選定）。
   ① 底色用 color-mix 把**後台配的按鈕底色**自動轉成 62% 半透明——不寫死白色，維持後台可配；
   ② blur(16px) + saturate(1.6) 做出玻璃柔邊；③ 用 inset box-shadow 當 1px 描邊（不用 border，避免高度多 2px 影響版面）。
   效能與可讀性考量（實測與取證見 CHANGELOG 同日條目）：
   - 整個區塊用 @supports 包住：**不支援 backdrop-filter 的瀏覽器完全走原本的實心白**，不會出現「透明到看不清」的情況；
   - 62% 白底在影片亮部仍撐得住黑字（對照方案 ② 的 14% 白＋白字在亮部會糊）。
   hover 行為不變（仍是站上的藍）。 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pinggo-slide__video .pinggo-slide__cta a {
    background: color-mix(in srgb, var(--pinggo-slide-btn-bg, #fff) 62%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pinggo-slide-btn-bg, #fff) 55%, transparent);
  }

  /* 2.9.184：hover 由「變藍」改成「提亮玻璃」（用戶 2026-09-22 從四方向中選定方案 ⓑ）：
     白度 62% → 82%、描邊加強、上浮 2px——回饋明確，同時保住毛玻璃的質感；文字色仍吃後台變數。
     放在 @supports 內＝不支援 backdrop-filter 的瀏覽器仍走上面那條「變藍」的 hover（實心白底的合理回饋）。 */
  .pinggo-slide__video .pinggo-slide__cta a:hover,
  .pinggo-slide__video .pinggo-slide__cta a:focus-visible {
    background: color-mix(in srgb, var(--pinggo-slide-btn-bg, #fff) 82%, transparent);
    color: var(--pinggo-slide-btn-color, #111);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pinggo-slide-btn-bg, #fff) 80%, transparent), 0 8px 22px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
  }
}
/* 左側壓暗，讓白字在亮畫面上也讀得清楚（不影響右側畫面） */
.pinggo-slide__video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  /* 2.9.128 品牌米色（取自品牌影片紙面 #bcb3a6）；2.9.138 再調淺一檔（用戶要求）。 */
  /* 2.9.142：用戶指定「只在左側加米色、顏色深一點、漸層早點淡出」。
     右半部（約 48% 之後）完全不蓋，影片維持原色；濃度仍由後台「左側米色濃度」控制。 */
  /* 2.9.145：用戶決定改回黑色壓暗（米色試過後不採用）。濃度仍由後台控制，預設 0.92。 */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, var(--pinggo-video-scrim, 0.92)) 0%,
    rgba(0, 0, 0, calc(var(--pinggo-video-scrim, 0.92) * 0.88)) 22%,
    rgba(0, 0, 0, calc(var(--pinggo-video-scrim, 0.92) * 0.6)) 42%,
    rgba(0, 0, 0, calc(var(--pinggo-video-scrim, 0.92) * 0.28)) 58%,
    rgba(0, 0, 0, 0) 72%
  );
  pointer-events: none;
}
.pinggo-slide__content {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 12%;
  left: 7%;
  max-width: 570px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.pinggo-slide__content p {
  margin: 0 0 8px;
  font-size: 18px;
}
.pinggo-slide__content h1,
.pinggo-slide__content h2 {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 1.08;
}
.pinggo-slide__content a,
.pinggo-pill {
  display: inline-flex;
  min-height: 44px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #080808;
  border-radius: 999px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
/* Slide CTA: hidden entirely when the slide has no link (template outputs no anchor). */
.pinggo-slide__content > a[href] {
  background: var(--pinggo-slide-btn-bg, #fff);
  color: var(--pinggo-slide-btn-color, #111);
  text-shadow: none; /* 2.9.91: 母層 .pinggo-slide__content 的白色文字陰影不要落在按鈕文字上 */
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.pinggo-slide__content > a[href]:hover,
.pinggo-slide__content > a[href]:active,
.pinggo-slide__content > a[href]:focus-visible {
  color: #fff;
  /* 2.9.171：與 hero 那顆共用同一個 hover 色（原本寫死 #2b2b2b）。 */
  background: var(--pinggo-btn-hover, #3366ff);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}
.pinggo-slide__content > a[href]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pinggo-slideshow__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 42px;
  height: 56px;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 30px;
  cursor: pointer;
}
.pinggo-slideshow__arrow:hover,
.pinggo-slideshow__arrow:active,
.pinggo-slideshow__arrow:focus {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.52) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.pinggo-slideshow__arrow:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -4px;
}
.pinggo-slideshow__arrow--prev {
  left: 12px;
}
.pinggo-slideshow__arrow--next {
  right: 12px;
}
.pinggo-slideshow__dots {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 18px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
/* 2.9.191：圓點在「純白底」的輪播上整顆消失（用戶 2026-09-23 附圖：iPad 類紙膜那張）。
   2.9.192：2.9.191 的「白點＋深色硬描邊」用戶回報「看得清了但好醜」→ 改成**自適應配色**：
   由 storefront.js 取樣「圓點那一條」的底色亮度，淺底（luma ≥ 0.62）時整個輪播加 `.is-light-bg`，
   圓點與箭頭一起換成深色；深底維持原樣（白點＋半透明白箭頭，也就是 2.9.190 的樣子）。
   顏色本身回到乾淨的實心圓點：沒有描邊、沒有底塊、沒有陰影。
   尺寸（7px）、間距（8px）、位置（bottom 18px）、桌機／手機同一組規則都沒有動。 */
.pinggo-slideshow__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 0;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.pinggo-slideshow__dots button.is-active {
  background: #fff;
}
/* 淺底：圓點換深色（0.42 對淺灰底仍有足夠對比，選中那顆實心黑） */
.pinggo-slideshow.is-light-bg .pinggo-slideshow__dots button {
  background: rgba(17, 17, 17, 0.42);
}
.pinggo-slideshow.is-light-bg .pinggo-slideshow__dots button.is-active {
  background: #111;
}
/* 淺底：箭頭跟著換（白色膠囊底＋深色箭頭，淺色畫面上才不會「白箭頭看不見」） */
.pinggo-slideshow.is-light-bg .pinggo-slideshow__arrow {
  color: #111 !important;
  background: rgba(255, 255, 255, 0.62) !important;
}
.pinggo-slideshow.is-light-bg .pinggo-slideshow__arrow:hover,
.pinggo-slideshow.is-light-bg .pinggo-slideshow__arrow:active,
.pinggo-slideshow.is-light-bg .pinggo-slideshow__arrow:focus {
  color: #111 !important;
  background: rgba(255, 255, 255, 0.88) !important;
}
.pinggo-device-section {
  padding: 42px 4% 52px;
}
.pinggo-device-section__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}
.pinggo-device-section__subheading {
  margin: 0 0 4px;
  color: #777;
  font-size: 14px;
  font-weight: 600;
}
.pinggo-device-section h2 {
  margin: 0 0 24px;
  font-size: 29px;
  line-height: 1.2;
}
.pinggo-device-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px clamp(32px, 4vw, 64px);
}
.pinggo-device-card {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.pinggo-device-card__media {
  display: flex;
  width: min(100%, 130px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  transition: transform 180ms ease;
}
.pinggo-device-card img {
  width: 62%;
  height: 62%;
  mix-blend-mode: multiply;
  object-fit: contain;
  transition: transform 180ms ease;
}
.pinggo-device-card:hover .pinggo-device-card__media {
  transform: translateY(-1px);
}
.pinggo-device-card:hover img {
  transform: scale(1.02);
}
.pinggo-device-card__title {
  margin-top: 11px;
  line-height: 1.35;
}
.pinggo-featured {
  padding: 0 4% 78px;
}
.pinggo-featured__title {
  margin: 0 0 28px;
  font-size: 31px;
  font-weight: 700;
}
.pinggo-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pinggo-feature-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1.03;
  background: #eee;
}
.pinggo-feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.pinggo-feature-card:hover img {
  transform: scale(1.015);
}
.pinggo-feature-card__content {
  padding-top: 18px;
}
.pinggo-feature-card__content h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.pinggo-feature-card__content p {
  margin: 4px 0 16px;
  font-size: 14px;
}
.pinggo-feature-card__content .pinggo-pill {
  min-height: 42px;
  padding: 0 22px;
}
.pinggo-new-arrivals {
  height: 788px;
  padding: 34px 0 0;
}
.pinggo-new-arrivals__inner {
  height: 100%;
  padding-left: 4%;
}
.pinggo-new-arrivals h2 {
  margin: 0 0 28px;
  font-size: 31px;
}
.pinggo-product-slider,
.pinggo-desk-products {
  display: flex;
  padding-right: 4%;
  overflow-x: auto;
  gap: 20px;
  scrollbar-width: none;
}
.pinggo-product-slider::-webkit-scrollbar,
.pinggo-desk-products::-webkit-scrollbar {
  display: none;
}
.pinggo-product-card {
  width: 275px;
  min-width: 275px;
}
.pinggo-product-card__media {
  display: block;
  overflow: hidden;
  width: 275px;
  height: 275px;
  background: #f4f4f4;
}
.pinggo-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pinggo-product-card__sale {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  padding: 4px 8px;
  color: #fff;
  background: #3366ff;
  font-size: 11px;
  font-weight: 600;
}
.pinggo-product-card__content {
  padding-top: 12px;
}
.pinggo-product-card__category,
.pinggo-product-card__category a {
  color: #777;
  font-size: 12px;
}
.pinggo-product-card h3 {
  min-height: 42px;
  margin: 5px 0 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.pinggo-product-card__price {
  font-size: 14px;
}
.pinggo-slider-progress {
  height: 2px;
  margin: 55px 4% 0 0;
  background: #e2e2e2;
}
.pinggo-slider-progress span {
  display: block;
  width: 9%;
  height: 2px;
  background: #777;
  transform-origin: left;
}
.pinggo-desk-banner {
  height: 615px;
  padding: 0 4%;
  overflow: hidden;
}
.pinggo-desk-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pinggo-desk-collection {
  min-height: 973px;
  padding: 52px 4% 76px;
}
.pinggo-desk-collection__copy {
  text-align: center;
}
.pinggo-desk-collection__copy > p {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
}
.pinggo-desk-collection__copy h2 {
  margin: 0 0 12px;
  font-size: 50px;
  line-height: 1.1;
}
.pinggo-desk-collection__copy > div:not(.pinggo-desk-collection__actions) {
  font-size: 17px;
  line-height: 1.45;
}
.pinggo-desk-collection__actions {
  display: flex;
  margin: 26px 0 92px;
  justify-content: center;
  gap: 10px;
}
.pinggo-desk-products {
  gap: 20px;
}
.pinggo-membership {
  display: grid;
  height: 384px;
  padding: 0 4%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.pinggo-membership__card {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  background: #222;
}
.pinggo-membership__tag {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.pinggo-membership__card--green .pinggo-membership__tag {
  background: #3366ff;
}
.pinggo-membership__card--member .pinggo-membership__tag {
  background: #111;
}
.pinggo-membership picture,
.pinggo-membership img {
  width: 100%;
  height: 100%;
}
.pinggo-membership img {
  object-fit: cover;
}
.pinggo-membership__card:after {
  position: absolute;
  inset: 50px 0 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 60%);
  content: "";
}
.pinggo-membership__content {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 34px;
  left: 34px;
}
.pinggo-membership__content strong {
  display: block;
  margin-bottom: 22px;
  font-size: 20px;
  font-weight: 500;
}
.pinggo-membership__content em {
  display: inline-flex;
  min-height: 42px;
  padding: 0 20px;
  align-items: center;
  color: #111;
  background: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.pinggo-editorial {
  padding: 145px 4% 115px;
}
/* 2.9.212／2.9.213（用戶：標題右側要有「閱讀更多」；黑膠囊太搶眼 → 改安靜的文字連結＋箭頭，
   參考 Shopify Dawn 的 link underlined-link 與 Apple 的「進一步了解 ›」）。 */
.pinggo-editorial__more {
  position: relative;
  display: inline-flex;
  padding-bottom: 4px;   /* 2.9.214：底線改由 ::after 畫一條通線（text-decoration 在 inline-flex 上會被 gap 切成兩段） */
  align-items: center;
  gap: 4px;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* 2.9.215／2.9.216（用戶：「位置再下來一點」→ 再截圖標注要更低）：
     靠標題底線再往下，落到標題列與卡片之間、距第一排卡片約 8px。 */
  align-self: flex-end;
  margin-bottom: -20px;
}
.pinggo-editorial__more::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.pinggo-editorial__more-arrow {
  display: inline-block;
  font-size: 19px;
  line-height: 0.9;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}
.pinggo-editorial__more:hover,
.pinggo-editorial__more:focus-visible {
  text-decoration: none;   /* 底線一律由 ::after 畫，避免斷線 */
}
.pinggo-editorial__more:hover::after,
.pinggo-editorial__more:focus-visible::after {
  transform: scaleX(1);
}
.pinggo-editorial__more:hover .pinggo-editorial__more-arrow,
.pinggo-editorial__more:focus-visible .pinggo-editorial__more-arrow {
  transform: translate(3px, -1px);
}
.pinggo-editorial__head {
  display: flex;
  margin: 0 0 28px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pinggo-editorial h2 {
  margin: 0;
  font-size: 31px;
}
.pinggo-editorial__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pinggo-editorial__card img {
  width: 100%;
  /* 2.9.209（用戶：「縮放不要太狠，讓縮圖顯示更多」）：原本 1:1 正方形，
     1024×389（2.63:1）的頭圖被左右各裁 31%、只留中間 38%，還被放大 2.11 倍而變糊。
     2.9.210 先改 2.35:1（左右各裁 5%、高 175px）→ 用戶「再高 20%」→ 2.9.211 改 1.95:1
     （高度 175 → 211px，左右各裁 13%）。 */
  aspect-ratio: 1.95 / 1;
  object-fit: cover;
}
.pinggo-editorial__card h3 {
  margin: 18px 0 10px;
  font-size: 17px;
  line-height: 1.35;
}
.pinggo-editorial__card p {
  min-height: 62px;
  margin: 0 0 26px;
  color: #777;
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 767px) {
	html,
	body.pinggo-storefront {
		max-width: 100%;
		overflow-x: clip;
	}

	.pinggo-main,
	.pinggo-main > section,
	.pinggo-slideshow__track,
	.pinggo-slide,
	.pinggo-device-section__inner {
		width: 100%;
		max-width: 100%;
	}

  .pinggo-slideshow {
    height: calc(100vw / 0.8181818);
    min-height: 477px;
    max-height: 915px;
  }
  /* 2.9.92 手機直式輪播：16:9 影片改成「完整顯示＋模糊底」，
     不裁掉畫面主體（滿版裁切只會露出中間約 46% 寬度）。 */
  .pinggo-slide__video-frame::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: var(--pinggo-slide-poster) center / cover no-repeat;
    filter: blur(26px) brightness(0.5);
  }
  .pinggo-slide__video-frame iframe {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
  }
  .pinggo-slide__video-frame video {
    object-fit: contain;
  }
  /* 想改成「滿版裁切」：輪播容器加 .pinggo-slideshow--video-cover（預設不開）。 */
  .pinggo-slideshow--video-cover .pinggo-slide__video-frame::before {
    display: none;
  }
  .pinggo-slideshow--video-cover .pinggo-slide__video-frame iframe {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
  }
  .pinggo-slideshow--video-cover .pinggo-slide__video-frame video {
    object-fit: cover;
  }
  .pinggo-slide__content {
    right: 22px;
    bottom: 52px;
    left: 22px;
  }
  .pinggo-slide__content p {
    font-size: 13px;
  }
  .pinggo-slide__content h1,
  .pinggo-slide__content h2 {
    font-size: 30px;
  }
  /* 2.9.190：手機恢復左右箭頭（用戶 2026-09-23 指定「移動端也加上類似桌面左右的箭頭」）。
     桌機是 42×56、貼邊 12px；手機改成 44×56（觸控命中區 ≥44px）＋ 貼邊 8px，
     底色比桌機深一階（0.28 → 0.34），在影片亮部也看得見；不加圓角、不壓到中間的 Logo 與文案。
     樣式仍沿用上面桌機那組規則（絕對定位、top:50%、白字、‹ ›），這裡只覆寫手機要變的部分。 */
  .pinggo-slideshow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.34) !important;
    /* 桌機的箭頭是「上緣落在中線」（沒有 translate），手機改成真正的垂直居中，
       對齊用戶截圖上標注的紅框位置（框的中心＝hero 中線）。 */
    transform: translateY(-50%);
  }
  .pinggo-slideshow__arrow:active {
    background: rgba(0, 0, 0, 0.55) !important;
  }
  .pinggo-slideshow__arrow--prev {
    left: 8px;
  }
  .pinggo-slideshow__arrow--next {
    right: 8px;
  }
  .pinggo-device-section {
    height: auto;
    padding: 28px 16px 38px;
  }
  .pinggo-device-section__subheading {
    font-size: 11px;
  }
  .pinggo-device-section h2 {
    margin-bottom: 20px;
    font-size: 25px;
  }
  .pinggo-device-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 12px;
  }
  .pinggo-device-card {
    font-size: 12px;
  }
  .pinggo-device-card__media {
    width: min(100%, 78px);
  }
  .pinggo-device-card__title {
    margin-top: 8px;
  }
  .pinggo-featured {
    padding: 0 16px 54px;
    overflow: hidden;
  }
  .pinggo-featured__title {
    margin-bottom: 20px;
    font-size: 25px;
  }
  .pinggo-featured-grid {
    display: flex;
    width: max-content;
    gap: 10px;
  }
  .pinggo-feature-card {
    width: 315px;
  }
  .pinggo-feature-card__content {
    padding-top: 12px;
  }
  .pinggo-feature-card__content h2 {
    font-size: 15px;
  }
  .pinggo-feature-card__content p {
    font-size: 12px;
  }
  .pinggo-new-arrivals {
    height: 529px;
    padding-top: 26px;
  }
  .pinggo-new-arrivals__inner {
    padding-left: 16px;
  }
  .pinggo-new-arrivals h2 {
    margin-bottom: 20px;
    font-size: 25px;
  }
  .pinggo-product-slider,
  .pinggo-desk-products {
    padding-right: 16px;
    gap: 10px;
  }
  .pinggo-product-card {
    width: 233px;
    min-width: 233px;
  }
  .pinggo-product-card__media {
    width: 233px;
    height: 233px;
  }
  .pinggo-product-card__sale {
    top: 5px;
    left: 5px;
    padding: 3px 6px;
    font-size: 9px;
  }
  .pinggo-slider-progress {
    margin-top: 35px;
    margin-right: 16px;
  }
  .pinggo-desk-banner {
    height: 390px;
    padding: 0;
  }
  .pinggo-desk-collection {
    min-height: 697px;
    padding: 42px 16px 48px;
  }
  .pinggo-desk-collection__copy h2 {
    font-size: 34px;
  }
  .pinggo-desk-collection__copy > div:not(.pinggo-desk-collection__actions) {
    font-size: 13px;
  }
  .pinggo-desk-collection__actions {
    margin: 22px 0 54px;
  }
  .pinggo-desk-products .pinggo-product-card {
    width: 200px;
    min-width: 200px;
  }
  .pinggo-desk-products .pinggo-product-card__media {
    width: 200px;
    height: 200px;
  }
  .pinggo-membership {
    height: auto;
    padding: 0 18px;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pinggo-membership__card {
    height: 284px;
  }
  .pinggo-membership__tag {
    height: 38px;
    font-size: 13px;
  }
  .pinggo-membership__content {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }
  .pinggo-membership__content strong {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .pinggo-membership__content em {
    min-height: 36px;
    font-size: 12px;
  }
  .pinggo-editorial {
    padding: 80px 16px 70px;
  }
  .pinggo-editorial h2 {
    font-size: 25px;
  }
  .pinggo-editorial__head {
    margin-bottom: 18px;
    gap: 10px;
  }
  .pinggo-editorial__more {
    margin-bottom: -8px;
    font-size: 13px;
  }
  .pinggo-editorial__more-arrow {
    font-size: 17px;
  }
  .pinggo-editorial__grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scrollbar-width: none;
  }
  .pinggo-editorial__card {
    width: 315px;
    min-width: 315px;
  }
  .pinggo-editorial__card h3 {
    font-size: 15px;
  }
  .pinggo-editorial__card p {
    font-size: 12px;
  }
}

/*
 * Storefront rail controls: keep every interaction state neutral.
 * These rules intentionally live last so WooCommerce/Elementor legacy accent
 * declarations cannot turn the controls pink or make their icons disappear.
 */
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:hover,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:focus,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:focus-visible,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:active {
  color: #111 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 0 !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1) !important;
}
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:hover,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:focus-visible,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:active {
  background: #fff !important;
  transform: scale(1.04);
}
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 2px;
}
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow svg,
html body.pinggo-storefront .pinggo-product-rail button.pinggo-product-rail__arrow path {
  color: #111 !important;
  fill: none !important;
  stroke: #111 !important;
}

@media (min-width: 768px) {
  .pinggo-slide__content {
    right: 8%;
    bottom: 88px;
    left: 8%;
    max-width: none;
    text-align: center;
  }
  .pinggo-slide__content h1,
  .pinggo-slide__content h2 {
    font-size: 46px;
  }
}
.pinggo-storefront .pinggo-pill {
  color: #fff;
}
.pinggo-storefront .pinggo-slide__content > a[href] {
  color: var(--pinggo-slide-btn-color, #111);
  background: var(--pinggo-slide-btn-bg, #fff);
  text-shadow: none;
}
.pinggo-storefront .pinggo-slide__content > a[href]:hover,
.pinggo-storefront .pinggo-slide__content > a[href]:active,
.pinggo-storefront .pinggo-slide__content > a[href]:focus-visible {
  color: #fff;
  /* 2.9.171：同上，輪播按鈕統一吃 --pinggo-btn-hover。 */
  background: var(--pinggo-btn-hover, #3366ff);
}
.pinggo-storefront .pinggo-membership__card,
.pinggo-storefront .pinggo-membership__tag,
.pinggo-storefront .pinggo-membership__content {
  color: #fff;
}
@media (max-width: 767px) {
  .pinggo-slide__content {
    right: 20px;
    bottom: 47px;
    left: 20px;
    max-width: none;
    text-align: center;
  }
  .pinggo-device-section {
    height: auto;
    padding-top: 48px;
  }
}
.pinggo-slide__content h1,
.pinggo-slide__content h2,
.pinggo-device-section h2,
.pinggo-featured__title,
.pinggo-new-arrivals h2,
.pinggo-desk-collection__copy h2,
.pinggo-editorial h2 {
  font-weight: 700;
}

/* Reference interaction parity: pills, product quick actions and carousel controls. */
.pinggo-storefront .pinggo-pill {
  border: 1px solid #080808;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.pinggo-storefront .pinggo-pill:hover,
.pinggo-storefront .pinggo-pill:focus-visible {
  color: #fff;
  background: #2b2b2b;
  border-color: #2b2b2b;
  transform: translateY(-1px);
}
.pinggo-product-rail {
  position: relative;
}
.pinggo-product-rail__arrow {
  position: absolute;
  z-index: 5;
  top: 114px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  color: #111;
  background: rgba(255, 255, 255, 0.86);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    background-color 0.2s,
    transform 0.2s;
}
.pinggo-product-rail:hover .pinggo-product-rail__arrow,
.pinggo-product-rail:focus-within .pinggo-product-rail__arrow {
  opacity: 1;
  pointer-events: auto;
}
.pinggo-product-rail__arrow:hover {
  background: #fff;
  transform: scale(1.04);
}
.pinggo-product-rail__arrow:disabled {
  opacity: 0 !important;
  pointer-events: none;
}
.pinggo-product-rail__arrow .pinggo-icon {
  width: 21px;
  height: 21px;
}
.pinggo-product-rail__arrow--prev {
  left: 12px;
}
.pinggo-product-rail__arrow--prev .pinggo-icon {
  transform: rotate(180deg);
}
.pinggo-product-rail__arrow--next {
  right: calc(4% + 12px);
}
.pinggo-desk-collection .pinggo-product-rail__arrow--next {
  right: 12px;
}
.pinggo-product-card__media {
  position: relative;
}
.pinggo-product-card__media > a:first-child {
  display: block;
  width: 100%;
  height: 100%;
}
.pinggo-product-card__media {
  background: #ededed;
  isolation: isolate;
}
.pinggo-product-card__media img {
  background: transparent;
  mix-blend-mode: multiply;
}

/* Homepage rhythm matched to the current elago storefront. */
:root {
  --pinggo-section-gap: 111px;
  --pinggo-section-heading-gap: 0px;
  --pinggo-rail-gap: 48px;
}
.pinggo-device-section {
  padding: 64px 0 144px; /* 2.9.44: 上接 AI 对话卡，衔接间距压缩为 92px（原 111px 节奏适用于区段之间） */
}
.pinggo-device-section__inner {
  width: 100%;
  max-width: 1464px;
  margin: 0 auto;
  padding: 0 58px;
}
.pinggo-device-section__subheading {
  font-weight: 400;
  opacity: 0.6;
}
.pinggo-device-section h2 {
  margin: 8px 0 42px;
}
.pinggo-device-grid {
  gap: 28px 20px;
}
.pinggo-device-card__media {
  width: 100%;
}
.pinggo-device-card img {
  width: 100%;
  height: 100%;
  mix-blend-mode: normal;
  object-fit: contain;
}
.pinggo-device-card__title {
  margin-top: 10px;
}
.pinggo-featured {
  padding-bottom: var(--pinggo-section-gap);
}
.pinggo-new-arrivals {
  height: auto;
  padding-top: var(--pinggo-section-heading-gap);
  padding-bottom: var(--pinggo-section-gap);
}
.pinggo-desk-collection {
  min-height: 0;
  padding-top: 52px;
  padding-bottom: var(--pinggo-section-gap);
}
.pinggo-desk-collection__actions {
  margin-bottom: 64px;
}
.pinggo-editorial {
  padding-top: var(--pinggo-section-gap);
  padding-bottom: var(--pinggo-section-gap);
}
.pinggo-slider-progress {
  margin-top: var(--pinggo-rail-gap);
}
@media (max-width: 767px) {
  :root {
    --pinggo-section-gap: 86px;
    --pinggo-section-heading-gap: 0px;
    --pinggo-rail-gap: 32px;
  }
  .pinggo-device-section {
    padding: 48px 0; /* 2.9.44: 上接 AI 对话卡，衔接 76px */
  }
  .pinggo-device-section__inner {
    padding: 0 18px;
  }
  .pinggo-device-section__subheading {
    font-size: 12px;
    line-height: normal;
  }
  .pinggo-device-section h2 {
    margin: 8px 0 30px;
    font-size: 24px;
    line-height: 1;
  }
  .pinggo-device-grid {
    gap: 26px 7px;
  }
  .pinggo-device-card {
    font-size: 9px;
    line-height: 1;
  }
  .pinggo-device-card__title {
    margin-top: 4px;
  }
  .pinggo-featured {
    padding-bottom: var(--pinggo-section-gap);
  }
  .pinggo-new-arrivals {
    height: auto;
    padding-top: var(--pinggo-section-heading-gap);
    padding-bottom: var(--pinggo-section-gap);
  }
  .pinggo-desk-collection {
    padding-top: 40px;
    padding-bottom: var(--pinggo-section-gap);
  }
  .pinggo-desk-collection__actions {
    margin-bottom: 48px;
  }
  .pinggo-editorial {
    padding-top: var(--pinggo-section-gap);
    padding-bottom: var(--pinggo-section-gap);
  }
  .pinggo-slider-progress {
    margin-top: var(--pinggo-rail-gap);
  }
}
.pinggo-product-card__quick-add {
  position: absolute;
  right: auto;
  bottom: 14px;
  left: 50%;
  display: flex;
  width: max-content;
  min-width: 156px;
  max-width: calc(100% - 48px);
  padding-inline: 22px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  color: #777 !important;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    background-color 0.2s;
}
.pinggo-product-card:hover .pinggo-product-card__quick-add,
.pinggo-product-card:focus-within .pinggo-product-card__quick-add {
  opacity: 1;
  transform: translateX(-50%);
}
.pinggo-product-card__quick-add:hover {
  color: #111 !important;
  background: #fff;
}
.pinggo-desk-collection .pinggo-slider-progress {
  margin-right: 0;
}
@media (max-width: 767px) {
  .pinggo-product-rail__arrow {
    display: none;
  }
  .pinggo-product-card__quick-add {
    display: none;
  }
}
.pinggo-editorial__image-link {
  display: block;
  overflow: hidden;   /* 2.9.217：hover 放大時裁在框內 */
  color: inherit;
}
.pinggo-editorial__card h3 a {
  color: inherit;
  text-decoration: none;
}
.pinggo-feature-card h2 a {
  color: inherit;
  text-decoration: none;
}

/* Native touch rail for the three featured cards on phones. */
@media (max-width: 767px) {
  .pinggo-featured {
    padding-right: 0;
    padding-left: 16px;
    overflow: hidden;
  }
  .pinggo-featured-grid {
    display: flex;
    width: 100%;
    padding-right: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .pinggo-featured-grid::-webkit-scrollbar {
    display: none;
  }
  .pinggo-feature-card {
    width: min(82vw, 315px);
    min-width: min(82vw, 315px);
    scroll-snap-align: start;
  }
}

/* 2.9.185：手機 hero 佈局——放在檔案最後面，確保覆蓋前面桌機的 transform（實測踩過：寫在前面會被 
   `.pinggo-slide__video .pinggo-slide__cta { transform: translateY(gap/2) }` 蓋掉，按鈕因此低 20px）。 */
@media (max-width: 749px) {
  /* 2.9.185：手機版 hero 佈局＝「文案在上、按鈕在下」（用戶 2026-09-22 附截圖標注位置）。
     用百分比定位、隨 hero 高度自適應（不同手機／平板都成立）：
       文案上緣 ≈ hero 高的 13%；按鈕上緣 ≈ 77%（換算自用戶截圖：兩者分別落在 hero 的 13.3% 與 76.8%）。
     桌機完全不受影響（只在這條 media query 內）；手機上改由這組絕對定位決定位置，
     所以 --pinggo-video-gap／--pinggo-video-copy-shift（桌機的微調旋鈕）在手機上不再作用。 */
  .pinggo-slide__video .pinggo-slide__content {
    top: 0;
    bottom: 0;
    /* 關鍵：左右都要有值，父層寬度才不會塌成 0（否則子元素 left/right:0 會讓文字逐字換行）。 */
    right: var(--pinggo-video-left, 7%);
    transform: none;
    max-width: none;
  }
  .pinggo-slide__video .pinggo-slide__eyebrow {
    position: absolute;
    top: 13%;
    left: 0;
    right: 0;
    margin: 0;
    transform: none;
    /* 2.9.187：文案水平居中（用戶 2026-09-22 附圖指定「文字按鈕居中」）。
       桌機規則把這句寫成 text-align:left，這裡在同一層級、且本區塊在檔案最後 → 只覆蓋手機。 */
    text-align: center;
  }
  .pinggo-slide__video .pinggo-slide__cta {
    position: absolute;
    top: 77%;
    left: 0;
    right: 0;
    margin: 0;
    transform: none;
    /* 2.9.187：按鈕跟著居中（原本 justify-content:flex-start 是桌機的左對齊）。 */
    justify-content: center;
  }
}

/* 2.9.217（用戶：「現在首頁只有兩個板塊有輕微放大，其他板塊全部加上」）：
   首頁卡片圖 hover 輕微放大統一成一組 —— 原本只有裝置卡（1.02／180ms）與精選卡（1.015／0.4s），
   補上商品卡、文章卡、會員卡；倍率與過渡全部統一 1.02／0.4s。
   各容器都已 overflow:hidden（本版另補 .pinggo-editorial__image-link），放大會裁在框內。
   註：hero 輪播與 .pinggo-desk-banner 不加（非卡片、banner 本身不是連結）。 */
.pinggo-device-card img,
.pinggo-feature-card img,
.pinggo-product-card__media img,
.pinggo-editorial__card img,
.pinggo-membership__card img {
  transition: transform 0.4s ease;
}
.pinggo-device-card:hover img,
.pinggo-feature-card:hover img,
.pinggo-product-card:hover .pinggo-product-card__media img,
.pinggo-editorial__card:hover img,
.pinggo-membership__card:hover img {
  transform: scale(1.02);
}