/* 首頁沿用原有 OUR PRODUCT 圖稿。 */
.product-series-heading {
  position: relative;
  z-index: 2;
  margin: 0;
  background: #000;
}
.product-series-heading img {
  display: block;
  width: 972.51px;
  max-width: 100%;
}
@media (width < 1200px) {
  /* 分類下方銜接 ONE-STOP，保留原手機版約 90px 的留白。 */
  .product-accordion + .stopWrap {
    margin-top: 40px;
    padding-top: 50px;
  }
}

/* 來源 f8af83c；只保留分類區塊，沿用本站 reset。 */
.product-accordion {
  --ink: #050505;
  --paper: #e8e7e3;
  --gold: #b0a285;
  --white: #f3f1eb;
  --line: rgba(255, 255, 255, 0.18);
  --font-geist-mono: "Roboto", Arial, Helvetica, sans-serif;
  color: var(--white);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: normal;
  height: 108svh;
}

.product-accordion {
  grid-row: 1;
  position: relative;
  min-height: 0;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(38, 38, 38, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 38, 38, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(38, 38, 38, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 38, 38, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, #b9b9b9 0, #b0b0b0 58%, #a7a7a7 100%);
  background-size:
    12px 12px,
    12px 12px,
    72px 72px,
    72px 72px,
    100% 100%;
}

.product-accordion::before {
  display: none;
}

.product-panel {
  --panel-gradient: linear-gradient(90deg, #898989 0%, #474747 52%, #1c1c1c 100%);
  --panel-grid: rgba(255, 255, 255, 0.018);
  --panel-grid-strong: rgba(255, 255, 255, 0.032);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  z-index: 1;
  border-right: 1px solid rgba(128, 128, 128, 0.34);
  background:
    linear-gradient(var(--panel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-grid) 1px, transparent 1px),
    linear-gradient(var(--panel-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-grid-strong) 1px, transparent 1px),
    var(--panel-gradient);
  background-size:
    12px 12px,
    12px 12px,
    72px 72px,
    72px 72px,
    100% 100%;
  transition: flex-grow 420ms linear;
  outline: none;
  contain: paint;
  will-change: flex-grow;
}


.panel-hover-zone {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 10;
  width: clamp(150px, 18vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
  pointer-events: none;
}

.product-panel:last-child {
  border-right: 0;
}

.product-panel::before,
.product-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.product-panel::before {
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.05),
      transparent 27%
    );
  transition: opacity 260ms linear;
}

.product-panel::after {
  z-index: 5;
  opacity: 0.2;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 42%, rgba(0, 0, 0, 0.09));
  transition: opacity 260ms linear;
}

.product-panel.is-active {
  flex-grow: 6.4;
}

.product-panel.is-active::before {
  opacity: 1;
}

.product-panel.is-active::after {
  opacity: 0.05;
}

.product-accordion.has-active .product-panel:not(.is-active)::after {
  opacity: 0.44;
}

.technical-grid {
  display: none;
}

.wheel-stage {
  position: absolute;
  inset: 6% 6% 7%;
  display: grid;
  place-items: center;
  z-index: 0;
  transform: none;
}

.wheel-link {
  display: block;
  width: max-content;
  line-height: 0;
}

.wheel-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.wheel-image {
  width: min(62vh, 700px);
  flex: none;
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: opacity 260ms linear;
  opacity: 0.86;
  will-change: opacity;
}

.is-active .wheel-image {
  transform: rotate(0deg);
  opacity: 1;
}

.product-accordion.has-active .product-panel:not(.is-active) .wheel-image {
  opacity: 0.58;
}

.wheel-carbon {
  clip-path: none;
}

.wheel-image.wheel-monoblock {
  scale: 0.96;
}

.wheel-image.wheel-two-piece {
  scale: 0.97;
}

.orbit {
  position: absolute;
  width: min(66vh, 75%);
  aspect-ratio: 1;
  border: 1px solid rgba(176, 162, 133, 0.32);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 300ms linear,
    transform 420ms linear;
  pointer-events: none;
}

.orbit-one {
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.orbit-two {
  width: min(70vh, 80%);
  transform: scale(0.8) rotate(28deg);
  border-right-color: transparent;
  border-top-color: transparent;
}

.is-active .orbit {
  opacity: 1;
  transform: scale(1) rotate(4deg);
}

.is-active .orbit-two {
  transform: scale(1) rotate(18deg);
}

.vertical-product-title {
  position: absolute;
  top: clamp(86px, 11vh, 112px);
  left: 44px;
  right: auto;
  z-index: 6;
  display: none;
  width: max-content;
  height: clamp(42px, 3.5vw, 48px);
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 22px;
  color: var(--white);
  background: transparent;
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  opacity: 0.94;
  transform: translate3d(0, 0, 0);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition:
    opacity 300ms linear,
    width 420ms linear,
    transform 420ms linear;
}

.vertical-product-title::before,
.vertical-product-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.vertical-product-title::before {
  opacity: 0;
  background: linear-gradient(90deg, #b6272c 0%, #962024 52%, #3c0c0e 80%, #000 100%);
  transition: opacity 260ms linear;
}

.vertical-product-title::after {
  opacity: 1;
  background: linear-gradient(90deg, rgba(48, 48, 48, 0.95), rgba(22, 22, 22, 0.98));
  transition: opacity 260ms linear;
}

.vertical-product-title.is-carbon {
  width: max-content;
  height: clamp(42px, 3.5vw, 48px);
  font-size: clamp(12px, 0.95vw, 17px);
  letter-spacing: 0.035em;
}

.vertical-product-title strong {
  font: inherit;
}

.vertical-product-title strong,
.vertical-product-title span {
  position: relative;
  right: 0;
  z-index: 1;
  transition: right 420ms linear;
}

.is-active .vertical-product-title {
  opacity: 1;
  transform: translate3d(8px, 0, 0);
}

.is-active .vertical-product-title::before {
  opacity: 1;
}

.is-active .vertical-product-title::after {
  opacity: 0;
}

.panel-number {
  position: absolute;
  left: 28px;
  bottom: 30px;
  z-index: 6;
  color: rgba(255, 255, 255, 0.45);
  font: 500 10px var(--font-geist-mono), monospace;
  letter-spacing: 0.16em;
  transition:
    color 260ms linear,
    transform 420ms linear;
}

.is-active .panel-number {
  color: var(--gold);
  transform: translateY(-4px);
}

.panel-detail {
  position: absolute;
  left: 44px;
  bottom: 28px;
  z-index: 6;
  display: none;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 260ms linear,
    transform 420ms linear,
    clip-path 420ms linear;
}

.is-active .panel-detail {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0ms;
}

.detail-line {
  width: 54px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms linear;
}

.is-active .detail-line {
  transform: scaleX(1);
}

.panel-detail p,
.explore {
  margin: 0;
  text-transform: uppercase;
}

.panel-detail p {
  color: #2a2a2a;
  font: 500 10px/1.4 var(--font-geist-mono), monospace;
  letter-spacing: 0.13em;
}

.explore {
  color: #111;
  font: 700 11px var(--font-geist-mono), monospace;
  letter-spacing: 0.14em;
}

/* Desktop panels use the same composited clipping approach as the reference
   product page. Only the clip edges and absolutely positioned artwork move;
   the browser no longer recalculates the flex layout on every frame. */
@media (min-width: 1200px) {
  .product-accordion {
    --product-motion-duration: 600ms;
    --product-motion-ease: cubic-bezier(0.76, 0, 0.24, 1);
    --edge-one: 33.333%;
    --edge-two: 66.667%;
    --center-one: 16.667%;
    --center-two: 50%;
    --center-three: 83.333%;
    --wheel-one: 21.333%;
    --wheel-two: 54.667%;
    --wheel-three: 88%;
    --start-one: 0%;
    --start-two: 33.333%;
    --start-three: 66.667%;
    display: block;
  }

  .product-accordion[data-active="carbon"] {
    --edge-one: 76%;
    --edge-two: 88%;
    --center-one: 38%;
    --center-two: 82%;
    --center-three: 94%;
    --wheel-one: 38%;
    --wheel-two: 76%;
    --wheel-three: 88%;
    --start-one: 0%;
    --start-two: 76%;
    --start-three: 88%;
  }

  .product-accordion[data-active="monoblock"] {
    --edge-one: 12%;
    --edge-two: 88%;
    --center-one: 6%;
    --center-two: 50%;
    --center-three: 94%;
    --wheel-one: 0%;
    --wheel-two: 50%;
    --wheel-three: 88%;
    --start-one: 0%;
    --start-two: 12%;
    --start-three: 88%;
  }

  .product-accordion[data-active="two-piece"] {
    --edge-one: 12%;
    --edge-two: 24%;
    --center-one: 6%;
    --center-two: 18%;
    --center-three: 62%;
    --wheel-one: 0%;
    --wheel-two: 12%;
    --wheel-three: 62%;
    --start-one: 0%;
    --start-two: 12%;
    --start-three: 24%;
  }

  .product-panel {
    --panel-gradient: linear-gradient(
      90deg,
      #898989 var(--panel-start),
      #474747 var(--panel-center),
      #1c1c1c var(--panel-end)
    );
    position: absolute;
    inset: 0;
    width: 100%;
    border-right: 0;
    contain: layout paint style;
    will-change: clip-path;
    transition: clip-path 600ms cubic-bezier(0.76, 0, 0.24, 1);
  }

  .product-panel[data-product="carbon"] {
    --panel-center: var(--center-one);
    --panel-end: var(--edge-one);
    --panel-wheel-center: var(--wheel-one);
    --panel-start: var(--start-one);
    clip-path: polygon(0 0, var(--edge-one) 0, var(--edge-one) 100%, 0 100%);
    z-index: 3;
  }

  .product-panel[data-product="monoblock"] {
    --panel-center: var(--center-two);
    --panel-end: var(--edge-two);
    --panel-wheel-center: var(--wheel-two);
    --panel-start: var(--start-two);
    clip-path: polygon(
      var(--edge-one) 0,
      var(--edge-two) 0,
      var(--edge-two) 100%,
      var(--edge-one) 100%
    );
    z-index: 2;
  }

  .product-panel[data-product="two-piece"] {
    --panel-center: var(--center-three);
    --panel-end: 100%;
    --panel-wheel-center: var(--wheel-three);
    --panel-start: var(--start-three);
    clip-path: polygon(var(--edge-two) 0, 100% 0, 100% 100%, var(--edge-two) 100%);
    z-index: 1;
  }

  .product-panel .wheel-stage {
    inset: 6% 0 7%;
    transform: translate3d(calc(var(--panel-wheel-center) - 50%), 0, 0);
    transition: transform 600ms cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
  }

  .product-panel .panel-hover-zone {
    left: var(--panel-center);
    transition: left 600ms cubic-bezier(0.76, 0, 0.24, 1);
  }

  .product-panel .vertical-product-title {
    left: calc(var(--panel-start) + 44px);
    transition:
      left 600ms cubic-bezier(0.76, 0, 0.24, 1),
      opacity 300ms linear,
      width 420ms linear,
      transform 420ms linear;
  }

  .product-panel .panel-number {
    left: calc(var(--panel-start) + 28px);
    transition:
      left 600ms cubic-bezier(0.76, 0, 0.24, 1),
      color 260ms linear,
      transform 420ms linear;
  }
}

@media (width < 1200px) {

  .product-accordion {
    flex-direction: column;
  }

  .product-panel {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    transition: flex-grow 420ms linear;
  }

  .product-panel.is-active {
    flex-grow: 4.8;
  }

  .wheel-stage {
    inset: 3% 7%;
  }

  .wheel-image {
    width: min(52vh, 86vw);
  }

  .vertical-product-title {
    top: auto;
    bottom: 0;
    left: auto;
    right: -1px;
    width: min(42vw, 156px);
    height: 42px;
    padding: 0 14px;
    justify-content: center;
    font-size: 16px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    background: linear-gradient(90deg, #666 0%, #4b4b4b 70%, #171717 100%);
    clip-path: polygon(
      12px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 12px
    );
    transform: none;
  }

  .vertical-product-title::before {
    background: linear-gradient(90deg, #b6272c 0%, #962024 55%, #3c0c0e 82%, #000 100%);
  }

  .vertical-product-title::after {
    display: none;
  }

  .vertical-product-title.is-carbon {
    width: min(64vw, 232px);
    height: 42px;
    font-size: 12px;
  }

  .is-active .vertical-product-title {
    transform: none;
  }

  .panel-detail {
    left: 22px;
    bottom: 15px;
  }

  .panel-number {
    top: 16px;
    left: auto;
    right: 18px;
    bottom: auto;
  }

  .orbit {
    width: min(43vh, 72vw);
  }

  .wheel-stage {
    transform: none;
  }
}

/* Reveal product names only in the expanded panel. */
.product-panel .vertical-product-title {
  display: flex;
  text-shadow: none;
  top: 49%;
  bottom: auto;
  left: calc(var(--panel-start, 0%) + 5%);
  right: auto;
  width: 27vw;
  height: 230px;
  padding: 32px;
  justify-content: flex-start;
  color: #fff;
  background: transparent;
  clip-path: none;
  font-size: clamp(20px, 2.38vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.025em;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-24px, -50%);
  transition: opacity 240ms ease, transform 400ms ease, visibility 0s 240ms;
}
.product-panel.is-active .vertical-product-title {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 240ms, 240ms, 0s;
}
.product-panel .vertical-product-title::before,
.product-panel .vertical-product-title::after {
  display: block;
  inset: 0;
  height: auto;
  background: none;
  border: 0;
  clip-path: none;
  opacity: 1;
}
.product-panel .vertical-product-title::after {
  display: none;
}
@media (min-width: 1200px) {
  .product-panel.is-active .wheel-stage {
    transform: translate3d(calc(var(--panel-wheel-center) - 50% + 9%), 0, 0);
  }
}
@media (width < 1200px) {
  .product-panel .vertical-product-title {
    left: 5%;
    top: auto;
    bottom: 10%;
    width: 90%;
    height: 110px;
    padding: 24px;
    font-size: clamp(22px, 5vw, 32px);
    transform: translateY(16px);
  }
  .product-panel.is-active .vertical-product-title {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-panel .vertical-product-title {
    transition: none;
  }
}

.product-panel .vertical-product-title {
  pointer-events: none;
}

/* Interpolate gradient stops together with the panel clipping edges. */
@property --panel-start {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --panel-center {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --panel-end {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}
.product-panel::before,
.product-panel::after {
  display: none;
}
@media (min-width: 1200px) {
  .product-panel {
    transition-property: clip-path, --panel-start, --panel-center, --panel-end;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }
  .product-panel .vertical-product-title {
    left: calc(var(--panel-start) + 5%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-panel,
  .product-panel .wheel-stage,
  .product-panel .panel-hover-zone {
    transition: none;
  }
}

/* 沿用既有 SVG 字樣，保持原始字距、比例及上下對齊。 */
.product-panel .vertical-product-title .piece-title-image {
  position: relative;
  z-index: 1;
  display: block;
  height: 2.16em;
  width: auto;
  max-width: 100%;
}

/* CARBON 兩行字的可見高度與 PIECE SVG 一致。 */
.product-panel .vertical-product-title .carbon-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 2.16em;
  font-weight: 700;
  letter-spacing: 0.035em;
}
.product-panel .vertical-product-title .carbon-title > span {
  font-size: 1.2em;
  line-height: 0.75;
}

/* Keep the frame attached to the actual text bounds. */
.product-panel .vertical-product-title {
  width: max-content;
  height: auto;
  padding: 38px 30px;
}
.product-panel .vertical-product-title span {
  white-space: nowrap;
}
/* 四角裝飾沿用 product.php 的原始 SVG、置中定位與縮放比例。 */
.product-panel .vertical-product-title::before {
  display: none;
}
.product-panel .vertical-product-title .deco {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}
.product-panel .vertical-product-title .deco img {
  display: block;
  max-width: initial;
}
.product-panel .vertical-product-title:hover .deco {
  transform: translate(-50%, -50%) scale(0.78);
}
@media (1200px <= width < 1600px) {
  .product-panel .vertical-product-title .deco img {
    zoom: 0.8;
  }
}
@media (width < 1200px) {
  .product-panel .vertical-product-title .deco {
    transform: translate(-50%, -50%) scale(0.78);
  }
  .product-panel .vertical-product-title .deco img {
    width: 150px;
  }
}
@media (width < 1200px) {
  .product-panel .vertical-product-title {
    padding: 24px;
    max-width: 90%;
    font-size: clamp(18px, 4.6vw, 30px);
    left: 50%;
    justify-content: center;
    text-align: center;
    transform: translate(-50%, 16px);
  }
  .product-panel.is-active .vertical-product-title {
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-accordion *,
  .product-accordion *::before,
  .product-accordion *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 產品總覽讓共用 footer 與分類同時出現在畫面內。 */
.product-series-page {
  display: flex;
  flex-direction: column;
  height: 100svh;
}
.product-series-page > .product-accordion {
  height: auto;
  flex: 1;
  min-height: 0;
}
.product-series-page > .footerWrap {
  flex-shrink: 0;
}

/* 展開後由標題或輪圈圖片進入分類。 */
.product-panel.is-active .vertical-product-title {
  pointer-events: auto;
  cursor: pointer;
  z-index: 11;
}
.product-panel .vertical-product-title:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* 共用輪圈區塊的標題四周增加點擊留白，不改變文字與角框尺寸。 */
.product-panel.is-active .vertical-product-title::after {
  display: block;
  inset: -24px;
  pointer-events: auto;
}