/* ===== WWOEM UI Fixes (2026-09-17) =====
   Loaded last. Only overrides, no structural changes. */

/* --- 0. Mobile nav overlay: solid background, links clear of header --- */
/* .header has backdrop-filter, which makes it the containing block for fixed
   descendants — so inset:0 only covers the 88px header. Force real viewport size. */
.mobile-nav {
  background: #faf8f5 !important;
  z-index: 1000 !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow-y: auto !important;
  padding-top: 90px !important;
  padding-bottom: 40px !important;
  justify-content: flex-start !important;
  gap: 26px !important;
}
.mobile-nav-link { font-size: 1.6rem !important; }


/* --- 1. Hero: stronger scrim so text never fights the product photo --- */
.hero-lux-overlay {
  background: linear-gradient(
    105deg,
    rgba(22, 8, 12, 0.94) 0%,
    rgba(22, 8, 12, 0.78) 38%,
    rgba(22, 8, 12, 0.48) 62%,
    rgba(22, 8, 12, 0.28) 100%
  ) !important;
}

/* --- 2. Hero outline button: visible against busy background --- */
.hero-lux-actions .btn-outline-light {
  background: rgba(22, 8, 12, 0.5) !important;
  border: 1px solid rgba(212, 185, 128, 0.9) !important;
  color: #f2e8d5 !important;
  backdrop-filter: blur(4px);
}
.hero-lux-actions .btn-outline-light:hover {
  background: #b99256 !important;
  border-color: #b99256 !important;
  color: #fff !important;
}

/* --- 3. Stats numbers: sans-serif (serif "1" read like "I") --- */
.stat-lux-number {
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ===== Mobile (<=768px) ===== */
@media (max-width: 768px) {
  /* --- 4. Header: make room so the hamburger is not pushed off-screen --- */
  .header-inner { gap: 8px !important; }
  .header-actions { gap: 4px !important; flex-shrink: 1; min-width: 0; }
  .header-login-btn { padding: 6px 10px !important; font-size: 12px !important; white-space: nowrap; }
  .lang-switcher .lang-btn { font-size: 0 !important; padding: 6px !important; gap: 2px !important; }
  .lang-switcher .lang-btn svg { width: 16px; height: 16px; }
  .hamburger { display: flex !important; flex-shrink: 0; margin-left: 2px; }
  .header-icon-btn, .header-cart-btn { flex-shrink: 0; }

  /* --- 5. Mobile hero: vertical scrim + hide scroll hint (was overlapping CTA) --- */
  .hero-lux-overlay {
    background: linear-gradient(
      180deg,
      rgba(22, 8, 12, 0.9) 0%,
      rgba(22, 8, 12, 0.72) 55%,
      rgba(22, 8, 12, 0.55) 100%
    ) !important;
  }
  .hero-lux-bg img { object-position: 68% center; }
  .hero-lux { min-height: auto; padding: 40px 0 64px; }
  .hero-lux-content { padding: 60px 0 20px !important; }
  .hero-lux-scroll { display: none !important; }
  .hero-lux-trust { line-height: 1.9; }

  /* --- 6. Mobile stats bar: aligned 3-col grid --- */
  .stats-lux-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px 8px !important; }
  .stat-lux-item { text-align: center !important; padding: 0 4px; }
  .stat-lux-label, .stat-lux-item span, .stat-lux-item p {
    font-size: 0.62rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.04em !important;
  }
  .stat-lux-number { font-size: 1.35rem !important; margin-bottom: 4px; }
}


