/**
 * 全站顶栏 + 主导航响应式
 * - 以 1440 设计稿为基准，随视口连续缩放
 * - 布局结构在断点切换（单行 / 两行 / 手机）
 */

/* 解除地板宽：彩色主题 body{width:1280} 在窄屏会挤爆 */
@media (max-width: 1280px) {
  html,
  body {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }
}

/* ========== 随屏缩放变量（100vw/1440，限制 0.85~1；提高下限避免火狐下导航过小） ========== */
:root {
  /* 用单位长度相除，避免火狐对嵌套 calc/自定义属性解析异常导致字号塌缩 */
  --yw-ui-scale: clamp(0.85, 100vw / 1440px, 1);
  --yw-container-max: 1440px;
  --yw-logo-max: calc(360px * var(--yw-ui-scale));
  --yw-search-max: calc(640px * var(--yw-ui-scale));
  --yw-header-pad-x: clamp(12px, 1.2vw, 16px);
  --yw-header-pad-b: calc(18px * var(--yw-ui-scale));
  --yw-header-gap: clamp(8px, 1.4vw, 20px);
  --yw-search-h: max(36px, calc(40px * var(--yw-ui-scale)));
  --yw-phone-size: max(16px, calc(20px * var(--yw-ui-scale)));
  --yw-phone-icon: max(28px, calc(34px * var(--yw-ui-scale)));
  --yw-time-size: max(12px, calc(12px * var(--yw-ui-scale)));
  --yw-tab-size: max(12px, calc(12px * var(--yw-ui-scale)));
  --yw-nav-font: max(14px, calc(16px * var(--yw-ui-scale)));
  --yw-nav-pad-x: clamp(8px, 1.6vw, 28px);
  --yw-nav-h: max(42px, calc(47px * var(--yw-ui-scale)));
}

/* ========== 桌面基线：logo 左 / 搜索中 / 电话右 ========== */
.header {
  height: auto !important;
  min-height: 0;
  padding-top: calc(28px * var(--yw-ui-scale)) !important;
  padding-bottom: var(--yw-header-pad-b);
  overflow: visible !important;
  box-sizing: border-box;
}

.header-search-wrap,
.header .common-header,
.header .clearfix-menu,
header-search-bar.clearfix-menu,
header-search-bar.container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px var(--yw-header-gap);
  width: 100%;
  max-width: var(--yw-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--yw-header-pad-x);
  padding-right: var(--yw-header-pad-x);
  box-sizing: border-box;
}

.header-search-wrap .logo,
.header-search-wrap .search,
.header-search-wrap .contact,
.header-search-wrap .sale-btn,
.header .common-header .logo,
.header .common-header .search,
.header .common-header .contact,
.header .common-header .sale-btn,
.header .logo,
.header .search,
.header .contact,
.header .sale-btn {
  float: none !important;
  position: static !important;
}

/* logo：随屏缩放，完整显示 */
.header-search-wrap .logo,
.header .common-header .logo,
.header .logo {
  flex: 0 1 auto;
  width: auto !important;
  max-width: var(--yw-logo-max);
  min-width: 0;
  margin: 0 !important;
  align-self: flex-end;
  line-height: 0;
  overflow: visible;
}

.header-search-wrap .logo h1,
.header .common-header .logo h1,
.header .logo h1 {
  margin: 0;
  line-height: 0;
  display: block;
  max-width: 100%;
  overflow: visible;
}

.header-search-wrap .logo .logo-box,
.header .logo .logo-box {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  overflow: visible !important;
}

.header-search-wrap .logo img,
.header-search-wrap .logo-img,
.header .common-header .logo img,
.header .logo img,
.header .logo .logo-img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(70px * var(--yw-ui-scale));
  object-fit: contain;
}

/* 搜索：占中间，宽度随屏缩放 */
.header-search-wrap .search,
.header .common-header .search,
.header .search {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  max-width: var(--yw-search-max);
  margin: 0 auto !important;
  align-self: flex-end;
  box-sizing: border-box;
}

