/* ==========================================================================
   NKDFILM Brand Custom Stylesheet
   Fonts, Themes, Components & Design System
   ========================================================================== */

/* 1. Brand Fonts Definitions */
@font-face {
  font-family: 'MADE Outer Sans';
  src: url('/assets/fonts/MADE Outer Sans Thin PERSONAL USE.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Outer Sans';
  src: url('/assets/fonts/MADE Outer Sans Light PERSONAL USE.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Outer Sans';
  src: url('/assets/fonts/MADE Outer Sans Regular PERSONAL USE.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Outer Sans';
  src: url('/assets/fonts/MADE Outer Sans Medium PERSONAL USE.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Outer Sans';
  src: url('/assets/fonts/MADE Outer Sans Bold PERSONAL USE.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Uto';
  src: url('/assets/fonts/Uto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Uto';
  src: url('/assets/fonts/Uto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Uto';
  src: url('/assets/fonts/Uto-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Uto';
  src: url('/assets/fonts/Uto-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Uto';
  src: url('/assets/fonts/Uto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AdobeSongStd';
  src: url('/assets/fonts/AdobeSongStd-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Global Typography and Variables (全部统一为标准主题色 --bs-primary) */
:root {
  --bs-primary: #fe3b1f;
  --bs-primary-rgb: 254, 59, 31;
  --nkd-dark: #111111;
  --nkd-dark-bg: #1E1E1E;
  --nkd-gray: #f8f9fa;
  --nkd-text: #333333;
  --nkd-text-light: #777777;
  --font-heading: 'MADE Outer Sans', sans-serif;
  --font-body: 'Uto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--nkd-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .heading-font {
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Global Layout & Container Width (全站整体缩减两侧留白，宽屏更具沉浸感)
   ========================================================================== */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 94%;
  }
}

@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 93%;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 92%;
  }
}

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 92%;
  }
}

@media (min-width: 1600px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 92%;
  }
}

@media (min-width: 1920px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1740px;
    width: 92%;
  }
}

/* ==========================================================================
   Header & XPEL-Style Mega Menu Navigation
   ========================================================================== */
.nkd-navbar-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  border-bottom: 1px solid transparent;
}

/* 状态 A: 首页初始透明 */
.header-transparent {
  background-color: transparent;
}
.header-transparent .logo-white { display: block; }
.header-transparent .logo-theme { display: none; }
.header-transparent .nkd-nav-link { color: #ffffff; }
.header-transparent .nkd-btn-contact {
  color: #ffffff;
  border: 1.5px solid #ffffff;
  background-color: transparent;
}

/* 状态 B: 白底状态（非首页、或者首页滚屏、或者展开了下拉菜单） */
.header-solid,
.nkd-navbar-header.header-scrolled,
.nkd-navbar-header.header-mega-open {
  background-color: #ffffff !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #e8e8e8 !important;
}
.header-solid .logo-white,
.nkd-navbar-header.header-scrolled .logo-white,
.nkd-navbar-header.header-mega-open .logo-white {
  display: none !important;
}
.header-solid .logo-theme,
.nkd-navbar-header.header-scrolled .logo-theme,
.nkd-navbar-header.header-mega-open .logo-theme {
  display: block !important;
}
.header-solid .nkd-nav-link,
.nkd-navbar-header.header-scrolled .nkd-nav-link,
.nkd-navbar-header.header-mega-open .nkd-nav-link {
  color: #111111;
}
.header-solid .nkd-btn-contact,
.nkd-navbar-header.header-scrolled .nkd-btn-contact,
.nkd-navbar-header.header-mega-open .nkd-btn-contact {
  background-color: var(--bs-primary);
  border: 1.5px solid var(--bs-primary);
  color: #ffffff !important;
}

.nkd-navbar-header .header-row {
  padding-top: 0;
  padding-bottom: 0;
  height: 76px;
}

.nkd-navbar-brand {
  display: inline-flex;
  align-items: center;
}

.nkd-navbar-brand img {
  height: 46px;
  width: auto;
}

/* 导航项文字与箭头 */
.page-main-padded {
  padding-top: 76px;
}

.nkd-nav-list {
  height: 76px;
}

.nkd-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 76px;
}

.nkd-nav-link {
  font-family: 'Uto', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 16px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.nkd-nav-link > span {
  position: relative;
  display: inline-block;
}

.nkd-nav-link .nav-arrow-icon {
  width: 9px;
  height: 5px;
  transition: transform 0.2s ease;
}

/* 悬停与激活：文字变红，且红线精确压在 header 底边 border 上 (bottom: -1px)，完全消灭空隙 */
.nkd-nav-item.is-current .nkd-nav-link,
.nkd-nav-item.active .nkd-nav-link,
.nkd-nav-link:hover {
  color: var(--bs-primary) !important;
}

.nkd-nav-item::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 3px;
  background-color: var(--bs-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
  z-index: 1060;
}

.nkd-nav-item.is-current::after,
.nkd-nav-item.active::after,
.nkd-nav-item:hover::after {
  transform: scaleX(1);
}

/* 当展开其他 mega menu 时，非当前正在展开的项暂时收起红线 */
.header-mega-open .nkd-nav-item.is-current:not(.active)::after {
  transform: scaleX(0);
}
.header-solid.header-mega-open .nkd-nav-item.is-current:not(.active) .nkd-nav-link,
.header-scrolled.header-mega-open .nkd-nav-item.is-current:not(.active) .nkd-nav-link {
  color: #111111 !important;
}

/* Contact 胶囊按钮 */
.nkd-btn-contact {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50px;
  padding: 6px 24px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.nkd-btn-contact:hover {
  background-color: #e63217;
  border-color: #e63217;
  color: #ffffff !important;
}

/* Mega Menu 容器与面板 */
.nkd-mega-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  margin-top: -1px; /* 彻底贴齐一级导航栏底边，无缝拼接 */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}
.nkd-mega-wrapper.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nkd-mega-panel {
  display: none;
}
.nkd-mega-panel.show {
  display: block;
}

.mega-panel-container {
  padding-top: 52px;
  padding-bottom: 64px;
  padding-left: 140px !important; /* 起始位置再往里多收一点，层次更加舒展分明 (仅用于产品等列类型) */
  padding-right: 140px !important;
}

@media (max-width: 1400px) {
  .mega-panel-container {
    padding-left: 90px !important;
    padding-right: 90px !important;
  }
}

@media (max-width: 991px) {
  .mega-panel-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 图片卡片类型 (mega_type === 'cards')：参考参考图设计，适度微内收 (约 55px)，与 Logo 的 'K' 字母形成自然视觉对齐 */
.mega-panel-cards .mega-panel-container,
.mega-panel-container-cards {
  padding-left: 55px !important;
  padding-right: 55px !important;
}

@media (max-width: 1400px) {
  .mega-panel-cards .mega-panel-container,
  .mega-panel-container-cards {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 991px) {
  .mega-panel-cards .mega-panel-container,
  .mega-panel-container-cards {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mega Menu 排版样式 (图 2: PRODUCTS 进行光学补偿，确保 2-3 与 3-4 在人眼视觉上绝对等距) */
/* 二级导航: ALL PRODUCTS (独占一行，大字体加粗，细长箭头) */
.mega-all-row {
  margin-top: 0 !important;
  margin-bottom: 28px !important; /* 光学补偿：由 22px 增加到 28px，抵消全大写字体的密集黑度 */
  padding: 0 !important;
  line-height: 1 !important;
}

.mega-all-link {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #111111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mega-all-link:hover {
  color: var(--bs-primary);
}
.mega-all-arrow {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.mega-all-link:hover .mega-all-arrow {
  transform: translateX(4px);
}

/* 4列三级四级网格体系 (子导航各列之间间距加大至 56px，视距更开阔舒适) */
.mega-cols-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 56px;
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
}

.mega-col-item {
  margin: 0 !important;
  padding: 0 !important;
}

.mega-col-item.has-divider {
  border-left: 1px solid #e8e8e8;
  padding-left: 56px !important;
}

/* 三级导航: PAINT PROTECTION FILM / WINDOW FILM / COLOR PPF / OTHER FUNCTIONAL FILMS
   距离控制：
   - 距离上方 ALL PRODUCTS：由 28px 严格支撑
   - 距离下方四级首项：由 16px 适度放大至 19px
   实现视觉两段空白细腻平衡！
*/
.mega-heading, .mega-heading a {
  font-family: 'Uto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111111;
  letter-spacing: 0.5px;
  margin-top: 0 !important;
  margin-bottom: 19px !important; /* 3-4 微调多加一点点 (16px -> 19px) */
  padding: 0 !important;
  text-decoration: none;
  display: block;
  line-height: 1.1 !important;
}
.mega-heading a:hover {
  color: var(--bs-primary);
}

/* 四级导航: Prime Shield, HealTech... (常规清晰纯黑体，项与项之间行高间距 8px，保持紧凑聚合) */
.mega-sub-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.mega-sub-list li {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.mega-heading a:hover {
  color: var(--bs-primary);
}

/* 四级导航: Prime Shield, HealTech... (常规清晰纯黑体，项与项之间行高间距 8px，保持紧凑聚合) */
.mega-sub-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.mega-sub-list li {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.mega-sub-list li:last-child {
  margin-bottom: 0 !important;
}
.mega-sub-list li a {
  font-family: 'Uto', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #111111;
  text-decoration: none;
  display: inline-block;
  padding: 0 !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mega-sub-list li a:hover {
  color: var(--bs-primary);
  padding-left: 4px;
}

/* Mega Menu 卡片样式 (图 3: SERVICE / 图 4: ABOUT US) */
.mega-cards-wrapper {
  margin-top: -16px;
  margin-bottom: -24px;
}

.mega-cards-wrapper .row {
  --bs-gutter-x: 76px !important; /* 卡片之间的留白间距显著加大，对齐参考图开阔留白效果 */
}

@media (max-width: 1400px) {
  .mega-cards-wrapper .row {
    --bs-gutter-x: 56px !important;
  }
}

.mega-card-item {
  display: block;
  cursor: pointer;
}
.mega-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10.2;
  height: auto;
  max-height: 250px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 22px !important; /* 图片与文字标题的距离 */
}
.mega-card-img-wrap img {
  transition: transform 0.35s ease;
}
.mega-card-item:hover .mega-card-img-wrap img {
  transform: scale(1.04);
}
.mega-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  transition: color 0.2s ease;
}
.mega-card-item:hover .mega-card-title {
  color: var(--bs-primary) !important;
}
.mega-card-arrow {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.mega-card-item:hover .mega-card-arrow {
  transform: translateX(4px);
}

/* 3. Media & Overlay Specifications (Design annotation: 40% black mask) */
.overlay-dark-40 {
  position: relative;
}

.overlay-dark-40::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.overlay-dark-40 > * {
  position: relative;
  z-index: 2;
}

/* Video Hero Section (首页第一屏幕全屏与轮播) */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background-color: #000;
}

.hero-video-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-video-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

/* 首页 Hero 轮播双项文字切换容器 (Grid堆叠实现平滑无高度跳动渐变) */
.hero-slides-container {
  display: grid;
  grid-template-areas: "hero-slide";
  justify-items: center;
  align-items: center;
  width: 100%;
}

.hero-slide-item {
  grid-area: hero-slide;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s;
}

.hero-slide-item.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hero 大标题: 稍微调大 (48px) */
.hero-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.18;
  margin-bottom: 14px;
}

/* Hero 副标题: 整体调小协调 (18px) */
.hero-sub-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.6px;
  line-height: 1.3;
  margin-bottom: 24px;
}

/* Hero Button: 整体调小协调 (15px) */
.hero-btn-wrap {
  margin-bottom: 4px;
}

.hero-btn-orange {
  display: inline-block;
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--bs-primary);
  padding: 11px 36px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(254, 59, 31, 0.35);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-btn-orange:hover {
  background-color: #e63217;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(254, 59, 31, 0.5);
}

/* 进度条与播放控制组件 */
.hero-progress-widget {
  margin-top: 26px;
  position: relative;
  z-index: 5;
}

.hero-progress-track {
  width: 180px;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  overflow: hidden;
}

.hero-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--bs-primary);
  border-radius: 4px;
  will-change: width;
}

.hero-dots-group {
  margin: 0 4px;
}

/* 小圆点选中只变颜色，去掉了变大放大效果 */
.hero-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.85);
}

.hero-dot.active {
  background: #ffffff;
  transform: none;
}

.hero-play-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-play-btn:hover {
  opacity: 1;
  transform: scale(1.06);
}

/* 认证图标条：整体调小协调 */
.hero-cert-wrap {
  margin-top: 42px;
  position: relative;
  z-index: 5;
}

.hero-cert-bar-img {
  max-width: 380px;
  width: 85%;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Hero Section 移动端与平板端响应式调整 */
@media (max-width: 991px) {
  .hero-main-title {
    font-size: 36px;
  }
  .hero-sub-title {
    font-size: 15px;
  }
  .hero-btn-orange {
    font-size: 13.5px;
    padding: 9px 28px;
  }
  .hero-cert-wrap {
    margin-top: 32px;
  }
  .hero-cert-bar-img {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  .hero-video-wrapper {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .hero-video-content {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 76px 20px 24px 20px;
    box-sizing: border-box;
  }

  .hero-main-title {
    font-size: clamp(24px, 6.5vw, 30px);
    letter-spacing: 0.8px;
    line-height: 1.18;
    margin-bottom: 10px;
  }

  .hero-sub-title {
    font-size: clamp(12px, 3.2vw, 13.5px);
    letter-spacing: 0.2px;
    line-height: 1.4;
    margin-bottom: 18px;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-btn-orange {
    font-size: 13px;
    letter-spacing: 0.6px;
    padding: 9px 26px;
    border-radius: 6px;
  }

  .hero-progress-widget {
    margin-top: 18px;
  }

  .hero-progress-track {
    width: 120px;
    height: 3px;
  }

  .hero-cert-wrap {
    margin-top: 26px;
  }

  .hero-cert-bar-img {
    max-width: 240px;
    width: 75%;
  }
}

/* ==========================================================================
   2. NKD Coverage Section (二、NKD覆盖范围 - 背景色 #1E1E1E + 横向圆角卡片轮播)
   ========================================================================== */
.nkd-coverage-section {
  background-color: var(--nkd-dark-bg, #1E1E1E) !important;
  padding-top: 75px;
  padding-bottom: 80px;
  overflow: hidden;
}

/* 标题: 整体调小协调 (42px) */
.coverage-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 42px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* 副标题: 整体调小协调 (18px) */
.coverage-sub-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* 右侧 More 药丸按钮 */
.coverage-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50px;
  padding: 5px 22px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.coverage-more-btn:hover {
  background-color: #ffffff;
  color: #111111;
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* Light Theme 变体 (例如第三屏 Showcase 浅色纯白背景) */
.nkd-coverage-section.theme-light {
  background-color: #ffffff !important;
}
.nkd-coverage-section.theme-light .coverage-main-title {
  color: #111111 !important;
}
.nkd-coverage-section.theme-light .coverage-sub-title {
  color: #333333 !important;
}
.nkd-coverage-section.theme-light .coverage-more-btn {
  border: 1.5px solid #111111 !important;
  color: #111111 !important;
}
.nkd-coverage-section.theme-light .coverage-more-btn:hover {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* 轮播包装器与轨道 */
.coverage-carousel-wrapper {
  margin-top: 32px;
}

.coverage-scroll-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 16px 4px;
}

.coverage-scroll-track::-webkit-scrollbar {
  display: none;
}

/* 卡片项目与内框: 桌面端一排 3 个完整卡片 + 右侧微露出提示多余数据 */
.coverage-card-item {
  flex: 0 0 calc((100% - 72px) / 3.125);
  width: calc((100% - 72px) / 3.125);
  max-width: calc((100% - 72px) / 3.125);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}

.coverage-card-item:hover {
  transform: translateY(-5px);
}

.coverage-card-inner {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 18px;
  overflow: hidden;
  background-color: #262626;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.coverage-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.coverage-card-item:hover .coverage-card-img {
  transform: scale(1.05);
}

.coverage-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0) 65%);
  z-index: 2;
  pointer-events: none;
}

/* 卡片底部内容区域 (标题与描述) - 默认居中，可配置靠左，左右两边边距加宽，整体文字块更精致收敛 */
.coverage-card-content {
  position: absolute;
  bottom: 18px;
  left: 28px;
  right: 28px;
  z-index: 3;
}

/* 带描述的卡片 (如 NKD Care⁺ Service)：固定内容区高度并从顶部排列，确保所有卡片的 Title 严格在同一条水平线上，同时紧凑贴底 */
#services-section .coverage-card-content,
.coverage-card-content.has-desc {
  height: auto;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.coverage-card-content.text-center,
.coverage-card-content.text-center .coverage-card-title,
.coverage-card-content.text-center .coverage-card-desc {
  text-align: center !important;
}

.coverage-card-content.text-start,
.coverage-card-content.text-left,
.coverage-card-content.text-start .coverage-card-title,
.coverage-card-content.text-start .coverage-card-desc,
.coverage-card-content.text-left .coverage-card-title,
.coverage-card-content.text-left .coverage-card-desc {
  text-align: left !important;
}

/* 卡片底部标题文字: 17px */
.coverage-card-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.4px;
  line-height: 1.2;
  margin: 0 0 5px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* 卡片富文本描述: 纯白饱满字体 (彻底消除细体虚化发灰感，紧凑行高) */
.coverage-card-desc,
#services-section .coverage-card-desc {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular，字形饱满不虚化 */
  font-size: 12px;
  line-height: 1.22;
  color: #ffffff !important; /* 纯白，绝不发灰 */
  opacity: 1 !important;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 轮播橙色圆圈箭头按钮 */
.coverage-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--bs-primary);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.coverage-arrow-btn:hover {
  background-color: #e63217;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.coverage-arrow-btn svg {
  display: block;
  transition: transform 0.2s ease;
}

.coverage-prev-btn:hover svg {
  transform: translateX(-2px);
}

.coverage-next-btn:hover svg {
  transform: translateX(2px);
}

.coverage-prev-btn {
  left: 16px;
}

.coverage-next-btn {
  right: 38px;
}

/* Coverage 响应式设计 */
@media (max-width: 1200px) {
  .coverage-card-content {
    left: 20px !important;
    right: 20px !important;
    bottom: 16px !important;
  }
  .coverage-card-title {
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  .coverage-card-desc,
  #services-section .coverage-card-desc {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 3px 0 0 0 !important;
  }
  #services-section .coverage-card-content,
  .coverage-card-content.has-desc {
    height: auto !important;
    min-height: 80px !important;
  }
}

@media (max-width: 991px) {
  .coverage-main-title {
    font-size: 28px;
  }
  .coverage-sub-title {
    font-size: 13.5px;
  }
  .coverage-card-item {
    flex: 0 0 calc((100% - 32px) / 2.15);
    width: calc((100% - 32px) / 2.15);
    max-width: calc((100% - 32px) / 2.15);
  }
  .coverage-card-inner {
    height: 420px;
  }
  .coverage-card-content {
    bottom: 16px !important;
    left: 18px !important;
    right: 18px !important;
  }
  .coverage-card-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  .coverage-card-desc,
  #services-section .coverage-card-desc {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 3px 0 0 0 !important;
  }
  #services-section .coverage-card-content,
  .coverage-card-content.has-desc {
    height: auto !important;
    min-height: 75px !important;
    bottom: 16px !important;
    left: 18px !important;
    right: 18px !important;
  }
  .coverage-arrow-btn {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  .coverage-prev-btn {
    left: 10px;
  }
  .coverage-next-btn {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .nkd-coverage-section {
    padding-top: 45px;
    padding-bottom: 45px;
  }
  .coverage-main-title {
    font-size: clamp(20px, 5.5vw, 24px);
    margin-bottom: 4px;
  }
  .coverage-sub-title {
    font-size: clamp(12px, 3vw, 13px);
  }
  .coverage-carousel-wrapper {
    margin-top: 16px;
  }
  .coverage-scroll-track {
    gap: 14px;
  }
  .coverage-card-item {
    flex: 0 0 calc(100% - 24px);
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
  .coverage-card-inner {
    height: 380px;
    border-radius: 16px;
  }
  .coverage-card-content {
    bottom: 16px !important;
    left: 18px !important;
    right: 18px !important;
  }
  #services-section .coverage-card-content,
  .coverage-card-content.has-desc {
    height: auto !important;
    min-height: 70px !important;
    bottom: 16px !important;
    left: 18px !important;
    right: 18px !important;
  }
  .coverage-card-title {
    font-size: 14px !important;
    margin-bottom: 3px !important;
  }
  .coverage-card-desc,
  #services-section .coverage-card-desc {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 3px 0 0 0 !important;
  }
  .coverage-arrow-btn {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .coverage-prev-btn {
    left: 8px;
  }
  .coverage-next-btn {
    right: 16px;
  }
}
  .coverage-arrow-btn {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .coverage-prev-btn {
    left: 8px;
  }
  .coverage-next-btn {
    right: 32px;
  }
}

/* 4. Navigation & Header Overrides */
.navbar-brand img {
  max-height: 48px;
  width: auto;
}

.header-style1 .navbar-nav > li > a {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 5. Section Enhancements */
.section-title-wrap {
  margin-bottom: 3rem;
}

.section-subtitle-tag {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bs-primary);
  margin-bottom: 0.5rem;
  display: block;
}

.section-title-text {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 1rem;
}

/* Product and Card Grid */
.nkd-card-item {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nkd-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.nkd-card-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background-color: #f0f0f0;
}

.nkd-card-body {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Buttons 统一基于 Bootstrap 主题体系 */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #e63217 !important;
  border-color: #e63217 !important;
  color: #fff !important;
}

.btn-outline-light {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #111;
  border-color: #fff;
}

/* 彻底覆写 Incora 模板默认原色，确保全站全部统一为主色 #fe3b1f，杜绝一切绿色残留 */
.text-primary,
a.text-primary,
a.text-primary:active,
a.text-primary:focus,
a.text-primary:hover {
  color: var(--bs-primary) !important;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* ==========================================================================
   Mobile Navigation Fullscreen & Hamburger (铺满 100vw，钻取式下级)
   ========================================================================== */
.nkd-mobile-toggler {
  position: relative;
  width: 42px;
  height: 42px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  outline: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1060;
}

.nkd-toggler-bars {
  position: relative;
  display: block;
  width: 26px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
  transition: all 0.25s ease;
}

.nkd-toggler-bars::before,
.nkd-toggler-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
  transition: all 0.25s ease;
}

.nkd-toggler-bars::before {
  top: -8px;
}

.nkd-toggler-bars::after {
  bottom: -8px;
}

/* 白底状态下汉堡线变为深黑 */
.header-solid .nkd-toggler-bars,
.header-solid .nkd-toggler-bars::before,
.header-solid .nkd-toggler-bars::after,
.nkd-navbar-header.header-scrolled .nkd-toggler-bars,
.nkd-navbar-header.header-scrolled .nkd-toggler-bars::before,
.nkd-navbar-header.header-scrolled .nkd-toggler-bars::after {
  background-color: #111111;
}

/* 移动端 100% 铺满全屏遮罩容器 (100vw / 100vh) */
.nkd-nav-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 针对移动端动态地址栏和手势条的 100dvh 规范 */
  background: #ffffff;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.nkd-nav-mobile-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nkd-mobile-topbar {
  min-height: 64px;
  flex-shrink: 0;
  background: #ffffff;
}

.nkd-mobile-close {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nkd-mobile-body {
  flex: 1 1 auto;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  overflow-y: scroll !important; /* 强制启用纵向滚动条 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 80px; /* 预留充足的底部滚动安全区域 */
}

.mobile-contact-box {
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 20px)) !important;
}

.mobile-node-title {
  font-family: 'Uto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.15s ease;
}

.mobile-node-title:hover {
  color: var(--bs-primary);
}

.mobile-arrow-btn {
  background: none;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  color: #777777;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.mobile-arrow-btn:hover {
  color: var(--bs-primary);
}

.mobile-arrow-btn .arrow-icon {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.mobile-collapse-box {
  animation: mobileFadeIn 0.2s ease;
}

@keyframes mobileFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Footer Styling (完全对标 [Image 1] 设计稿)
   1. 背景色为主题色到 #313131 的渐变，上下 padding 严格对称 (100px)
   2. footer 左右位置与全站 Header Logo 及 Container 边界严格对齐
   3. 所有文字均不换行 (white-space: nowrap)
   4. 字体字号全面参考导航栏 ('Uto', 14.5px/13.5px)，告别粗重感
   5. 左侧大 Logo 上下与右侧文字区严格对齐 (顶对齐标题，底对齐最后一行 ICE ARMOR)
   6. 右下角社交图标水平对齐文字最后一行 (ICE ARMOR)，右边沿对齐 CONTACT 列
   ========================================================================== */
.footer-nkd {
  background: linear-gradient(180deg, #313131 0%, #313131 45%, var(--bs-primary, #fe3b1f) 100%);
  color: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}

.footer-container {
  /* 严格保持与全站 header.ejs 的 container 一致，确保左边沿与 Header Logo 垂直对齐 */
  width: 100%;
}

.footer-main-layout {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 左侧 Logo 与右侧文字区高度严格相等 */
  width: 100%;
  position: relative;
}

/* 1. 左侧大 Logo：上下与右侧文字区严格对齐 */
.footer-logo-wrapper {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.footer-logo-link {
  display: flex;
  align-items: stretch;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-logo-link:hover {
  opacity: 0.92;
}

.footer-logo-main {
  height: 100%;
  max-height: 275px;
  width: auto;
  object-fit: contain;
  object-position: left top;
  display: block;
}

/* 2. 右侧内容区 */
.footer-content-wrapper {
  flex: 1 1 auto;
  margin-left: clamp(40px, 6vw, 110px);
  position: relative;
  display: flex;
  flex-direction: column;
}

.footer-columns-grid {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 28px;
}

/* 所有文字均不换行 */
.footer-col,
.footer-heading,
.footer-category-link,
.footer-sub-link,
.footer-col li {
  white-space: nowrap !important;
}

/* 字体字号全面参考导航栏并整体适度放大，每个上下的距离留白统一均为 12px */
.footer-heading {
  font-family: 'Uto', sans-serif;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: none;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.footer-category-link {
  font-family: 'Uto', sans-serif;
  color: #ffffff !important;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
  display: block;
  line-height: 1.3;
  margin: 0 0 12px 0;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-category-link:hover {
  color: #ffffff !important;
  opacity: 0.8;
  transform: translateX(2px);
}

.footer-sub-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-sub-list li {
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
}

.footer-sub-link {
  font-family: 'Uto', sans-serif;
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 400; /* Uto Regular，字形清晰饱满，纯白不发灰 */
  line-height: 1.3;
  letter-spacing: 0.3px;
  display: block;
  margin: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-sub-link:hover {
  color: #ffffff !important;
  opacity: 0.8;
}

.footer-category-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-category-list li {
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
}

.footer-category-list li:last-child {
  margin-bottom: 0;
}

.footer-category-list li:last-child .footer-category-link {
  margin-bottom: 0;
}

/* 3. 社交图标：右对齐 CONTACT 列，水平底部对齐文字最后一行 (ICE ARMOR) */
.footer-social-row {
  position: absolute;
  right: 0;
  bottom: -2px;
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1;
}

.footer-social-link {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
}

.footer-social-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.footer-social-link:hover .footer-social-img {
  transform: translateY(-3px) scale(1.06);
  opacity: 0.92;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991.98px) {
  .footer-nkd {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .footer-main-layout {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-logo-main {
    max-height: 180px;
    margin-bottom: 30px;
  }
  .footer-content-wrapper {
    margin-left: 0;
    width: 100%;
  }
  .footer-columns-grid {
    flex-wrap: wrap;
    gap: 30px 20px;
  }
  .footer-col {
    min-width: 140px;
  }
  .footer-social-row {
    position: static;
    margin-top: 32px;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .footer-nkd {
    padding-top: 45px;
    padding-bottom: 45px;
  }
  .footer-columns-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

@media (max-width: 768px) {
  .hero-title-main {
    font-size: 2.2rem;
  }
  .hero-subtitle-sub {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   PRODUCTS OVERVIEW PAGE (/products)
   ========================================================================== */

/* 1. Products Hero Section */
.products-hero-section {
  width: 100%;
  min-height: 750px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.products-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.40); /* 40% 黑色蒙版 */
  z-index: 1;
}

.products-hero-container {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: 90px;
}

.products-hero-title,
.page-hero-title,
.hero-banner-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 48px; /* 稍微放大标题字号 (42px -> 48px)，与首页 hero 保持一致 */
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  letter-spacing: 2px;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.products-hero-subtitle {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.6px;
  line-height: 1.3;
}

/* 2. Intro Section */
.products-intro-section {
  padding: 100px 0; /* 上下留白加大且完全一致 */
  background-color: #ffffff;
}

.products-intro-container {
  padding-left: 20px;
  padding-right: 20px;
}

/* intro-split 左右分栏比例：左边 45%，右边 55% */
.intro-split-col-left {
  flex: 0 0 45%;
  max-width: 45%;
}

.intro-split-col-right {
  flex: 0 0 55%;
  max-width: 55%;
}

@media (max-width: 767px) {
  .intro-split-col-left,
  .intro-split-col-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.products-intro-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 30px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #111111;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 0;
}

.products-intro-text {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 18px; /* 字体稍微再大一点 */
  line-height: 1.5;
  color: #111111; /* 纯黑 */
}

.products-intro-text .products-intro-q {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 18px;
  color: #111111; /* 都是黑色字体 */
  line-height: 1.45;
  margin-bottom: 8px !important;
}

.products-intro-text .products-intro-a {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 18px;
  color: #111111; /* 都是黑色字体 */
  line-height: 1.45;
}

/* 3. Products 4-Card Grid */
.products-grid-section {
  padding: 0 0 95px;
  background-color: #ffffff;
}

.products-grid-section.has-section-title {
  padding: 95px 0 95px; /* 上下对称边距均为 95px */
}

/* Why NKD? 等标题对齐下方卡片左边缘，往右适度偏移 */
.products-grid-header {
  padding-left: 50px;
}

.products-grid-row {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 28px;
}

.products-feature-card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  background-color: #000000;
}

.products-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.products-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  min-height: 280px;
  overflow: hidden;
}

.products-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
}

.products-feature-card:hover .products-card-media img {
  transform: scale(1.04);
}

.products-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.82) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.products-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 30px 23px 30px;
  height: auto;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
  color: #ffffff;
}

.products-card-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 22px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.products-card-desc {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 14px;
  line-height: 1.35;
  color: #ffffff !important; /* 纯白，不发灰 */
  opacity: 1 !important;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 4. Customized Solutions Banner */
.products-solutions-section {
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.products-solutions-container {
  padding-top: 80px;
  padding-bottom: 80px;
  z-index: 2;
}

.products-solutions-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 30px; /* 参考 Enjoy Every Drive With Confidence 的尺寸 */
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
  max-width: none;
  width: auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.products-solutions-list {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 子项之间留白更紧凑 */
}

.products-solutions-item {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 14.5px;
  line-height: 1.5;
  color: #ffffff !important; /* 纯白，不发灰 */
  opacity: 1 !important;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive adjustments */
/* iPad 及平板端（≤1024px）保持单列大卡片展示，电脑端（>1024px）一行2个 */
@media (max-width: 1024px) {
  .products-grid-section .products-grid-row > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 577px) and (max-width: 1024px) {
  .products-card-media {
    min-height: 380px;
  }
}

@media (max-width: 991px) {
  .products-intro-section {
    padding: 70px 0;
  }
  .products-intro-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .products-grid-section {
    padding-bottom: 70px;
  }
  .products-hero-section {
    min-height: 480px;
  }
  .products-hero-title,
  .page-hero-title,
  .hero-banner-title {
    font-size: 38px;
  }
  .products-solutions-section {
    min-height: 440px;
  }
  .products-solutions-container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .products-grid-header {
    padding-left: 35px;
  }
  .products-card-content {
    height: auto;
    min-height: 120px;
    padding: 13px 26px 19px 26px;
  }
}

@media (max-width: 767px) {
  .products-hero-title,
  .page-hero-title,
  .hero-banner-title {
    font-size: clamp(26px, 6vw, 34px);
  }
  .products-intro-title {
    font-size: 24px;
  }
  .products-solutions-title {
    font-size: 24px;
  }
  .products-card-content {
    height: auto;
    min-height: 100px;
    padding: 11px 20px 15px 20px;
  }
  .products-card-title {
    font-size: clamp(17px, 4.5vw, 19px);
    margin-bottom: 4px;
  }
  .products-card-desc {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .products-grid-header {
    padding-left: 20px;
  }
  .products-card-content {
    height: auto;
    min-height: 80px;
    padding: 8px 16px 10px 16px;
  }
  .products-card-media {
    aspect-ratio: 16 / 12;
  }
}

/* ==========================================================================
   PPF DETAIL & SERIES SHOWCASE COMPONENT (Slide 3)
   ========================================================================== */
.ppf-showcase-section {
  background-color: #262626 !important;
  padding: 85px 0 95px;
}

.ppf-showcase-section-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 32px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 42px !important; /* 主标题底边到下方元素视觉距离严格设定为 46px */
}

/* Tabs */
.ppf-showcase-tabs {
  gap: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 45px !important; /* Tab 橙色指示线底边到下方图片顶边视觉距离严格设定为 46px */
  padding: 0 !important;
}

@media (max-width: 768px) {
  .ppf-showcase-section-title {
    margin-bottom: 28px !important;
  }
  .ppf-showcase-tabs {
    gap: 20px !important;
    margin-bottom: 28px !important;
  }
}

.ppf-tab-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 300; /* MADE Outer Sans Light */
  letter-spacing: 0.5px;
  padding: 0 0 10px 0;
  margin: 0;
  position: relative;
  transition: color 0.25s ease;
  cursor: pointer;
}

.ppf-tab-btn:hover {
  color: #ff5000;
}

.ppf-tab-btn.active {
  color: #ff5000;
}

.ppf-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ff5000;
}

/* 彻底清除下方 pane 内所有元素额外自带的 margin-top / padding-top 干扰 */
.ppf-series-panes-wrapper,
.ppf-series-pane {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ppf-series-pane .row {
  margin-top: 0 !important;
}

.ppf-series-pane .row > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ppf-showcase-img-box {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  .ppf-series-pane .row > div:first-child {
    margin-bottom: 28px !important;
  }
}

/* Left Image Box (Rounded) */
.ppf-showcase-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.ppf-showcase-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Details */
.ppf-series-brand-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 32px;
  font-weight: 400; /* MADE Outer Sans Regular */
  color: #ff5000;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.ppf-series-tagline {
  font-family: 'Uto', sans-serif;
  font-size: 14px;
  font-weight: 400; /* Uto Regular */
  color: #ffffff !important; /* 纯白，不发灰 */
  opacity: 1 !important;
  letter-spacing: 0.2px;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Feature Items */
.ppf-feature-item {
  display: flex;
  align-items: center; /* 左右严格垂直居中 */
  gap: 18px;
  margin-bottom: 24px !important; /* list 每个之间留白稍微多一点点 (18px -> 24px) */
}

.ppf-feature-item:last-child {
  margin-bottom: 0 !important;
}

.ppf-feature-icon-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppf-feature-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

.ppf-feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ppf-feature-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 400; /* MADE Outer Sans Regular */
  color: #ffffff !important;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 2px !important; /* 离下方描述更近一点 */
}

.ppf-feature-desc {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 12px;
  line-height: 1.18; /* 参考效果图紧凑行高，消除过大行距 */
  color: #ffffff !important; /* 纯白，不发灰 */
  opacity: 1 !important;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Specs Accordion */
.ppf-specs-accordion {
  display: flex;
  flex-direction: column;
  gap: 18px; /* 卡片与卡片之间的间距加大 (12px -> 18px) */
  margin-top: 24px;
  width: 100%;
  max-width: 540px;
}

.ppf-spec-accordion-item {
  border-radius: 6px;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
}

.ppf-spec-accordion-item:not(.is-open) {
  border: 1px solid #e0e0e0;
}

.ppf-spec-toggle-header {
  background-color: #ff5000;
  color: #ffffff;
  border: none;
  padding: 13px 20px; /* 适度加高头部条，更显饱满厚实 */
  min-height: 52px;
  display: flex;
  align-items: center;
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 24px;
  font-weight: 700; /* MADE Outer Sans Bold */
  cursor: pointer;
  transition: background-color 0.25s ease;
  line-height: 1.1;
}

.ppf-spec-accordion-item:not(.is-open) .ppf-spec-toggle-header {
  background-color: #ffffff;
  color: #ff5000;
  border: none;
}

.ppf-spec-accordion-item.is-open .ppf-spec-arrow-icon {
  transform: rotate(180deg);
  color: #ffffff;
}

.ppf-spec-collapse-body {
  padding: 8px 18px 8px; /* 紧凑内容内边距，完全对齐效果图 */
  background-color: #ffffff;
  color: #222222;
}

/* 统一双列表格行，基线精确对齐每条下划线 */
.ppf-spec-table-list {
  display: flex;
  flex-direction: column;
}

.ppf-spec-table-row {
  display: flex;
  gap: 28px;
  margin-bottom: 5px; /* 紧凑行间距 */
}

.ppf-spec-table-row:last-child {
  margin-bottom: 2px;
}

.ppf-spec-half-item {
  flex: 1 1 50%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 2px;
  min-height: 22px;
}

/* 主题色 title: 12MIL, 10 YEARS -> Uto Extra Bold */
.ppf-spec-val-theme {
  font-family: 'Uto', sans-serif;
  font-weight: 800; /* Uto Extra Bold */
  font-size: 14px;
  color: #ff5000;
  line-height: 1.1;
}

/* 左侧其他内容: TPU, 476%, PASS, 1500, 1900, 143 GU -> Uto Regular */
.ppf-spec-val-text {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 13px;
  color: #111111;
  line-height: 1.1;
}

/* 右侧标签文字: Thickness, Material, Peel Strength... -> 森泽UD新黑 / fallback */
.ppf-spec-lbl-right {
  font-family: 'Morisawa UD Shin Go', 'Morisawa UDSinGo', 'UD Shin Go', 'UD ShinGo', 'UD Reimin', 'Noto Sans SC', 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #111111;
  line-height: 1.1;
  text-align: right;
}

.ppf-spec-lbl-right-group {
  text-align: right;
}

.ppf-spec-sublbl {
  font-family: 'Morisawa UD Shin Go', 'Morisawa UDSinGo', 'UD Shin Go', 'UD ShinGo', 'Noto Sans SC', sans-serif;
  font-weight: 400;
  font-size: 9.5px;
  color: #888888;
  line-height: 1.05;
  margin-top: 1px;
}

/* 居中底部标语 -> Uto Regular 10pt (约13.3px) 黑色透明度 40% (rgba(0,0,0,0.4)) */
.ppf-spec-footnote {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.40) !important;
}

/* ==========================================================================
   LATEST ARTICLES COMPONENT (Slide 4)
   ========================================================================== */
.nkd-articles-section {
  padding: 80px 0 90px;
}

.articles-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 32px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #111111;
  letter-spacing: -0.2px;
}

.articles-more-btn {
  border: 1px solid #111111;
  color: #111111;
  background: transparent;
  padding: 6px 24px;
  border-radius: 30px;
  font-family: 'Uto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
}

.articles-more-btn:hover {
  background-color: #111111;
  color: #ffffff;
}

.articles-scroll-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 16px 4px;
}

.articles-scroll-track::-webkit-scrollbar {
  display: none;
}

.articles-card-item {
  flex: 0 0 calc((100% - 72px) / 3.3);
  width: calc((100% - 72px) / 3.3);
  max-width: calc((100% - 72px) / 3.3);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.articles-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.articles-card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  background-color: #111111;
}

.articles-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.articles-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;
  min-height: 48px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

.articles-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  z-index: 2;
  text-align: center;
}

.articles-card-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Articles Controls (居中排版，进度条更长，并且与左右翻页箭头挨在一起) */
.articles-controls-row {
  margin-top: 36px;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.articles-progress-bar {
  flex-grow: 1; /* 进度条更长 */
  max-width: 900px;
  height: 3px;
  background-color: #e5e5e5;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.articles-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 35%;
  background-color: #ff5000;
  transition: transform 0.2s ease, width 0.2s ease;
}

.articles-arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #111111;
  background: #ffffff;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.articles-arrow-btn:hover {
  background: #111111;
  color: #ffffff;
}

@media (max-width: 991px) {
  .articles-card-item {
    flex: 0 0 calc((100% - 24px) / 2.2);
    width: calc((100% - 24px) / 2.2);
    max-width: calc((100% - 24px) / 2.2);
  }
}

@media (max-width: 576px) {
  .articles-card-item {
    flex: 0 0 85%;
    width: 85%;
    max-width: 85%;
  }
}

/* ==========================================================================
   COLOR PPF PRODUCT PAGE (/products/color-ppf)
   ========================================================================== */

/* Hero Badge */
.products-hero-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
}

.products-hero-badge img {
  max-height: 80px;
  width: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

@media (max-width: 767px) {
  .products-hero-badge {
    margin-top: 24px;
  }
  .products-hero-badge img {
    max-height: 60px;
  }
}

/* Color PPF Showcase Section */
.color-ppf-showcase-section {
  position: relative;
  background-color: #070c18;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 85px;
  padding-bottom: 580px; /* 大幅增加底部内边距，确保背景中的保时捷整车完整、显著展示在底部 */
  overflow: hidden;
}

@media (max-width: 1599px) {
  .color-ppf-showcase-section {
    padding-bottom: 520px;
  }
}

@media (max-width: 1399px) {
  .color-ppf-showcase-section {
    padding-bottom: 460px;
  }
}

@media (max-width: 1199px) {
  .color-ppf-showcase-section {
    padding-bottom: 400px;
  }
}

@media (max-width: 991px) {
  .color-ppf-showcase-section {
    padding-top: 60px;
    padding-bottom: 320px;
  }
}

@media (max-width: 575px) {
  .color-ppf-showcase-section {
    padding-top: 40px;
    padding-bottom: 240px;
  }
}

/* Showcase Header Row */
.color-ppf-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}

@media (max-width: 991px) {
  .color-ppf-header-row {
    flex-direction: column;
    gap: 28px;
  }
}

.color-ppf-title-wrap {
  flex-shrink: 0;
}

.color-ppf-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 34px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
}

@media (max-width: 767px) {
  .color-ppf-main-title {
    font-size: 26px;
  }
}

.color-ppf-title-divider {
  width: 480px; /* 延长横线，对齐效果图优雅修长的视觉比例 */
  max-width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  margin-top: 14px;
}

@media (max-width: 1199px) {
  .color-ppf-title-divider {
    width: 380px;
  }
}

@media (max-width: 767px) {
  .color-ppf-title-divider {
    width: 280px;
  }
}

/* 5 Feature Icons */
.color-ppf-icons-group {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

@media (max-width: 1199px) {
  .color-ppf-icons-group {
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .color-ppf-icons-group {
    flex-wrap: wrap;
    gap: 16px;
  }
}

.color-ppf-icon-item {
  width: 86px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 575px) {
  .color-ppf-icon-item {
    width: 70px;
  }
}

.color-ppf-icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.color-ppf-icon-label {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 100; /* MADE Outer Sans Thin */
  font-size: 11.5px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  white-space: normal;
}

/* 8 Color Swatch Cards Grid */
.color-ppf-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 48px; /* 大幅增加卡片上下两排之间的留白距离 */
  position: relative;
  z-index: 5;
}

@media (max-width: 1199px) {
  .color-ppf-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 40px;
  }
}

@media (max-width: 575px) {
  .color-ppf-cards-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

/* Single Swatch Card Deck Container */
.color-ppf-swatch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  user-select: none;
  background: transparent;
}

/* Swatch Layers: each card has consistent visual height, overlapping stack, subtle hover scale */
.color-ppf-swatch-layer {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 16px;
  transform-origin: center center;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, filter 0.28s ease;
}

/* Hover: only scales up slightly (微放大), no z-index change to prevent covering neighbors */
.color-ppf-swatch-layer:hover {
  transform: scale(1.025);
  filter: brightness(1.03);
}

/* Exposed Header Area: matches the exposed band height (72px) with absolute vertical centering */
.color-ppf-swatch-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
  box-sizing: border-box;
}

.color-ppf-swatch-name {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 300; /* MADE Outer Sans Light */
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-align: right;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}

/* Layer 1: Back Card (露出上部 72px) */
.color-ppf-swatch-layer-1 {
  height: 180px;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Layer 2: Middle Card (露出上部 72px) */
.color-ppf-swatch-layer-2 {
  height: 180px;
  margin-top: -108px;
  z-index: 2;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.16), 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* Layer 3: Front Card (文字在与上两张一致的 72px 首栏区域内绝对垂直居中) */
.color-ppf-swatch-layer-3 {
  height: 180px;
  margin-top: -108px;
  z-index: 3;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   WINDOW FILM SHOWCASE SECTION (/products/window-film)
   ========================================================================== */
.window-film-showcase-section {
  background-color: #262626; /* 与 ppf-showcase-section 的 #262626 保持一致 */
  color: #ffffff;
  padding: 85px 0 95px;
  position: relative;
  overflow: hidden;
}

.window-film-showcase-container {
  /* 与全局 container 及 products-intro-container 保持同一布局宽度 */
}

/* Top Section Title (参考 Explore Sunroof Protection / Explore Paint Protection Film，留白完全对齐 42px) */
.window-film-top-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 32px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 42px !important; /* 与 other-functional-films 保持完全一致的标题留白 */
}

/* Main 2-Column Row (与 series-showcase 完全一致) */
.window-film-main-row {
  margin-top: 0;
  display: flex;
  align-items: stretch !important;
}

/* Left & Right Columns */
.window-film-left-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.window-film-right-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between !important; /* 强制两端对齐，使底部卡片贴紧最底端 */
  gap: 36px;
  align-items: flex-start;
}

/* Top Left Main Image Card (同 .ppf-showcase-img-box 保持 1:1 比例) */
.window-film-main-img-card {
  width: 100%;
}

/* Top Right Features Block (参考 PRIME SHIELD 样式) */
.window-film-features-block {
  width: 100%;
}

/* Product Cards (Common & Variant) */
.window-film-product-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: #1a1a1a;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.window-film-card-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  background-color: #ff5000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.window-film-card-badge span {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 400; /* MADE Outer Sans Regular */
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.window-film-card-body {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Bottom Left: Horizontal Card (Dual-Silver) */
.window-film-card-horizontal {
  width: 100%;
}

.window-film-card-horizontal .window-film-card-body {
  aspect-ratio: 901 / 361;
}

/* Bottom Right: Vertical Card (Nano Ceramic) - 居中略微收窄 */
.window-film-card-vertical {
  width: 80%;
  max-width: 440px;
}

.window-film-card-vertical .window-film-card-body {
  aspect-ratio: 490 / 520;
}

.window-film-card-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 无额外遮罩层，直接放置文字内容 */
.window-film-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
  text-align: center;
  z-index: 2;
}

.window-film-card-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 400; /* MADE Outer Sans Regular */
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.window-film-card-desc {
  font-family: 'Uto', sans-serif;
  font-size: 12px;
  font-weight: 400; /* Uto Regular，字形清晰饱满，不虚化 */
  line-height: 1.25;
  color: #ffffff !important;
  opacity: 1 !important;
  margin: 0;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive Breakpoints */
@media (max-width: 1199px) {
  .window-film-card-vertical {
    width: 90%;
  }
}

@media (max-width: 991px) {
  .window-film-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .window-film-right-col {
    align-items: stretch;
  }
  .window-film-card-vertical {
    width: 100%;
    max-width: 100%;
  }
  .window-film-card-horizontal .window-film-card-body {
    aspect-ratio: 16 / 9;
  }
  .window-film-card-vertical .window-film-card-body {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 576px) {
  .window-film-top-title {
    font-size: 24px;
    margin-bottom: 24px;
  }
  .window-film-brand-title {
    font-size: 26px;
  }
  .window-film-card-title {
    font-size: 14px;
  }
  .window-film-card-desc {
    font-size: 11px;
  }
}

/* ==========================================================================
   Dealer Page (Become a Dealer) Styles
   ========================================================================== */

/* 1. Dealer Form Section (Dark background #313131) */
.dealer-form-section {
  background-color: #313131;
  padding: 95px 0 100px;
}

.dealer-form-container {
  max-width: 1280px;
}

.dealer-form-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 32px;
  color: #ffffff;
  margin-bottom: 34px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.dealer-form {
  width: 100%;
}

.dealer-input,
.dealer-textarea {
  background-color: #ffffff;
  border: none;
  border-radius: 12px;
  width: 100%;
  color: #111111;
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dealer-input {
  height: 56px;
  padding: 0 24px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.dealer-textarea {
  min-height: 240px;
  height: 240px;
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

.dealer-input::placeholder,
.dealer-textarea::placeholder {
  font-family: 'Uto', sans-serif !important;
  font-weight: 400 !important; /* Uto Regular */
  color: #b0b0b0 !important;
  opacity: 1 !important;
  text-align: center;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.dealer-textarea::placeholder {
  padding-top: 80px;
}

.dealer-input:focus,
.dealer-textarea:focus {
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(254, 59, 31, 0.35);
}

.dealer-submit-btn {
  background-color: var(--bs-primary, #fe3b1f);
  color: #ffffff;
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 15px;
  letter-spacing: 1px;
  border: none;
  border-radius: 10px;
  height: 56px;
  transition: background-color 0.25s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dealer-submit-btn:hover {
  background-color: #e63217;
  color: #ffffff;
}

.dealer-submit-btn:active {
  transform: scale(0.99);
}

.dealer-alert {
  font-family: 'Uto', sans-serif;
  font-weight: 400;
  border-radius: 10px;
  font-size: 14px;
}

/* Contact Page Footer Info Lines */
.contact-info-footer {
  margin-top: 18px;
}

.contact-info-line {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 300; /* MADE Outer Sans Light */
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* 2. Dealer FAQs Section */
.dealer-faqs-section {
  background-color: #ffffff;
  padding: 100px 0 110px;
}

.dealer-faqs-container {
  max-width: 1280px;
}

.dealer-faqs-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 34px;
  color: #111111;
  margin-bottom: 40px;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.dealer-faq-item {
  margin-bottom: 36px;
}

.dealer-faq-item:last-child {
  margin-bottom: 0;
}

.dealer-faq-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 19px;
  color: #111111;
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: -0.1px;
}

.dealer-faq-desc {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 14.5px;
  color: #333333;
  line-height: 1.65;
  margin-bottom: 0;
}

/* Responsive adjustments for Dealer Page */
@media (max-width: 991px) {
  .dealer-form-section {
    padding: 70px 0 80px;
  }
  .dealer-form-title {
    font-size: 28px;
    margin-bottom: 26px;
  }
  .dealer-faqs-section {
    padding: 70px 0 80px;
  }
  .dealer-faqs-main-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .dealer-form-section {
    padding: 55px 0 65px;
  }
  .dealer-form-title {
    font-size: 24px;
    margin-bottom: 22px;
  }
  .dealer-input {
    height: 50px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .dealer-textarea {
    min-height: 180px;
    height: 180px;
    padding: 16px;
    font-size: 13.5px;
  }
  .dealer-textarea::placeholder {
    padding-top: 60px;
  }
  .dealer-submit-btn {
    height: 50px;
    font-size: 14px;
  }
  .dealer-faqs-section {
    padding: 55px 0 65px;
  }
  .dealer-faqs-main-title {
    font-size: 26px;
    margin-bottom: 26px;
  }
  .dealer-faq-title {
    font-size: 17px;
  }
  .dealer-faq-desc {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   Warranty Support Page Styles
   ========================================================================== */

.warranty-info-section {
  background-color: #313131;
  color: #ffffff;
  padding: 85px 0 95px;
  position: relative;
  overflow: hidden;
}

.warranty-info-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 32px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin-bottom: 24px;
}

.warranty-info-desc {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 14.5px;
  color: #ffffff;
  line-height: 1.7;
  margin-bottom: 40px;
}

.warranty-not-covered-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 18px;
  font-weight: 400; /* MADE Outer Sans Regular */
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.35;
}

.warranty-not-covered-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.warranty-not-covered-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.warranty-number-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bs-primary, #fe3b1f);
  color: #ffffff;
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 700; /* 粗体 */
  font-size: 26px; /* 更大，看起来跟字高度差不多 */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(254, 59, 31, 0.35);
  margin-top: 2px;
}

.warranty-item-text {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 0;
}

.warranty-main-row {
  align-items: stretch;
}

.warranty-right-col {
  display: flex;
  flex-direction: column;
}

.warranty-img-box {
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.warranty-img-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.warranty-steps-section {
  margin-top: 65px;
  padding-top: 55px;
}

.warranty-steps-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-size: 24px;
  font-weight: 500; /* MADE Outer Sans Medium */
  color: #ffffff;
  margin-bottom: 22px;
  letter-spacing: -0.2px;
}

.warranty-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warranty-step-text {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 400; /* MADE Outer Sans Regular */
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .warranty-info-section {
    padding: 65px 0 75px;
  }
  .warranty-info-main-title {
    font-size: 28px;
  }
  .warranty-img-box {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .warranty-steps-section {
    margin-top: 45px;
    padding-top: 40px;
  }
  .warranty-steps-title {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .warranty-info-section {
    padding: 50px 0 60px;
  }
  .warranty-info-main-title {
    font-size: 24px;
    margin-bottom: 18px;
  }
  .warranty-info-desc {
    font-size: 13.5px;
    margin-bottom: 30px;
  }
  .warranty-not-covered-title {
    font-size: 16px;
    margin-bottom: 18px;
  }
  .warranty-number-badge {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .warranty-item-text {
    font-size: 13px;
  }
  .warranty-steps-section {
    margin-top: 40px;
    padding-top: 35px;
  }
  .warranty-steps-title {
    font-size: 20px;
    margin-bottom: 18px;
  }
  .warranty-step-text {
    font-size: 13px;
  }
}

/* ==========================================================================
   Digital Tools Page Styles
   ========================================================================== */

.digital-tools-section {
  background-color: #ffffff;
  padding: 0 0 95px;
}

.digital-tool-banner-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1618 / 601;
  min-height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}

.digital-tool-banner-card:last-child {
  margin-bottom: 0;
}

.digital-tool-content {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: none;
  padding-left: 55px;
  padding-right: 25px;
  color: #ffffff;
}

.digital-tool-main-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 32px;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.2px;
  margin-bottom: 46px; /* 距离下面 list 多一点点 */
  white-space: nowrap;
}

.digital-tool-features-list {
  display: flex;
  flex-direction: column;
  gap: 30px; /* list 项之间上下间距多一点点 */
}

.digital-tool-feature-item {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 小标题与对应描述上下间距微调 */
}

.digital-tool-feature-title {
  font-family: 'MADE Outer Sans', sans-serif;
  font-weight: 500; /* MADE Outer Sans Medium */
  font-size: 16.5px;
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.digital-tool-feature-desc {
  font-family: 'Uto', sans-serif;
  font-weight: 400; /* Uto Regular */
  font-size: 13.5px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  padding-left: 14px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .digital-tool-content {
    padding-left: 40px;
  }
  .digital-tool-main-title {
    font-size: 28px;
    margin-bottom: 26px;
  }
  .digital-tool-features-list {
    gap: 18px;
  }
  .digital-tool-feature-title {
    font-size: 15.5px;
  }
  .digital-tool-feature-desc {
    font-size: 13px;
  }
}

@media (max-width: 991px) {
  .digital-tools-section {
    padding: 0 0 70px;
  }
  .digital-tool-banner-card {
    aspect-ratio: auto;
    min-height: 380px;
    padding: 45px 0;
    margin-bottom: 35px;
  }
  .digital-tool-content {
    max-width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.2) 100%);
    border-radius: 14px;
    margin: 0 20px;
    padding: 30px;
  }
  .digital-tool-main-title {
    font-size: 26px;
    white-space: normal;
  }
  .digital-tool-feature-title,
  .digital-tool-feature-desc {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .digital-tools-section {
    padding: 0 0 50px;
  }
  .digital-tool-banner-card {
    border-radius: 0;
    min-height: auto;
    padding: 30px 0;
  }
  .digital-tool-content {
    margin: 0 15px;
    padding: 20px;
  }
  .digital-tool-main-title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  .digital-tool-feature-title {
    font-size: 14.5px;
  }
  .digital-tool-feature-desc {
    font-size: 12.5px;
    padding-left: 10px;
  }
}