.header-section {
  --header-column-gap: 20px;
  --header-column-gap-mobile: 8px;
  --header-nav-dropdown-menu-z-index: 2;

  position: relative;
  background-color: rgba(var(--color-background), 1);
}

/* 透明头部模式 */
.header-section--transparent {
  background-color: transparent;
}

/* 透明头部：顶部渐变遮罩已移除 */

/* 透明头部使用负margin让下方内容上移，实现覆盖效果 */
theme-sticky-header[data-transparent="true"] {
  position: relative;
  z-index: var(--z-index-sticky);
  margin-bottom: calc(-1 * var(--header-height, 70px));
}

theme-sticky-header[data-transparent="true"] .header-section--transparent {
  color: #fff;
}

/* 透明头部滚动后恢复正常 */
.theme-sticky-header--sticky theme-sticky-header[data-transparent="true"] {
  margin-bottom: 0;
}

.theme-sticky-header--sticky theme-sticky-header[data-transparent="true"] .header-section {
  background-color: rgba(var(--color-background), 1);
  color: inherit;
}

/* Transparent Logo 切换逻辑 */
.header__logo-image--transparent {
  display: none;
}

/* 透明模式下：显示透明 Logo，隐藏默认 Logo */
theme-sticky-header[data-transparent="true"] .header-section--transparent .header__logo-image--default {
  display: none;
}

theme-sticky-header[data-transparent="true"] .header-section--transparent .header__logo-image--transparent {
  display: block;
}

/* 滚动后（sticky）：恢复默认 Logo */
.theme-sticky-header--sticky theme-sticky-header[data-transparent="true"] .header__logo-image--default {
  display: block;
}

.theme-sticky-header--sticky theme-sticky-header[data-transparent="true"] .header__logo-image--transparent {
  display: none;
}

.header__container-top {
  position: relative;
  box-sizing: content-box;
}

/* 透明头部整个横向区域悬停反白效果 */
theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top {
  transition: background-color 0.2s ease;
}

theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover {
  background-color: #fff;
}

theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover,
theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover a,
theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover .header-nav__menu-item > a,
theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover .header-action__link {
  color: #000;
}

theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover svg {
  stroke: #000;
  color: #000;
}

/* hover 时切换回默认 Logo */
theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover .header__logo-image--default {
  display: block;
}

theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top:hover .header__logo-image--transparent {
  display: none;
}

/* Keep header solid while search is open to avoid transparent bleed-through on homepage. */
body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent,
body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent .header__container-top {
  background-color: rgba(var(--color-background), 1);
  color: rgb(var(--color-text));
}

body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent a,
body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent .header-nav__menu-item > a,
body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent .header-action__link {
  color: rgb(var(--color-text));
}

body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent svg {
  stroke: currentColor;
  color: currentColor;
}

body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent .header__logo-image--default {
  display: block;
}

body.header-search-bar--lockscreen theme-sticky-header[data-transparent="true"] .header-section--transparent .header__logo-image--transparent {
  display: none;
}

.header__container-top.divider::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  content: "";
  background-color: rgba(var(--color-entry-line), 1);
}
.header__container-top-wrap {
  position: relative;
  display: grid;
  grid-template: "action-bar-left nav logo action-bar-right" auto / minmax(
      0,
      auto
    ) minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--header-column-gap);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

/* 桌面端：action-bar-left 隐藏后其 column-gap 仍占 20px，设为 0 消除 HOME 左边间距 */
@media (min-width: 960px) {
  .header__container[layout="center_logo_left_menu"] .header__container-top-wrap {
    column-gap: 0;
  }
}
/* 960~1023px：菜单已收进抽屉，只剩「汉堡 / Logo / 功能区」三列，保持 Logo 居中 */
@media (min-width: 960px) and (max-width: 1023px) {
  .header__container[layout="center_logo_left_menu"] .header__container-top-wrap {
    grid-template-areas: "action-bar-left logo action-bar-right";
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    column-gap: var(--header-column-gap);
  }
}
@media (max-width: 959px) {
  .header__container-top-wrap {
    display: flex;
    column-gap: var(--header-column-gap-mobile);
  }
}
.header__container[layout="center_logo_wrap_menu"] .header__container-top-wrap {
  display: flex;
}
.header__container[layout^="left_logo_left_menu"] .header__container-top-wrap {
  grid-template-areas: "action-bar-left logo nav action-bar-right";
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
}
.header__container[layout^="left_logo_center_menu"]
  .header__container-top-wrap {
  grid-template-areas: "logo nav action-bar-right";
  grid-template-columns: 1fr minmax(0, auto) 1fr;
}
.header__container[layout="left_logo_center_menu"][type="drawer"]
  .header__container-top-wrap {
  grid-template-areas: "action-bar-left logo nav action-bar-right";
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto) 1fr;
}
.header__container[layout="center_logo_left_menu"][type="drawer"]
  .header__container-top-wrap {
  grid-template-areas: "action-bar-left logo action-bar-right";
  grid-template-columns: 1fr minmax(0, auto) 1fr;
}
.header__container-bottom {
  position: relative;
  z-index: var(--header-nav-dropdown-menu-z-index);
  display: none;
  background-color: rgb(var(--color-background));
}
.header__container[type="drawer"] .header__container-bottom {
  display: none;
}
.header__logo {
  position: relative;
  z-index: calc(var(--header-nav-dropdown-menu-z-index) + 1);
  display: flex;
  grid-area: logo;
  align-items: center;
  order: 20;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  transform: none;
}
.header__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--body3-font-size);
  white-space: nowrap;
}
.header__logo-image {
  width: var(--desktop-size);
  height: auto;
}
@media (max-width: 959px) {
  .header__logo-image {
    width: var(--mobile-size);
    max-height: 100%;
  }
}
[layout^="left_logo_"] .header__logo-link {
  justify-content: flex-start;
}
.header__container[layout="center_logo_wrap_menu"] .header__action-bar {
  flex: 1;
}
[layout$="_wrap_menu"] .header__container-top ~ .header__container-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
[type="drawer"] .header__container-top ~ .header__container-bottom {
  display: none;
}

