/* ============================================================
   新芸科技官网 —— 组件级样式补丁 (fix.css)
   补回缺失的 antd 控件样式与若干组件的栅格布局
   ============================================================ */

/* ---------- A. Ant Design 控件回退样式（/outlets/ 服务网点筛选表单） ---------- */
.filter-bar, .filter-wrap, .outlets-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 18px 0; }
.filter-item { display: flex; align-items: center; gap: 8px; margin: 0; }
.filter-item > label { font-size: 14px; color: #333; white-space: nowrap; }

.ant-select {
  position: relative; display: inline-flex; align-items: center; min-width: 150px; height: 36px;
  padding: 0 30px 0 11px; font-size: 14px; color: #333; background: #fff;
  border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; box-sizing: border-box;
}
.ant-select:hover { border-color: #5e5ae4; }
.ant-select-selector { display: flex; align-items: center; width: 100%; height: 100%; }
.ant-select-selection-search { position: absolute; inset: 0; }
.ant-select-selection-search-input { width: 100%; height: 100%; border: 0; background: transparent; }
.ant-select-selection-placeholder { color: #333; line-height: 34px; }
.ant-select-selection-item { color: #333; line-height: 34px; }
.ant-select-arrow {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #999; font-size: 12px; line-height: 1; pointer-events: none;
}
.ant-select-arrow svg { width: 12px; height: 12px; fill: #999; }

.ant-input-affix-wrapper, .ant-input {
  display: inline-flex; align-items: center; height: 36px; min-width: 180px;
  padding: 0 11px; font-size: 14px; color: #333; background: #fff;
  border: 1px solid #d9d9d9; border-radius: 6px; box-sizing: border-box;
}
.ant-input-affix-wrapper:focus-within, .ant-input:focus { border-color: #5e5ae4; outline: none; }
.ant-input { width: 100%; height: 100%; border: 0; padding: 0; }
.ant-input::placeholder { color: #bbb; }
.ant-input-affix-wrapper .ant-input { min-width: 0; }
.ant-input-suffix { color: #bbb; font-size: 14px; cursor: pointer; padding-left: 6px; }
.ant-input-clear-icon { display: inline-block; }

.ant-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 20px;
  font-size: 14px; color: #333; background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
  cursor: pointer; box-sizing: border-box;
}
.ant-btn-primary { background: #5e5ae4; border-color: #5e5ae4; color: #fff; }
.ant-btn-primary:hover { background: #4a46d0; border-color: #4a46d0; }
.ant-btn:hover { border-color: #5e5ae4; color: #5e5ae4; }
.ant-btn-primary:hover { color: #fff; }
.anticon svg { width: 12px; height: 12px; vertical-align: -1px; }

/* 高德地图容器 */
.amap-container, .map-container, [class*="map-wrapper"] { width: 100%; height: 420px; min-height: 320px; }
.amap-logo { display: none !important; }
.amap-copyright { font-size: 11px; }
.amap-copyright, .amap-copyright a { color: #999 !important; }

/* ---------- B. 软件中心 / 联系类卡片栅格 ---------- */
.contact-section { padding: 40px 0 60px; }
.contact-section .section-title { font-size: 20px; font-weight: 600; margin: 0 0 18px; color: #111; }
.contact-grid { width: 100%; }
.contact-row {
  display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; width: 100%;
}
.contact-card {
  flex: 1 1 240px; min-width: 220px; min-height: 160px; padding: 22px 18px;
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}
.contact-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.contact-card-large { flex: 1 1 280px; }
.contact-title { font-size: 15px; font-weight: 600; color: #222; margin-top: 12px; }
.contact-desc { font-size: 13px; color: #888; line-height: 1.9; margin-top: 6px; }
.contact-link { color: #5e5ae4; font-size: 13px; }
.image-container { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.image-container img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qrcode { width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; }
.qrcode img { width: 100%; height: 100%; object-fit: contain; }
.hot-line .call { font-size: 18px; font-weight: 700; color: #111; }
.icon-app-store { width: 60px; height: 60px; }

/* 软件中心顶部 banner */
.page > .banner {
  width: 100%; min-height: 300px; height: 340px;
  background-size: cover !important; background-position: center top !important; position: relative;
}
.page > .banner .download {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  display: inline-block; min-width: 168px; height: 46px; line-height: 46px; padding: 0 26px;
  background: #5e5ae4; color: #fff; border-radius: 23px; text-align: center; font-size: 15px;
}
.page > .banner .download::after { content: "立即下载"; }

/* ---------- C. 品牌故事(/story/) 侧栏与标题错位修正 ---------- */
.story-page, .about-page, [class*="story-"], [class*="Story-"] { padding-top: 72px; }
.story-page .container, .about-page .container { padding-top: 34px; }
.story-nav, .story-side, [class*="story"] > aside {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px;
}
.story-nav a, .story-side a { font-size: 14px; color: #555; padding: 6px 0; }
.page-content > .container > h1,
.page-content > div > h1 { font-size: 26px; font-weight: 700; margin: 0 0 14px; color: #111; }

/* ---------- D. 商品详情页 sticky 导航不再压住页头 ---------- */
.product-nav { position: sticky; top: 64px; z-index: 900; background: #fff; width: 100%; }
@media (max-width: 1199px) { .product-nav { top: 56px; } }
.product-nav .container, .product-nav > div { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding: 10px 24px; }
.product-nav a, .product-nav span { font-size: 14px; color: #333; }
.product-nav .buy-btn, .product-nav .pay-submit { background: #5e5ae4; color: #fff; padding: 8px 22px; border-radius: 18px; }

/* ---------- E. 通用页面顶部内边距（避免被固定页头遮挡） ---------- */
.page-content { padding-top: 64px; }
@media (max-width: 1199px) { .page-content { padding-top: 56px; } }
.page-content > section:first-child,
.page-content > div:first-child { margin-top: 0; }

/* ---------- F. 新闻列表 / 表格 ---------- */
.news-list, .article-list { display: block; }
.news-list .news-item, .article-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid #f0f0f0;
}
.news-item .news-title, .article-item .article-title { font-size: 15px; color: #222; }
.news-item .news-date, .article-item .article-date { font-size: 13px; color: #999; white-space: nowrap; }
.news-item:hover .news-title { color: #5e5ae4; }

/* ---------- G. 页脚社媒图标（白底不可见问题） ---------- */
.social-media-container .icon-image, .qrcode-text .icon-image {
  width: 22px; height: 22px; object-fit: contain; opacity: .85;
}
.footer-logo-container .social-media-container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 1199px) { .footer-logo-container .social-media-container { justify-content: center; } }

/* ---------- H. 视频轮播（改海报 + 点击播放） ---------- */
video.video-player { width: 100%; height: 100%; object-fit: cover; background: #0b0b14; }
video.video-player { cursor: pointer; }

/* ---------- I. 产品页视频块（改为点击播放，避免首屏拉取大文件） ---------- */
video.banner-video, video.section-video, video.interface-video,
video.video-player { width: 100%; height: auto; object-fit: cover; background: #0d0d17; }
video.banner-video, video.section-video, video.interface-video { aspect-ratio: 16 / 9; cursor: pointer; }
video:-webkit-media-controls-play-button { opacity: 1; }
.brand-overlay { position: absolute; top: 20px; left: 26px; height: 30px; width: auto; z-index: 6; }
.banner { position: relative; }
@media (max-width: 1199px) {
  video.banner-video, video.section-video, video.interface-video { aspect-ratio: 16 / 9; }
  .brand-overlay { top: 12px; left: 14px; height: 22px; }
}

/* ---------- J. 全局横向溢出消除（PC + 移动） ---------- */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }
.layout-wrapper { overflow-x: hidden; }
.video-carousel-section, .video-carousel-container, .videos-wrapper { overflow: hidden !important; }
video { max-width: 100% !important; }
video.banner-video, video.section-video, video.interface-video, video.power-video { width: 100% !important; height: auto !important; }
.hero-banner-section, .banner-container, .banner-slider, .banner-slide { overflow: hidden; }

/* ---------- K. 移动端加强修正（视频轮播叠层 + 首页页头 logo 对比度） ---------- */
@media (max-width: 1199px) {
  /* 移动端透明导航也使用深色承载板，保证白色 Logo 与操作入口可见 */
  .pc-header.is-transparent { background: rgba(8, 9, 14, .96) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, .18) !important; }
  /* 视频轮播：绝对定位残留导致区块变黑，改为静态单列、仅显示当前项 */
  .video-carousel-section { height: auto !important; padding: 16px 0 0 !important; background: #fff !important; }
  .video-carousel-container, .videos-wrapper { height: auto !important; position: static !important; }
  .video-carousel-section .video-item {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    transform: none !important; width: 100% !important; max-width: 100% !important;
    margin: 0 0 12px !important; opacity: 1 !important; visibility: visible !important; display: block !important;
  }
  .video-carousel-section .video-item.far-left,
  .video-carousel-section .video-item.far-right,
  .video-carousel-section .video-item.left,
  .video-carousel-section .video-item.right { display: none !important; }
  .video-wrapper { position: static !important; width: 100% !important; height: auto !important; }
  .video-wrapper video { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; }
  .video-overlay { position: static !important; background: none !important; }
  .video-content { position: static !important; padding: 10px 14px 0 !important; text-align: left !important; }
  .video-title { font-size: 17px !important; }
  .video-actions { justify-content: flex-start !important; }
  .video-indicators, .scroll-button-left, .scroll-button-right { display: none !important; }

  /* 首页页头：统一使用不透明深色底，保证白色 logo 与入口可辨识 */
  .pc-header.is-transparent { background: rgba(8, 9, 14, .96) !important; box-shadow: 0 2px 14px rgba(0,0,0,.18) !important; }
  .pc-header.is-transparent .logo img { height: 26px !important; }
  .pc-header:not(.is-transparent) { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; }
  .pc-header .header-content { min-height: 56px; }

  /* 商品详情页 sticky 导航与标题不再重叠 */
  .product-nav { position: static !important; }
  .product-nav .container, .product-nav > div { padding: 8px 12px !important; gap: 8px !important; }
  .product-nav .buy-btn { padding: 7px 16px !important; }

  /* 页脚栏目标题左对齐，避免居中错位 */
  .footer-section { text-align: left !important; }
  .footer-section .section-title { text-align: left !important; }
  .social-media-container { justify-content: flex-start !important; }

  /* 全站内容区留白收紧 */
  .pp-home-info, .pp-doc { padding-left: 16px !important; padding-right: 16px !important; }
  .banner-slide .banner-image { max-height: 60vh; object-fit: contain; }
}

/* ---------- L. 首屏 banner 黑边消除 + 视频区背景适配 ---------- */
.hero-banner-section { background: #eef2f5 !important; height: auto !important; }
.hero-banner-section .banner-container,
.hero-banner-container, .banner-container { height: auto !important; max-height: none !important; }
.banner-slider { height: auto !important; }
.banner-slide { position: relative !important; inset: auto !important; height: auto !important; }
.banner-slide[style*="display: none"] { display: none !important; }
.banner-slide .banner-link { height: auto !important; }
.banner-image { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; }
/* 视频轮播区：PC 维持深色影院感，移动端已改为白底单列 */
@media (min-width: 1200px) { .video-carousel-section { background: #0d0d17 !important; } }

/* ---------- M. 移动端首屏 banner 宽度收敛（消除图片被裁切） ---------- */
@media (max-width: 1199px) {
  .hero-banner-section, .hero-banner-section .banner-container, .banner-slider,
  .banner-slide, .banner-slide .banner-link, .banner-link {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  .banner-slide .banner-image, .banner-image {
    width: 100% !important; height: auto !important; max-width: 100% !important;
    max-height: none !important; object-fit: contain !important;
  }
  .banner-buttons { top: auto !important; bottom: 16px !important; left: 50% !important; }
  .banner-indicators { bottom: 6px !important; }
}

/* ---------- N. 内容页左边界留白统一（品牌动态 / 服务网点 / 软件中心） ---------- */
.story-nav, .story-side, .story-page h1, .about-page h1,
.page-content > .page > h1, .page-content > .page > h2 { padding-left: 24px; padding-right: 24px; }
.page-content > .page { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.page-content > .page > .banner { margin-left: -24px; margin-right: -24px; width: calc(100% + 48px); }
.filter-bar, .filter-wrap, .outlets-filter { padding-left: 0; padding-right: 0; }
@media (max-width: 1199px) {
  .story-nav, .story-side, .story-page h1, .about-page h1,
  .page-content > .page > h1, .page-content > .page > h2 { padding-left: 16px; padding-right: 16px; }
  .page-content > .page { padding-left: 16px; padding-right: 16px; }
  .page-content > .page > .banner { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
}

/* ---------- P. 商品详情页移动端长图区彻底收敛 ---------- */
@media (max-width: 1199px) {
  /* 详情导航条：移动端收起，避免与价格条/标题重叠 */
  .product-detail-page { padding-top: 0 !important; }
  .product-nav .nav-links { gap: 8px !important; flex-wrap: wrap !important; padding: 8px 6px !important; }
  .product-nav .nav-link, .product-nav .buy-btn { padding: 5px 10px !important; font-size: 13px !important; }
  .product-nav .buy-btn { display: inline-block !important; }

  /* 价格条底部间距，避免与长图区粘连 */
  .yjg-pricebar { margin-bottom: 0 !important; }
  .custom-detail-wrapper, .product-detail-content, .product-detail-page { overflow-x: hidden !important; max-width: 100% !important; }
  .custom-detail-wrapper .wrap, .custom-detail-wrapper [class*="detail"],
  .custom-detail-wrapper section, .custom-detail-wrapper .content,
  .custom-detail-wrapper .title-group, .custom-detail-wrapper .banner {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  /* 长图、标题、视频一律等比缩放，禁止固定高度/绝对定位拉伸 */
  .custom-detail-wrapper img { width: 100% !important; height: auto !important; max-width: 100% !important; }
  .custom-detail-wrapper .title-group h3,
  .custom-detail-wrapper .title-group p,
  .custom-detail-wrapper .solgan-title-img,
  .custom-detail-wrapper .solgan-img { width: 100% !important; height: auto !important; margin-left: 0 !important; }
  .custom-detail-wrapper .title-group h3 { font-size: 30px !important; }
  .custom-detail-wrapper .title-group p { font-size: 15px !important; }
  .custom-detail-wrapper video { width: 100% !important; height: auto !important; object-fit: cover !important; }
  .custom-detail-wrapper .banner { aspect-ratio: 4/3 !important; background-size: cover !important; }

  /* 固定宽度栅格块（intel/cooling/rgb/feature 等）移动端改流式 */
  .custom-detail-wrapper [class*="items"],
  .custom-detail-wrapper [class*="wrap"],
  .custom-detail-wrapper [class*="content"] { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .custom-detail-wrapper [class*="items"] { display: block !important; }
  .custom-detail-wrapper [class*="item"] { width: 100% !important; max-width: 100% !important; }
}

/* ---------- Q. 商品详情页首屏结构收紧（桌面与移动） ---------- */
.product-detail-page > div > .product-nav { z-index: 4; }
.product-detail-page .custom-detail-wrapper { margin-top: 0 !important; }
.product-detail-page .custom-detail-wrapper > .h-\\[58px\\] { display: none !important; }
@media (min-width: 1200px) {
  .product-detail-page { padding-top: 0 !important; }
  .product-detail-page .product-nav { top: 0 !important; }
  .product-detail-page .product-nav .nav-links { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 1199px) {
  .product-detail-page .custom-detail-wrapper > .h-\\[58px\\] { display: none !important; }
  .product-detail-page .custom-detail-wrapper { margin-top: 0 !important; }
}

/* ---------- O. 品牌动态页侧栏栅格 + 视频块 ---------- */
.story-page { padding: 84px 24px 40px; }
.story-page-wrapper, .sections-container { width: 100%; max-width: 1080px; margin: 0 auto; }
.side-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 22px; padding: 0; border-bottom: 1px solid #eee; }
.side-nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.side-nav li { font-size: 14px; color: #555; padding: 8px 0; cursor: pointer; border-bottom: 2px solid transparent; }
.side-nav li.active { color: #5e5ae4; border-bottom-color: #5e5ae4; font-weight: 600; }
.section-title { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.about-image video, .about-image img, .section-content video, .section-content img { width: 100%; height: auto; border-radius: 10px; }
.about-description p { font-size: 14px; line-height: 2.05; color: #444; margin: 0 0 12px; }
.content-wrapper, .about-container { width: 100%; }
@media (max-width: 1199px) {
  .story-page { padding: 72px 16px 32px; }
  .side-nav li { font-size: 13px; }
  .section-title { font-size: 18px; }
  .about-description p { font-size: 13px; line-height: 1.95; }
}

/* ---------- S. 导航Logo对比度：深浅背景自动切换 ---------- */
/* 透明态统一使用深色承载板，避免白色 Logo 落在浅色首屏上消失 */
.pc-header.is-transparent { background: rgba(8, 9, 14, .96) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, .18) !important; }
.pc-header.is-transparent .header-actions .language-select { display: none !important; }
.pc-header .logo img { width: auto !important; height: 34px !important; object-fit: contain; transition: opacity .2s ease; }
.pc-header:not(.is-transparent) .logo img,
.pc-header.is-scrolled .logo img { content: url('/images/cn/3390fb708032.webp'); }
.pc-header.is-transparent .logo img.logo-on-dark,
.pc-header.is-transparent.is-home .logo img { content: url('/images/cn/007d377e5f08.webp'); }
@media (max-width: 1199px) {
  .pc-header .logo img { height: 28px !important; }
  .pc-header.is-transparent .logo img.logo-on-dark,
  .pc-header.is-transparent.is-home .logo img { content: url('/images/cn/007d377e5f08.webp'); }
  .pc-header:not(.is-transparent) .logo img,
  .pc-header.is-scrolled .logo img { content: url('/images/cn/3390fb708032.webp'); }
}

/* ---------- R. 详情页首屏统一：移动端不保留桌面空白，Canglong 图片不越界 ---------- */
@media (max-width: 1199px) {
  .pc-header, .pc-header .container, .pc-header .header-content { width: 100% !important; min-width: 0 !important; }
  .pc-header .container { padding: 0 16px !important; }
  .page-content { padding-top: 0 !important; }
  .product-detail-page { padding-top: 0 !important; }
  .product-detail-page > div > .product-nav { height: auto !important; min-height: 0 !important; }
  .product-detail-page > div > .product-nav .nav-container { height: auto !important; min-height: 0 !important; }
  .product-detail-page > div > .product-nav .nav-links { min-height: 0 !important; }
  .product-detail-page .custom-detail-wrapper { clear: both !important; }
  .product-detail-page .canglong18pro2-detail,
  .product-detail-page .detail-canvas,
  .product-detail-page .canglong18pro2-detail section { max-width: 100% !important; overflow: hidden !important; }
  .product-detail-page .canglong18pro2-detail img { max-width: 100% !important; object-fit: contain !important; }
  .product-detail-page .canglong18pro2-detail [class*="speaker"],
  .product-detail-page .canglong18pro2-detail [class*="audio"] { max-width: 100% !important; overflow: hidden !important; }
  .product-detail-page .canglong18pro2-detail img { position: static !important; left: auto !important; right: auto !important; width: 100% !important; }
}