/* 沿用原站炭黑與香檳金；所有配色共用同一張 800 × 800 畫布。 */
.s820-gallery { touch-action: pan-y; }
.s820-gallery .s820-photo {
  aspect-ratio: 1;
  animation: s820-color-reveal 320ms ease-out both;
  user-select: none;
}
.s820-gallery .s820-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(210, 188, 149, .24);
  border-radius: 50%;
  color: #b8aa90;
  background: rgba(18, 18, 16, .48);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.s820-arrow-prev { left: 20px; }
.s820-arrow-next { right: 20px; }
.s820-gallery .s820-arrow:hover {
  color: #e3c99f;
  border-color: rgba(224, 194, 149, .62);
  background: rgba(38, 35, 29, .9);
}
.s820-gallery:focus-visible,
.s820-gallery .s820-arrow:focus-visible,
.s820-swatch:focus-visible {
  outline: 2px solid #d8ba8b;
  outline-offset: 4px;
}
.product-actions.has-color-picker { flex-wrap: wrap; gap: 20px 24px; }
.s820-color-picker { display: flex; flex-direction: column; gap: 6px; width: 182px; flex-shrink: 0; }
.s820-color-picker[data-color-count="5"] { width: 218px; }
.s820-swatches { display: flex; align-items: center; gap: 6px; }
.s820-swatch {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.s820-swatch > span {
  display: block;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
}
.s820-swatch:hover { background: rgba(214, 187, 143, .07); }
.s820-swatch.is-selected { border-color: rgba(221, 193, 149, .7); }
.s820-color-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 9px; color: #b9ad98; font-size: 11px; line-height: 1.5; }
.s820-color-name { white-space: nowrap; }
.s820-color-count { color: #827a6b; font-size: 9px; letter-spacing: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes s820-color-reveal { from { opacity: .15; } to { opacity: 1; } }
@media (max-width: 600px) {
  .s820-arrow-prev { left: 10px; }
  .s820-arrow-next { right: 10px; }
  .s820-gallery .s820-arrow { width: 40px; height: 40px; }
  .product-actions.has-color-picker { align-items: flex-start; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .s820-gallery .s820-photo { animation: none; }
  .s820-gallery .s820-arrow, .s820-swatch { transition: none; }
}
.reduced-motion .s820-gallery .s820-photo { animation: none; }

/* 分頁箭頭與產品名稱位於同一列；圖片區只保留配色箭頭。 */
.product-tab-navigation {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:47px;
  border-bottom:1px solid var(--line);
}
.product-tab-navigation .product-tabs {
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--product-tab-count),minmax(0,1fr));
  flex:1 1 0;
  min-width:0;
  margin:0;
  border:0;
  overflow:visible;
}
.product-tab-navigation .product-tabs button {
  width:100%;
  min-width:0;
  padding:20px 4px;
  gap:clamp(4px,.65vw,9px);
  font-size:clamp(10px,1.05vw,14px);
  white-space:nowrap;
}
.product-tab-navigation .product-tabs button:after { bottom:0; }
.product-tab-navigation .product-tabs .product-tab-name {
  min-width:0;
  font:inherit;
  color:inherit;
}
.product-tab-arrows {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  padding:4px 0;
}
.product-page-arrow {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(210,188,149,.24);
  border-radius:50%;
  color:#b8aa90;
  background:transparent;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.product-page-arrow:hover {
  color:#e3c99f;
  border-color:rgba(224,194,149,.62);
  background:rgba(214,187,143,.06);
}
.product-page-arrow:focus-visible { outline:2px solid #d8ba8b;outline-offset:4px; }
.product-tab-navigation .product-tabs button:focus-visible { outline:1px solid #d8ba8b;outline-offset:-5px; }
.product-page-count { color:#a99a80;min-width:43px;text-align:center;font-size:9px;letter-spacing:1px;font-variant-numeric:tabular-nums; }
@media (min-width:760px) and (max-height:920px) {
  .product-tab-navigation { margin-top:18px; }
}
@media (min-width:760px) and (max-width:1050px) {
  .product-tab-navigation .product-tabs button { font-size:10px; }
  .product-tab-navigation .product-tabs .product-tab-number { display:none; }
}
@media (max-width:759px) {
  .product-tab-navigation { display:block;margin-top:27px; }
  .product-tab-navigation .product-tabs { column-gap:10px; }
  .product-tab-navigation .product-tabs button {
    width:100%;min-width:0;min-height:78px;padding:12px 4px;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    font-size:12px;line-height:1.45;gap:6px;white-space:normal;
  }
  .product-tab-navigation .product-tabs .product-tab-number { font-size:9px;line-height:1; }
  .product-tab-navigation .product-tabs .product-tab-name { min-height:35px;overflow-wrap:normal; }
  .product-tab-arrows { padding:12px 0;justify-content:space-between;gap:12px; }
  .product-page-arrow { width:44px;height:44px; }
  .product-page-count { min-width:43px;font-size:10px; }
}
@media (max-width:359px) {
  .product-tab-navigation .product-tabs { column-gap:6px; }
  .product-tab-navigation .product-tabs button { font-size:11px;padding-left:2px;padding-right:2px; }
}
@media (prefers-reduced-motion:reduce) {
  .product-page-arrow { transition:none; }
}


/* Small gallery captions only; tabs, arrows and spacing are unchanged. */
.s820-color-caption {font-size:12px;}
.s820-color-count {font-size:10px;}
.product-page-count {font-size:10px;}
@media (min-width:760px) and (max-width:1050px) {
  .product-tab-navigation .product-tabs button {font-size:11px;}
}
@media (max-width:759px) {
  .product-tab-navigation .product-tabs .product-tab-number {font-size:10px;}
  .product-page-count {font-size:11px;}
}

/* 產品名稱沿同一條軌道滑動：桌機五格、手機三格。 */
.product-tab-viewport {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.product-tab-navigation .product-tabs-track {
  display: flex;
  width: 100%;
  gap: 0;
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.product-tab-navigation .product-tabs-track > button {
  flex: 0 0 calc(100% / var(--product-tab-count));
  width: calc(100% / var(--product-tab-count));
  max-width: calc(100% / var(--product-tab-count));
}
@media (max-width:759px) {
  .product-tab-navigation .product-tabs-track { gap:0; }
  .product-tab-navigation .product-tabs-track > button { padding-right:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .product-tab-navigation .product-tabs-track { transition:none; }
}
.reduced-motion .product-tab-navigation .product-tabs-track { transition:none; }


/* 三款後掛耳機維持相同比例，較原尺寸縮小 15%，增加四周留白。 */
.product-visual.s820-gallery .s820-photo.is-size-matched {
  flex: none;
  width: calc(var(--photo-width) * .85);
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  transform: scale(var(--photo-hover,1)) translate3d(var(--photo-x,0%),var(--photo-y,0%),0);
}
@media (hover:hover) and (pointer:fine) {
  .product-visual.s820-gallery:hover { --photo-hover:1.03; }
}
.reduced-motion .product-visual.s820-gallery:hover { --photo-hover:1; }
@media (prefers-reduced-motion:reduce) {
  .product-visual.s820-gallery:hover { --photo-hover:1; }
}