theme-nav-bar {
  display: contents;
}

.header-nav {
  grid-area: nav;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

/* 1024px 以下菜单单行放不下，收进抽屉，避免换行把 Header 撑成两行 */
@media (max-width: 1023px) {
  .header-nav {
    display: none !important;
  }
}

[layout="left_logo_left_menu"] .header-nav {
  order: 10;
  margin: 0 auto 0 0;
}

.header-nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: stretch;
}

/* 顶栏菜单必须保持单行，换行会把 Logo 和功能区一起挤下去 */
.header__container-top .header-nav__menu {
  flex-wrap: nowrap;
}

.header-nav__menu-item {
  --nav-menu-item-padding-block: 12px;

  display: flex;
  align-items: stretch;
  box-sizing: content-box;
  max-width: 100%;
  min-height: 26px;
  margin-inline: 16px;
}

.header-nav__menu-item:first-child {
  margin-inline-start: 0;
}

/* 1024~1199px：菜单与 Logo 之间的余量不足，按两档收紧间距与字距，保证单行且不贴住 Logo */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header__container-top .header-nav__menu-item:first-child {
    margin-inline-start: 0;
  }
}

@media (min-width: 1120px) and (max-width: 1199px) {
  .header__container-top .header-nav__menu-item {
    margin-inline: 12px;
  }

  .header__container-top .header-nav__menu-item > a > span {
    letter-spacing: 1.25px;
  }
}

@media (min-width: 1024px) and (max-width: 1119px) {
  .header__container-top .header-nav__menu-item {
    margin-inline: 8px;
  }

  .header__container-top .header-nav__menu-item > a > span {
    letter-spacing: 1px;
  }
}

.header-nav__menu-item > a {
  position: relative;
  z-index: calc(var(--header-nav-dropdown-menu-z-index) + 1);
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--body3-font-size);
  font-weight: 700;
  color: var(--color-text);
}

.header-nav__menu-item > a > span {
  padding: var(--nav-menu-item-padding-block) 0;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.5px;
}

[layout$="_wrap_menu"] .header__container-top .header-nav {
  display: none;
}

.header-nav__underline {
  --underline-size: 2px;

  position: relative;
  display: inline-flex;
  flex-direction: column;
  white-space: nowrap;
}

.header-nav__underline::after {
  display: block;
  width: 0;
  height: var(--underline-size);
  pointer-events: none;
  content: "";
  background-color: rgb(var(--color-text));
  transition: width 200ms ease-in;
}

/* 顶级菜单项：underline 贴在 header 最底部灰线处 */
.header-nav__menu > .header-nav__menu-item > .header-nav__underline::after {
  position: absolute;
  bottom: calc(-1 * var(--header-padding-block-end, 8px));
  left: 0;
  display: block;
  width: 0;
}

.header-nav-dropdown-menu .header-nav__underline::after,
.header-nav-dropdown-panel .header-nav__underline::after {
  inset-block-end: 0;
}

.header-nav__underline:hover::after,
.header-nav__underline-control:hover > .header-nav__underline::after,
.header-nav__underline-scope:hover
  > .header-nav__underline-control
  > .header-nav__underline::after {
  width: 100%;
}

.header-nav__ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.header-nav-dropdown-menu-scope {
  position: absolute;
  inset-block-start: 0;
  height: 100%;
  pointer-events: none;
  transition:
    pointer-events 0s 0.3s,
    transform 0.3s ease;
  transform: translate(calc(var(--nav-menu-item-padding-block) * -1), 100%);
}

header:hover .header-nav-dropdown-menu-scope {
  pointer-events: all;
}

.header-nav-dropdown-menu {
  position: relative;
  box-sizing: content-box;
  display: inline-flex;
  width: 100%;
}

.header-nav-dropdown-menu__menu {
  padding-block: 10px;
  background-color: rgb(var(--color-background));
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 10%);
}