/* --- round 2 (2026-09-18): mobile header overflow, page-header clip, trust row, ghost btn --- */
@media (max-width: 768px) {
  /* header: move login into mobile nav, hide inquiry + orders icon, shrink lang to globe icon */
  .header-actions > .btn.btn-primary { display: none !important; }
  .header-actions > .header-icon-btn { display: none !important; }
  .header-actions .header-login-btn { display: none !important; }
  .header-actions > div > span { display: none !important; } /* logged-in user name */
  .lang-btn { font-size: 0 !important; gap: 0 !important; padding: 6px 8px !important; }
  .lang-btn svg { width: 18px !important; height: 18px !important; }
  .lang-btn svg:last-child { display: none !important; }
  /* inner pages: title clipped by fixed header */
  .page-header { padding-top: 120px !important; }
  /* hero trust row: keep items intact */
  .hero-lux-trust { flex-wrap: wrap !important; justify-content: center !important; row-gap: 10px !important; }
  .hero-lux-trust span { white-space: nowrap !important; }
  /* ghost outline buttons on dark heroes */
  .btn-outline-light { border: 1px solid rgba(255,255,255,.75) !important; color: #fff !important; background: rgba(255,255,255,.06) !important; }
}


/* --- round 3: neutralize ".home-luxury div { padding: 20px 0 }" hammer on mobile ---
   styles_1789536870.css line ~4356 forces 20px top+bottom padding on EVERY div inside
   .home-luxury at <=768px, compounding inside product cards. ui-fixes.css loads later,
   same specificity -> this wins. Sections keep their own spacing rule. */
@media (max-width: 768px) { /* padding-hammer fix */
  .home-luxury div { padding-top: 0 !important; padding-bottom: 0 !important; }
}


/* --- round 4: unified mobile header icon system (34px, bare, even) --- */
.header-login-icon-btn { display: none; }
@media (max-width: 768px) {
  .header-actions { display: flex !important; align-items: center !important; gap: 2px !important; }
  .header-cart-btn,
  .header-login-icon-btn,
  .header-actions .lang-btn {
    width: 34px !important; height: 34px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border: none !important; background: transparent !important;
    border-radius: 8px !important; padding: 0 !important; margin: 0 !important;
    color: #3a322b !important; cursor: pointer;
  }
  .header-cart-btn { position: relative !important; }
  .header-cart-btn svg,
  .header-login-icon-btn svg,
  .header-actions .lang-btn svg { width: 19px !important; height: 19px !important; }
  .header-actions .lang-btn svg:last-child { display: none !important; }
  .cart-badge { top: 1px !important; right: -1px !important; }
  .hamburger { width: 34px !important; height: 34px !important; align-items: center !important; justify-content: center !important; }
}


/* --- round 5: /oem page mobile polish --- */
@media (max-width: 768px) {
  /* hero: kill 85vh empty dark space, tighten rhythm */
  .oem2-hero { min-height: auto !important; padding: 96px 0 44px !important; }
  .oem2-hero-title { font-size: 2.2rem !important; margin-bottom: 14px !important; }
  .oem2-hero-sub { font-size: 0.92rem !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
  .oem2-hero-desc { font-size: 0.9rem !important; margin-bottom: 20px !important; }
  /* why cards: compact, number + icon share one row */
  .oem2-why-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .oem2-why-card { padding: 16px 20px !important; }
  .oem2-why-num { font-size: 1.5rem !important; display: inline-block !important; vertical-align: middle !important; margin: 0 12px 10px 0 !important; }
  .oem2-why-icon { width: 34px !important; height: 34px !important; display: inline-flex !important; vertical-align: middle !important; margin-bottom: 10px !important; }
  .oem2-why-icon svg { width: 18px !important; height: 18px !important; }
  .oem2-why-card h3, .oem2-why-card h4, .oem2-why-card h5 { font-size: 1.02rem !important; margin: 0 0 5px !important; }
  .oem2-why-card p { font-size: 0.84rem !important; line-height: 1.6 !important; margin: 0 !important; }
  /* factory stats: DM Sans digits (serif 1 looks like I) */
  .factory-stat-num { font-family: 'DM Sans', sans-serif !important; }
  /* process steps: 3-col compact grid, no connector lines */
  .oem2-process-steps { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .oem2-process-step { padding: 12px 4px 14px !important; }
  .process-step-icon { width: 38px !important; height: 38px !important; margin: 0 auto 6px !important; }
  .process-step-icon svg { width: 18px !important; height: 18px !important; }
  .process-step-no { font-size: 0.7rem !important; }
  .oem2-process-step h5 { font-size: 0.78rem !important; line-height: 1.35 !important; }
  .process-step-line { display: none !important; }
}

@media (max-width: 768px) { /* trust-gap: replace orphan dots with even gaps */
  .hero-lux-trust { gap: 8px 16px !important; }
  .hero-lux-trust .trust-dot { display: none !important; }
}


/* --- round 6: transparent header over hero (solid returns on .scrolled / .menu-open) --- */
.header.over-dark:not(.scrolled):not(.menu-open) {
  background: linear-gradient(to bottom, rgba(22,12,14,.48), rgba(22,12,14,0)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.header.over-dark:not(.scrolled):not(.menu-open) .logo { color: #faf7f1 !important; }
.header.over-dark:not(.scrolled):not(.menu-open) .logo span { color: #d4b87a !important; }
.header.over-dark:not(.scrolled):not(.menu-open) .nav-desktop .nav-link { color: rgba(250,247,241,.85) !important; }
.header.over-dark:not(.scrolled):not(.menu-open) .nav-desktop .nav-link.active,
.header.over-dark:not(.scrolled):not(.menu-open) .nav-desktop .nav-link:hover { color: #d4b87a !important; }
.header.over-dark:not(.scrolled):not(.menu-open) .header-cart-btn,
.header.over-dark:not(.scrolled):not(.menu-open) .header-icon-btn,
.header.over-dark:not(.scrolled):not(.menu-open) .header-login-icon-btn,
.header.over-dark:not(.scrolled):not(.menu-open) .header-actions .lang-btn { color: #faf7f1 !important; background: transparent !important; }
.header.over-dark:not(.scrolled):not(.menu-open) .header-login-btn {
  background: rgba(250,247,241,.14) !important;
  border: 1px solid rgba(250,247,241,.35) !important;
}
.header.over-dark:not(.scrolled):not(.menu-open) .hamburger span { background: #faf7f1 !important; }

@media (max-width: 768px) { /* round 6b: hero content clears the floating header */
  .home-luxury .hero-lux-content { padding-top: 84px !important; }
}

@media (max-width: 768px) { /* round 7: wider product cards — slim page gutters */
  .container { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 768px) { /* round 7b: symmetric gutters — cards fill their tracks */
  .product-grid > div, .product-grid-lux > div { justify-self: stretch !important; width: 100% !important; }
}

@media (max-width: 480px) { /* round 8: QR codes side by side, smaller — undo doubao column rule */
  .contact-qr-row, .success-qr-row {
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .contact-qr-row .qr-item, .success-qr-row .qr-item {
    width: auto !important;
    max-width: none !important;
    flex: 0 1 130px !important;
  }
  .contact-qr-row .qr-item img, .success-qr-row .qr-item img {
    width: 108px !important;
    height: 108px !important;
  }
}


/* ===== Product Detail Modal Upgrade (2026-09-18) ===== */

/* 弹窗更宽 */
.product-detail .modal-content {
  max-width: 960px !important;
  width: 92% !important;
  max-height: 92vh !important;
}

/* 左右网格：图片区更宽 */
.product-detail .detail-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

/* 主图容器 */
.detail-main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #faf8f5;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-main-image .detail-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* 点击放大提示 */
.detail-image-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
}

/* 缩略图行 */
.detail-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.detail-thumb {
  width: 56px;
  height: 56px;
  border: 2px solid #e0d5d0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.detail-thumb:hover {
  border-color: #c9a961;
}
.detail-thumb.active {
  border-color: #8B2942;
  box-shadow: 0 0 0 2px rgba(139,41,66,0.15);
}
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 详情区 */
.detail-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.detail-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #3a322b;
  margin: 0 0 14px 0;
  padding-left: 10px;
  border-left: 3px solid #8B2942;
}

/* 详细描述 */
.detail-desc-full {
  color: #555;
  font-size: 14px;
  line-height: 1.8;
}
.detail-desc-full p {
  margin: 0 0 10px 0;
}

/* 规格参数表 */
.detail-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.detail-spec-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0ebe6;
}
.detail-spec-table tr:last-child td {
  border-bottom: none;
}
.spec-label {
  width: 130px;
  color: #888;
  font-weight: 500;
  background: #faf8f5;
}
.spec-value {
  color: #333;
}
.spec-price {
  color: #8B2942;
  font-weight: 700;
  font-size: 16px;
}

/* Lightbox 大图查看器 */
.detail-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.88);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}
.lightbox-image {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
}
.lightbox-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 30px;
}
.lightbox-prev, .lightbox-next {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(255,255,255,0.35);
}
.lightbox-counter {
  color: #fff;
  font-size: 14px;
  min-width: 50px;
  text-align: center;
}

/* ===== 手机端适配 ===== */
@media (max-width: 768px) {
  .product-detail .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .product-detail .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .detail-main-image {
    aspect-ratio: 4 / 3;
  }
  .detail-thumb {
    width: 48px;
    height: 48px;
  }
  .detail-section {
    margin-top: 20px;
    padding-top: 18px;
  }
  .detail-section-title {
    font-size: 16px;
  }
  .detail-desc-full {
    font-size: 13px;
  }
  .detail-spec-table {
    font-size: 13px;
  }
  .spec-label {
    width: 100px;
  }
  .lightbox-image {
    max-width: 95vw;
    max-height: 75vh;
  }
}



/* ===== 产品详情弹窗布局优化：主图+缩略图3列+详情长图全宽 ===== */
.product-detail .modal-content {
  max-width: 1000px !important;
}

/* 顶部两栏布局 */
.product-detail .detail-top {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.product-detail .detail-image-col {
  flex: 0 0 45%;
  max-width: 45%;
}

.product-detail .detail-info-col {
  flex: 1;
  min-width: 0;
}

/* 主图 */
.product-detail .detail-main-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f5f0;
  cursor: zoom-in;
  position: relative;
}

.product-detail .detail-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 缩略图 - 3列网格 */
.product-detail .detail-thumbs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.product-detail .detail-thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  padding: 0 !important;
}

.product-detail .detail-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.product-detail .detail-thumb.active {
  border-color: #8b1e3f !important;
}

/* 详情长图区域 - 全宽 */
.product-detail .detail-bottom {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #e8e0d5;
}

.product-detail .detail-section {
  margin-bottom: 28px;
}

.product-detail .detail-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #8b1e3f;
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 4px solid #8b1e3f;
}

.product-detail .detail-desc-full {
  line-height: 1.8;
  color: #444;
  font-size: 14px;
}

.product-detail .detail-desc-full p {
  margin-bottom: 10px;
}

/* 规格参数表 */
.product-detail .detail-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.product-detail .detail-spec-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.product-detail .detail-spec-table .spec-label {
  width: 140px;
  background: #faf7f2;
  color: #666;
  font-weight: 500;
}

.product-detail .detail-spec-table .spec-value {
  color: #333;
}

.product-detail .detail-spec-table .spec-price {
  color: #8b1e3f;
  font-weight: 700;
  font-size: 16px;
}

/* 手机端适配 */
@media (max-width: 768px) {
  .product-detail .detail-top {
    flex-direction: column;
    gap: 20px;
  }
  
  .product-detail .detail-image-col {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  
  .product-detail .detail-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  
  .product-detail .detail-spec-table .spec-label {
    width: 100px;
  }
}


/* ===== 详情图画廊 ===== */
.detail-images-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.detail-gallery-item {
  width: 100%;
  max-width: 600px;
}

.detail-gallery-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid #eee;
  transition: transform 0.2s, box-shadow 0.2s;
}

.detail-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.detail-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .detail-images-gallery {
    gap: 12px;
  }
  .detail-gallery-item {
    max-width: 100%;
  }
}

/* ===== QR 卡片归一（0927）：容器即白卡，图片去内边距并居中填满 ===== */
.final-cta-qrs .qr-code-wrapper {
  box-sizing: border-box;
}
.final-cta-qrs .qr-code-wrapper img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  object-fit: contain;
  display: block;
}

/* ===== 统计条修正（0927）：数字与后缀同行，标签提亮适配深红底 ===== */
.stats-section .stat-item .stat-number {
  display: inline;
  margin-bottom: 0;
}
.stats-section .stat-item .stat-number + span {
  display: inline;
  margin-left: 3px;
  vertical-align: baseline;
}
.stats-section .stat-item .stat-label {
  display: block;
  margin-top: 10px;
  opacity: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* 弹窗 WhatsApp 直达按钮（0927） */
.product-detail .detail-btn-wa { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:10px; background:#b99256; color:#fff !important; text-decoration:none; border:none; }
.product-detail .detail-btn-wa:hover { background:#a8814a; }

/* ===== 弹窗内容左右不居中修复（0929）：手机端 detail-top 为纵向 flex，
   基础规则的 align-items:flex-start 阻止子列拉伸 → info 列按内容收缩(330px)，
   右侧溢出 20px 顶到弹窗边缘（左 20px / 右 0px 不对称）。
   手机端强制 info 列满宽 + 容器 stretch，桌面端不受影响 ===== */
@media (max-width: 768px) {
  .product-detail .detail-top { align-items: stretch !important; }
  .product-detail .detail-info-col { width: 100% !important; max-width: 100% !important; }
}

/* ===== FAYANKOU 子分类横滑条（0929）：手机端单行滑动，隐藏滚动条 ===== */
@media (max-width: 768px) {
  .subcategory-tabs { scrollbar-width: none; -ms-overflow-style: none; }
  .subcategory-tabs::-webkit-scrollbar { display: none; }
  .subcategory-tabs .category-tab { flex: 0 0 auto; }
}