.header .search-tabs {
  overflow: hidden;
  width: 100%;
}

.header .search-tabs .btn {
  float: left;
  height: calc(22px * var(--yw-ui-scale));
  line-height: calc(22px * var(--yw-ui-scale));
  width: auto !important;
  min-width: calc(56px * var(--yw-ui-scale));
  padding: 0 calc(6px * var(--yw-ui-scale));
  margin-right: calc(8px * var(--yw-ui-scale));
  font-size: var(--yw-tab-size);
  box-sizing: border-box;
}

/* 电话 */
.header-search-wrap .contact,
.header-search-wrap .sale-btn,
.header .common-header .contact,
.header .common-header .sale-btn,
.header .contact {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0 !important;
  margin-bottom: 0;
  margin-right: 0 !important;
  align-self: flex-end;
  min-width: 0;
  white-space: nowrap;
}

.header .contact .icons {
  float: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  width: var(--yw-phone-icon) !important;
  height: var(--yw-phone-icon) !important;
  line-height: var(--yw-phone-icon) !important;
}

.header .contact .icons .iconfont {
  font-size: var(--yw-phone-icon) !important;
}

.header .contact .infos {
  margin-left: calc(10px * var(--yw-ui-scale));
  margin-right: 0;
  line-height: 1.25;
}

.header .contact .infos .number {
  margin: 0;
  height: auto !important;
  line-height: 1.2 !important;
}

.header .contact .infos .number strong,
.header .contact .phone {
  margin-top: 0;
  font-size: var(--yw-phone-size) !important;
}

.header .contact .infos .time {
  margin: 0;
  height: auto;
  line-height: 1.3;
  font-size: var(--yw-time-size);
}

/* 搜索表单：高度/字号随屏缩放，内部可收缩 */
.header .search-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.header .search-box .search-form {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
  max-width: 100%;
  height: var(--yw-search-h) !important;
  line-height: var(--yw-search-h) !important;
  box-sizing: border-box;
}

.header .search-box .search-select,
.header .search-box .search-btn,
.header .search-box .tuxing-btn,
.header .search-box .category-select {
  float: none !important;
  flex: 0 0 auto;
}

.header .search-box .search-input,
.header .search-box .search-form.zhuce-form .search-input {
  float: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  line-height: normal !important;
  margin-top: 0 !important;
  font-size: calc(13px * var(--yw-ui-scale));
}

.header .search-box .search-select {
  width: auto;
  max-width: calc(106px * var(--yw-ui-scale));
  height: auto !important;
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  font-size: calc(12px * var(--yw-ui-scale));
}

.header .search-box .search-form.zhuce-form .search-btn,
.header .search-box .search-btn {
  flex: 0 0 auto;
  width: calc(100px * var(--yw-ui-scale)) !important;
  min-width: 64px;
  height: var(--yw-search-h) !important;
  line-height: var(--yw-search-h) !important;
  margin-top: 0 !important;
  font-size: calc(14px * var(--yw-ui-scale));
  box-sizing: border-box;
}