.header-nav-dropdown-menu__hero {
  display: inline-flex;
  flex: 1;
  width: max-content;
  min-width: 168px;
  max-width: 360px;
  padding: 4px 20px;
  font-size: var(--body3-font-size);
  line-height: 1.625;
  color: rgb(var(--color-text));
  transition: color 200ms ease-in;
}

.header-nav-dropdown-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
}

.header-nav-dropdown-panel__menu {
  position: absolute;
  z-index: var(--header-nav-dropdown-menu-z-index);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  padding: 40px;
  background-color: rgb(var(--color-background));
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 10%);
}

.header-nav-dropdown-panel__menu > li {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 460px;
  padding-inline-end: 15px;
}

.header-nav-dropdown-panel__menu > li > .header-nav__underline-scope {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}

.header-nav-dropdown-panel__hero {
  flex: 1;
  margin-block-end: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--color-text));
  opacity: 0.75;
}

.header-nav-dropdown-panel__link {
  display: inline-flex;
  flex: 1;
  max-width: 100%;
  padding: 5px 15px 5px 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: rgb(var(--color-text));
  opacity: 0.38;
  transition: opacity 200ms ease-in;
}

.header-nav-dropdown-panel__link:hover {
  opacity: 0.75;
}

/* mega panel 内取消下划线装饰，用颜色区分层级 */
.header-nav-mega-panel .header-nav__underline::after {
  display: none !important;
}

/* 单列平铺链接浅色 */
.header-nav-mega-panel__links--flat .header-nav-dropdown-panel__link {
  padding: 6px 0;
  opacity: 0.38;
}

.header-nav-mega-panel__links--flat .header-nav-dropdown-panel__link:hover {
  opacity: 0.75;
}

.header-nav-dropdown-panel__hero > .header-nav__underline,
.header-nav-dropdown-panel__link > .header-nav__underline {
  max-width: 100%;
}

.header-nav-dropdown-panel__submenu {
  display: flex;
  flex-direction: column;
}

.header-nav-dropdown-panel__submenu > li {
  display: flex;
  flex: 1;
  max-width: 100%;
}

.header-nav-dropdown-menu,
.header-nav-dropdown-panel {
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 200ms ease-in,
    transform 200ms ease-in;
  transform: translateY(-10px);
}

.header-nav__menu-item.open .header-nav-dropdown-menu,
.header-nav__menu-item.open .header-nav-dropdown-panel {
  z-index: var(--header-nav-dropdown-menu-z-index);
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}

.header-nav__menu-item.open > a.header-nav__underline::after {
  width: 100%;
}
/* === Mega Menu === */

.header-nav-mega-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-in, transform 200ms ease-in;
  transform: translateY(-10px);
}

.header-nav__menu-item.open .header-nav-mega-panel {
  z-index: var(--header-nav-dropdown-menu-z-index);
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}

.header-nav-mega-panel__body {
  background-color: rgb(var(--color-background));
  box-shadow: 0 8px 16px -8px rgb(0 0 0 / 8%);
  border-top: 1px solid rgb(var(--color-border, 220, 220, 220));
}

.header-nav-mega-panel__inner {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-block: 36px;
  box-sizing: border-box;
}

.header-nav-mega-panel__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  gap: 20px;
  flex: 1 1 0%;
  list-style: none;
  margin: 0;
  padding: 0;
  align-content: start;
}

.header-nav-mega-panel__links > li {
  min-width: 140px;
  max-width: 280px;
  padding-inline-end: 15px;
}

.header-nav-mega-panel__links--flat {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: unset;
  min-width: 180px;
  max-width: 260px;
}

.header-nav-mega-panel__links--flat > li {
  flex: 0 0 auto;
  min-width: unset;
  max-width: unset;
  padding-inline-end: 0;
  padding-inline-end: 0;
}

.header-nav-mega-panel__images {
  display: flex;
  gap: 20px;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 48px;
  align-items: flex-start;
}

.mega-panel-image {
  display: block;
  width: var(--mega-img-width, 260px);
  flex-shrink: 0;
  text-decoration: none;
  color: rgb(var(--color-text));
}

.mega-panel-image__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: rgb(var(--color-background-alt, 240, 240, 240));
}

.mega-panel-image__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mega-panel-image:hover .mega-panel-image__img img {
  transform: scale(1.04);
}

.mega-panel-image__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-background-alt, 230, 230, 230));
  color: rgb(var(--color-text));
  opacity: 0.3;
}

.mega-panel-image__placeholder svg {
  width: 48px;
  height: 48px;
}

.mega-panel-image__caption {
  margin-block-start: 12px;
  text-align: center;
}

.mega-panel-image__caption-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgb(var(--color-text));
  transition: opacity 200ms ease-in;
}

.mega-panel-image__caption-subtitle {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--color-text), 0.55);
  margin-top: 4px;
}

.mega-panel-image:hover .mega-panel-image__caption-title {
  opacity: 0.7;
}

.transparent .header-nav-mega-panel__body {
  background-color: rgb(var(--color-background));
}