/* =======================================================================
   M77 产品详情页专属样式（door.html 等各产品系统详情页）
   公共样式（变量、重置、头部、页脚、面包屑、页面标题）见 css/style.css
   ======================================================================= */

/* ---- 产品图片滑块 ---- */
.prod-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding-bottom: clamp(64px, 8vw, 120px);
}

.prod-slider__track {
  display: flex;
  gap: 35px;
  transition: transform 0.55s ease;
  will-change: transform;
}
.prod-slider__slide {
  flex: 0 0 auto;
  width: 1000px;
  height: 600px;
  overflow: hidden;
}
.prod-slider__slide img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

/* ---- 可点击图片：悬停放大 + 点击灯箱 ---- */
.zoom-media {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}
.zoom-media img {
  display: block;
  width: 100%;
  transition: transform .7s var(--ease, ease);
}
.zoom-media:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
  animation: lightbox-in .25s var(--ease, ease);
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(16px, 2.5vw, 32px);
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox__img { animation: none; }
}

/* 滑块箭头：深色描边圆，悬停填黑 */
.slider-arrow {
  position: absolute;
  top: 300px;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, border-color .3s, color .3s;
  cursor: pointer;
}
.slider-arrow:hover { color: #000000; }
.slider-arrow--prev { left: clamp(12px, 2.5vw, 40px); }
.slider-arrow--next { right: clamp(12px, 2.5vw, 40px); }

@media (max-width: 768px) {
  .prod-slider__slide { flex-basis: clamp(200px, 60vw, 300px); }
  .slider-arrow { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-slider__track { transition-duration: .001ms !important; }
}

/* ================================================================
   品牌详情页布局（进口家具 / OKHA 等子品牌页）
   ================================================================ */
.brand-page { padding-bottom: clamp(64px, 8vw, 120px); }

.brand-page__intro {
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
  color: #555;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  letter-spacing: .4px;
}

.brand-block { max-width: 580px; }

.brand-block__img { overflow: hidden; }
.brand-block__img img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  background: var(--color-gray);
}

.brand-block__name {
  margin-top: 26px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: #111;
  letter-spacing: 1px;
}

.brand-block__text {
  margin-top: 16px;
  color: #555;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 2.1;
  letter-spacing: .3px;
}

.brand-block__cta {
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  justify-content: right;
}