.header .search-box .tuxing-btn {
  width: calc(30px * var(--yw-ui-scale)) !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .search-box .category-select {
  width: calc(90px * var(--yw-ui-scale)) !important;
  max-width: 20%;
}

/* 导航：最长 1440 居中，字号/间距随屏缩放 */
.nav {
  height: auto;
  min-height: var(--yw-nav-h);
  line-height: var(--yw-nav-h);
  overflow: visible;
  width: 100%;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  font-size: var(--yw-nav-font);
}

.nav .menu-down {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.nav .nav-item.center,
.nav .nav-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  float: none;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.nav .nav-item.clearfix::before,
.nav .nav-item.clearfix::after {
  display: none;
  content: none;
  clear: none;
}

.nav .nav-item li {
  float: none;
  /* 禁止收缩，避免火狐下菜单项被挤扁、字号视觉上「太小/错位」 */
  flex: 0 0 auto;
  position: relative;
  min-width: auto;
}

.nav .nav-item li a {
  padding: 0 var(--yw-nav-pad-x) !important;
  font-size: var(--yw-nav-font) !important;
  line-height: var(--yw-nav-h);
  white-space: nowrap;
  box-sizing: border-box;
}

.nav .nav-item li .icon-mianfei,
.nav .icon-mianfei {
  top: -8px;
  right: 4px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: none;
  transform-origin: top right;
}

/* 右侧悬浮栏：窄屏贴边 */
@media (max-width: 1280px) {
  .right-sidebar {
    right: 12px !important;
    margin: 0 !important;
    left: auto !important;
  }

  .center,
  .container {
    padding-right: 100px;
    box-sizing: border-box;
  }
}

/* ========== ≤1200：两行 —— 上 logo+电话，下搜索通栏（缩放仍用全局 --yw-ui-scale） ========== */
@media (max-width: 1200px) {
  :root {
    --yw-search-max: 100%;
  }

  .header {
    height: auto !important;
    min-height: 0;
    padding-top: calc(16px * var(--yw-ui-scale)) !important;
    padding-bottom: calc(14px * var(--yw-ui-scale));
    overflow: visible !important;
  }

  .header-search-wrap,
  .header .common-header,
  .header .clearfix-menu,
  header-search-bar.clearfix-menu,
  header-search-bar.container {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
  }

  .header-search-wrap .logo,
  .header .common-header .logo,
  .header .logo {
    flex: 0 1 auto;
    max-width: var(--yw-logo-max);
    order: 1;
    overflow: visible;
  }

  .header-search-wrap .contact,
  .header .common-header .contact,
  .header .contact {
    flex: 0 0 auto;
    order: 2;
    margin-left: auto !important;
  }

  .header-search-wrap .search,
  .header .common-header .search,
  .header .search {
    flex: 1 1 100%;
    order: 3;
    max-width: none;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  .header-search-wrap .sale-btn,
  .header .sale-btn {
    display: none;
  }

  .nav {
    max-width: 1440px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .nav .menu-down {
    min-width: 100%;
  }

  .nav .nav-item {
    width: max-content;
    min-width: 100%;
    padding: 0 8px;
  }

  .nav .nav-item li {
    flex: 0 0 auto;
  }

  .nav .menu-hd-child .menu-dropdown li {
    float: none;
  }
}

/* ========== ≤1024 ========== */
@media (max-width: 1024px) {
  .header .contact .infos .time,
  .header-search-wrap .contact .sub {
    display: none;
  }

  .center,
  .container {
    padding-right: 90px;
  }
}

/* ========== ≤768：手机 ========== */
@media (max-width: 768px) {
  :root {
    --yw-logo-max: calc(200px * var(--yw-ui-scale));
    --yw-search-max: 100%;
  }

  .header {
    padding-top: 12px !important;
    padding-bottom: 12px;
  }

  .header-search-wrap,
  .header .common-header,
  .header .clearfix-menu,
  header-search-bar.clearfix-menu,
  header-search-bar.container {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  .header-search-wrap .logo,
  .header .logo {
    flex: none;
    max-width: var(--yw-logo-max);
    margin: 0 auto !important;
    text-align: center;
    order: 1;
  }

  .header-search-wrap .logo img,
  .header .logo img {
    max-width: 100%;
    max-height: 56px;
    margin: 0 auto;
  }

  .header-search-wrap .search,
  .header .search {
    flex: none;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    order: 2;
  }

  .header-search-wrap .contact,
  .header-search-wrap .sale-btn,
  .header .contact,
  .header .sale-btn {
    display: none !important;
  }

  .center,
  .container {
    padding-right: 12px;
  }

  .right-sidebar {
    right: 10px !important;
    bottom: 20px !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  .nav {
    border-radius: 0;
  }
}