.header {
  --header-column-gap: 8px;
  position: relative;
  background-color: rgb(var(--color-page-background));
  color: rgb(var(--transparent-color-text, var(--color-text)));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header a:not(.button),
.header a:not(.button):hover {
  color: inherit;
}
.header .header__menu-drawer .modal__content {
  color: rgb(var(--color-text));
}
.header .search-modal__content {
  color: rgb(var(--color-text));
}
@media screen and (max-width: 959px) {
  .header {
    --header-column-gap: 0px;

    min-height: 60px;
    height: var(--header-mobile-height);
  }
}
.header #cart-icon-bubble-wrapper {
  display: flex;
  height: 28px;
  width: 22px;
  justify-content: center;
  align-items: center;
}
.header.is-transparent {
  position: absolute;
  width: 100%;
  background-color: transparent;
}
.header.is-transparent.is-transparent--active::before {
  transform: scaleY(1);
}
.header.is-transparent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: -1;
  background: rgba(var(--color-page-background, #fff));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.shopline-section-header-scrolling .header.is-transparent::before {
  transition: none;
}
.header__full_width {
  max-width: 100%;
}
.header__container {
  display: grid;
  column-gap: var(--header-column-gap);
  align-items: center;
}
.header__container--left-left {
  grid-template: "logo menu tools icons" auto / auto 1fr auto auto;
}
@media screen and (min-width: 960px) {
  .header__container--left-left .header__heading {
    margin-right: 12px;
  }
}
@media screen and (max-width: 959px) {
  .header__container--left-left {
    grid-template: "left-tools logo icons" auto / 1fr auto 1fr;
  }
  .header__container--left-left.mobile-logo-align-left {
    grid-template: "left-tools logo menu tools icons" auto / auto auto 1fr auto;
  }
}
.header__container--left-line {
  grid-template:
    "logo . tools icons" auto
    "menu menu menu menu" auto
    / auto 1fr auto auto;
}
.header__container--left-line .header-inline-menus__item:first-child {
  padding-left: 0;
}
@media screen and (max-width: 959px) {
  .header__container--left-line {
    grid-template: "left-tools logo icons" auto / 1fr auto 1fr;
  }
  .header__container--left-line.mobile-logo-align-left {
    grid-template: "left-tools logo . tools icons" auto / auto auto 1fr auto;
  }
}
@media screen and (min-width: 960px) {
  .header__container--middle-line {
    grid-template:
      "empty logo buttons" auto
      "menu menu menu" auto
      / 1fr auto 1fr;
  }
}
@media screen and (max-width: 959px) {
  .header__container--middle-line {
    grid-template: "left-tools logo buttons" auto / 1fr auto 1fr;
  }
  .header__container--middle-line.mobile-logo-align-left {
    grid-template: "left-tools logo buttons" auto / auto auto 1fr;
  }
}
.header__container--middle-line .header__inline-nav {
  margin: auto;
}
.header__container--middle-line .header__buttons {
  grid-area: buttons;
  justify-self: end;
  display: flex;
}
@media screen and (min-width: 960px) {
  .header__container--middle-left {
    grid-template: "menu logo buttons" auto / 1fr auto 1fr;
  }
}
@media screen and (max-width: 959px) {
  .header__container--middle-left {
    grid-template: "left-tools logo buttons" auto / 1fr auto 1fr;
  }
  .header__container--middle-left.mobile-logo-align-left {
    grid-template: "left-tools logo buttons" auto / auto auto 1fr;
  }
}
.header__container--middle-left .header__buttons {
  grid-area: buttons;
  justify-self: end;
  display: flex;
}
.header__nav-style--drawer.header__container--left-line,
.header__nav-style--drawer.header__container--left-left {
  grid-template: "drawer_menu logo tools icons" auto / auto 1fr auto auto;
}
@media screen and (max-width: 959px) {
  .header__nav-style--drawer.header__container--left-line,
  .header__nav-style--drawer.header__container--left-left {
    grid-template: "left-tools logo icons" auto / 1fr auto 1fr;
  }
  .header__nav-style--drawer.header__container--left-line.mobile-logo-align-left,
  .header__nav-style--drawer.header__container--left-left.mobile-logo-align-left {
    grid-template: "left-tools logo tools icons" auto / auto 1fr auto auto;
  }
}
.header__nav-style--drawer.header__container--left-line .header__heading,
.header__nav-style--drawer.header__container--left-left .header__heading {
  width: 100%;
}
.header__nav-style--drawer.header__container--middle-line,
.header__nav-style--drawer.header__container--middle-left {
  grid-template: "drawer_menu logo buttons" auto / 1fr auto 1fr;
}
@media screen and (max-width: 959px) {
  .header__nav-style--drawer.header__container--middle-line,
  .header__nav-style--drawer.header__container--middle-left {
    grid-template: "left-tools logo buttons" auto / 1fr auto 1fr;
  }
  .header__nav-style--drawer.header__container--middle-line.mobile-logo-align-left,
  .header__nav-style--drawer.header__container--middle-left.mobile-logo-align-left {
    grid-template: "left-tools logo buttons" auto / auto auto 1fr;
  }
}
.header__container--left-line .header__inline-nav--has-divider::before,
.header__container--middle-line .header__inline-nav--has-divider::before {
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  border-top: 1px solid rgb(var(--color-entry-line));
}
.header__drawer-nav {
  grid-area: drawer_menu;
}
.header__inline-nav {
  grid-area: menu;
}
.header__tools {
  grid-area: tools;
  justify-self: flex-start;
}
.header__left-tools {
  grid-area: left-tools;
}
.header__icons {
  grid-area: icons;
  justify-self: flex-end;
}
.header__icons,
.header__tools {
  display: flex;
  align-items: center;
  margin-left: calc(-1 * var(--header-column-gap));
}
.header__icons > *,
.header__tools > * {
  margin-left: var(--header-column-gap);
}
.header__icon-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.header__cart-point {
  background-color: #FCD24E;
  border-radius: 10px;
  color: #000;
  top: -1px;
  right: -1px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 6px;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  max-width: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 1;
  transform: scale(0.7);
  transform-origin: right top;
}
.header .drawer .modal__content {
  position: fixed;
  top: var(--header-top-position, 0);
  height: calc(100% - var(--header-top-position, 0));
}
.header .drawer .modal__content details[open] .modal__overlay::after {
  position: absolute;
}
[data-settings-id="shopline-section-header"] {
  position: relative;
  z-index: 30;
}
[data-settings-id="shopline-section-header"].animate {
  transition: all 0.15s ease-out;
}
[data-settings-id="shopline-section-header"].shopline-section-header-sticky {
  position: sticky;
  top: var(--header-sticky-top, 0px);
}
[data-settings-id="shopline-section-header"].shopline-section-header-sticky .is-transparent {
  position: relative;
}
@media (max-width: 959px) {
  [data-settings-id="shopline-section-header"].shopline-section-header-sticky {
    top: var(--mobile-header-sticky-top, 0px);
  }
}
[data-settings-id="shopline-section-header"].shopline-section-header-hidden:not(.menu-open) {
  transform: translateY(-200%);
}
[data-settings-id="shopline-section-header"]:not(.shopline-section-header-scrolling) {
  top: 0 !important;
}
[data-settings-id="shopline-section-header"].shopline-section-header-sticky--always {
  position: sticky;
  top: var(--header-sticky-top, 0px);
  animation: modalSlideInTop 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-settings-id="shopline-section-header"].shopline-section-header-sticky--always
  .is-transparent {
  position: relative;
}
@media (max-width: 959px) {
  [data-settings-id="shopline-section-header"].shopline-section-header-sticky--always {
    top: var(--mobile-header-sticky-top, 0px);
  }
}
.header__heading {
  grid-area: logo;
  margin: 14px auto;
  display: flex;
}
@media screen and (max-width: 959px) {
  .header__heading {
    margin: 10px auto;
  }
}
.header__heading-link {
  color: rgb(var(--color-text));
  font-size: 30px;
  text-align: left;
  text-decoration: none;
}
.header__heading-logo {
  display: block;
  width: var(--header-logo-pc-width, 200px);
  height: auto;
}
@media screen and (max-width: 959px) {
  .header__heading-logo {
    width: var(--header-logo-mobile-width, 100px);
  }
}
/*transform change*/
.is-transparent
  .header__heading-logo--transparent
  + .header__heading-logo--nomal {
  display: none;
}
header.is-transparent--active .header__heading-logo--transparent {
  display: none;
}
header.is-transparent--active
  .header__heading-logo--nomal.header__heading-logo--nomal {
  display: block;
}
@keyframes animateBottomLocalization {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}
@keyframes animateTopLocalization {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-10px);
  }
}
.header__localization form {
  display: flex;
  column-gap: 20px;
  justify-content: center;
}
.header__localization .dropdown-menu__button {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  color: inherit;
}
.header__localization .dropdown-menu__button > span {
  margin-right: 6px;
}
.header__localization .dropdown-menu__list-wrapper {
  opacity: 1;
}
.header__localization .dropdown-menu__list-wrapper.bottom {
  animation: animateBottomLocalization 200ms ease;
  transform: translateY(10px);
}
.header__localization span[data-label] {
  white-space: nowrap;
}
/* header drawer mode */
.header-drawer__localization {
  padding: 10px 0;
  position: relative;
}
.header-drawer__localization:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(var(--color-entry-line));
}
.header-drawer__localization form {
  display: block;
}
.header-drawer__localization .dropdown-menu__button {
  height: 44px;
}
.header-drawer__localization .dropdown-menu__list-wrapper.top {
  animation: animateTopLocalization 200ms ease;
  transform: translateY(-10px);
  border: 1px solid rgba(var(--color-text), 0.1);
}
.menus__link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: rgb(var(--color-text));
  opacity: 1;
  transition: opacity 0.2s;
  cursor: pointer;
}
.header__inline-menus {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0;
}
.header-inline-menus__link {
  --padding-inline: 0px;
  --padding-block: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 32px;
  padding: 0 4px;
  font-family: var(--title-font);
  /* padding: var(--padding-block) var(--padding-inline); */
}
.header-inline-menus__link:hover {
  color: var(--theme-color) !important;
}
.header-inline-menus__link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--theme-color);
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-inline-menus__link:hover::after,
.header-inline-menus__link:focus::after {
  transform: scale(1);
}
.header-inline-menus__item {
  /* padding: 0 16px; */
  padding: 0;
  padding-right: clamp(4px, 1vw, 30px);
  flex-shrink: 0;
}
.header-inline-menus__item:last-child {
  padding-right: 0;
}
.header-inline-menus__item:last-child {
  padding-right: 0;
}
.header-inline-menus__item--has-submenu {
  position: relative;
}
.header-inline-menus__item--has-submenu.is-megamenu:hover
  .header__inline-submenus,
.header-inline-menus__item--has-submenu.is-megamenu:focus
  .header__inline-submenus {
  pointer-events: initial;
  visibility: visible;
  opacity: 1;
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-inline-menus__item--has-submenu .header-inline-menus__arrow {
  display: initial;
}
.header-inline-menus__item.is-megamenu {
  position: static;
}
/*hover polyfill*/
.header-inline-menus__item--has-submenu:hover::before {
  content: attr(data-item-title);
  position: absolute;
  height: 100%;
  top: 0;
  margin-left: -30px;
  padding-left: 30px;
  padding-right: 30px;
  opacity: 0;
}
.header-inline-menus__arrow {
  display: none;
  margin-left: 5px;
}
.header__inline-submenus {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(var(--color-page-background));
  width: 100%;
  z-index: 10;
  border-top: 1px solid rgb(var(--color-entry-line));
  box-shadow: 0 10px 15px #0000001a;
  max-height: 760px;
  min-height: 280px;
  overflow: auto;
  padding: 0 200px;
}
.megamenu__list {
  padding: 40px;
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  flex: 1;
  grid-auto-columns: minmax(100px, 280px);
  grid-auto-flow: column;
}
/*dropdown-menu*/
.header-inline-menus__item--has-submenu:not(.is-megamenu):hover
  .header-dropdown-menu,
.header-inline-menus__item--has-submenu:not(.is-megamenu):focus
  .header-dropdown-menu {
  pointer-events: initial;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.header-dropdown-menu {
  display: block;
  position: absolute;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.2s;
  background-color: rgba(var(--color-page-background));
  z-index: 10;
  min-width: 200px;
  width: max-content;
  max-width: 300px;
  max-height: 760px;
  overflow: auto;
  padding: 10px 0 5px;
  box-shadow: 0 10px 20px rgb(0 0 0 / 9%);
}
.header-dropdown-menu ul {
  padding: 0;
}
.header-dropdown-menu .header-inline-submenus__item {
  padding: 8px 16px;
}
.header-dropdown-menu .header-inline-submenus__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgb(var(--color-text));
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-dropdown-menu .header-inline-submenus__link:hover::after,
.header-dropdown-menu .header-inline-submenus__link:focus::after {
  transform: scale(1);
}
.header-nav-list .menus__link:not(a) {
  cursor: default;
}
.header-nav-list .menus__link:not(a):hover {
  opacity: 1;
}
.header-nav-list .menus__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgb(var(--color-text));
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-nav-list .menus__link:hover::after,
.header-nav-list .menus__link:focus::after {
  transform: scale(1);
}
.megamenu-list__submenu {
  padding: 0;
}
.megamenu-submenu__item + .megamenu-submenu__item {
  margin-top: 8px;
}
.megamenu-list__item-title {
  display: inline-block;
  margin-bottom: 10px;
}
.header__image {
  width: 25vw;
  position: relative;
  overflow: hidden;
}
.header__image .header__image__content {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.header__image img,
.header__image svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  transition: all 0.5s cubic-bezier(0.104, 0.204, 0.492, 1);
  object-position: 50% 50%;
}
.header__image img:hover,
.header__image svg:hover {
  transform: scale(1.05);
}
.header__image .header__image--cover {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 100%;
  white-space: normal;
  padding: 0 50px 50px;
}
.header__image .header__image--cover .header__image_title {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 15px;
  font-weight: 600;
}
.header__image .header__image--cover .header__image_button {
  text-transform: uppercase;
  position: relative;
  letter-spacing: 0.1em;
}
.header__image .header__image--cover .header__image_button::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background: currentColor;
  opacity: 0.2;
  top: calc(100% + 2px);
}
.header__image .header__image--cover .header__image_button::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: currentColor;
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header__image .header__image--cover .header__image_button:hover::after {
  transform: scaleX(1);
}
.header__image-style--normal {
  padding: 40px;
  gap: 20px;
}
.header__image-style--normal .header__image__content {
  height: 0;
}
.header__image-style--normal .header__image {
  width: calc(25vw - 20px);
  overflow-y: auto;
}
.header__image-style--normal .header__image img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: unset;
}
.header__image-style--normal .megamenu__list {
  padding: 0;
}
.header__image-style--normal .header__image--cover {
  position: unset;
  padding: 0;
}
.header__image-style--normal .header__image--cover .header__image_title {
  text-transform: none;
  margin-bottom: 0;
  margin-top: 8px;
}
.menu-item--highlight {
  background: linear-gradient(
    90deg,
    var(--header-highlight-background) 20%,
    rgba(201, 245, 47, 0) 100%
  );
  background-clip: content-box;
  color: var(--header-highlight-text-color) !important;
}
.header__menu-drawer .drawer__main {
  margin-left: calc(-1 * var(--drawer-padding-inline));
  margin-right: calc(-1 * var(--drawer-padding-inline));
  position: relative;
}
.header__user-center-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.header__user-center-button .icon {
  margin-right: 8px;
}
.drawer-menus__sub-menus {
  background: rgba(var(--color-text), 0.05);
}
.drawer-menus__sub-menus .drawer-menus__sub-menus {
  background: transparent;
}
.drawer-menus__sub-menus .drawer-menus__sub-menus .drawer-menus__sub-item {
  padding-left: 15px;
}
.drawer-menus__item,
.drawer-menus__sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  text-decoration: none;
  text-transform: capitalize;

  background: transparent;
  transition: background 0.2s;
}
.drawer-menus__item > a,
.drawer-menus__sub-item > a {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  word-break: break-word;
}
.drawer-menus__item > a {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: var(--drawer-padding-inline);
}
.drawer-menus__sub-item > a {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: var(--drawer-padding-inline);
}
.drawer-menus__item-icon {
  display: flex;
  padding: 0 var(--drawer-padding-inline);
}
.drawer-menus__item-icon .icon-arrow {
  position: revert;
}
.drawer-menus__item-icon-off {
  display: none;
}
details[open] > summary > .drawer-menus__item > .drawer-menus__item-icon-on {
  display: none;
}
details[open] > summary > .drawer-menus__item > .drawer-menus__item-icon-off {
  display: flex;
}
details[open]
  > summary
  > .drawer-menus__sub-item
  > .drawer-menus__item-icon-on {
  display: none;
}
details[open]
  > summary
  > .drawer-menus__sub-item
  > .drawer-menus__item-icon-off {
  display: flex;
}
@keyframes headerSearchModal {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.header__search .modal__content {
  position: absolute;
}
.header__search details[open] .modal__overlay::after {
  position: absolute;
  top: 100%;
  z-index: initial;
}
.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-modal__close-button {
  margin-left: 4px;
  padding: 12px;
  margin-right: 8px;
}
.search-modal__close-button .icon {
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 959px) {
  .search-modal__close-button .icon {
    width: 10px;
    height: 10px;
  }
}
.search-modal__form {
  position: relative;
  flex: 1 0 0;
}
@media screen and (max-width: 959px) {
  .search-modal__form {
    position: static;
  }

  .search-modal__form .predictive-search {
    border-top: 1px solid rgb(var(--color-entry-line));
  }
}
.search-modal__field {
  position: relative;
  margin: 0;
}
.search-modal__input {
  height: 60px;
  padding: 28px 68px 10px 20px;
}
@media screen and (max-width: 959px) {
  .search-modal__input {
    height: 38px;
    padding: 16px 68px 4px 20px;
  }
}
.search-modal__field-label {
  width: calc(100% - 68px);
  left: 20px;
}
.search-modal__submit-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  width: 68px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.search-modal__content[data-show-menu] .predictive-search__suggested-menu {
  display: block;
}
.predictive-search__suggested-menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: none;
}
.predictive-search__suggested-menu .predictive-search__suggested-menu__link {
  display: block;
  padding: 9px 12px;
}
.predictive-search__suggested-menu
  .predictive-search__suggested-menu__link:hover {
  background: var(--general-text-10, rgba(0, 0, 0, 0.1));
  border-radius: 2px;
}
.gallery__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
}
@media (min-width: 960px) {
  .gallery__list {
    overflow: hidden;
  }
}
.gallery__list .gallery__item {
  overflow: hidden;
  width: 50%;
  height: 100%;
  flex-grow: 1;
}
@media (min-width: 960px) {
  .gallery__list .gallery__item {
    flex-grow: 0;
    width: 25%;
  }
}
@media (min-width: 960px) {
  .gallery__list .gallery__item--images {
    transform: scale(1.05);
  }
}
.gallery__list .gallery__item--empty .gallery__box.gallery__box {
  padding-bottom: unset;
}
.gallery__list .gallery__item {
  transform-origin: top;
}
.gallery__list .gallery__item .gallery__box {
  transform: scale(1.01);
  padding-bottom: 100%;
  position: relative;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.5s;
}
.gallery__list .gallery__item .gallery__box img {
  object-fit: cover;
  object-position: 50% 50% !important;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.gallery__list .gallery__item .gallery__box .gallery__box__mark {
  --bg-opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / var(--bg-opacity));
}
.gallery__list .gallery__item .gallery__box .gallery__box__title {
  --bg-opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery__list .gallery__item.adapt .gallery__box {
  padding-bottom: 0%;
}
.gallery__list .gallery__item.adapt img {
  max-height: 400px;
  position: static;
}
.gallery__list .gallery__box--hover:hover {
  transform: scale(1.05);
}
.gallery__list svg {
  border: 1px solid hsla(206, 6%, 50%, 0.2);
  display: block;
}
@media (min-width: 960px) {
  .gallery__list svg {
    border-top: none;
  }
}
.header-inline-menus__item--has-submenu:hover
  .gallery__list
  .gallery__item.gallery__item--images {
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(1.01);
}
.header-inline-menus__item--has-submenu.gallery .header__inline-submenus {
  min-height: auto;
}
@media (min-width: 960px) {
  .mobile-top-nav {
    display: none;
  }
}
.mobile-top-nav .mobile-site-nav {
  list-style: none;
  margin: 0;
  padding: 0 var(--page-padding);
  scroll-padding-left: var(--page-padding);
  scroll-padding-right: var(--page-padding);
  display: flex;
  flex-wrap: nowrap;
}
.mobile-top-nav .mobile-site-nav > li:first-child .mobile-site-nav__item__link {
  padding-left: 0;
}
.mobile-top-nav .mobile-site-nav > li:last-child .mobile-site-nav__item__link {
  padding-right: 0;
}
.mobile-top-nav .mobile-site-nav .mobile-site-nav__item__link {
  color: inherit;
  padding: 12px 16px;
  display: inline-block;
  white-space: nowrap;
}
.mobile-top-nav
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text {
  position: relative;
  font-weight: 500;
}
.mobile-top-nav
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -8px;
  width: 100%;
  background-color: rgba(var(--color-text));
  height: 2px;
}
.color-scheme-1
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  background-color: rgba(var(--color-scheme-1-text));
}
.color-scheme-2
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  background-color: rgba(var(--color-scheme-2-text));
}
.color-scheme-3
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  background-color: rgba(var(--color-scheme-3-text));
}
.shopline-section-header-scrolling .mobile-top-nav {
  display: none;
}
.predictive-search {
  --predictive-search-result-padding: 20px;

  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgb(var(--color-page-background));
  border-radius: 0 0 var(--menu-modal-border-radius)
    var(--menu-modal-border-radius);
}
.predictive-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--predictive-search-result-padding) 0
    calc(var(--predictive-search-result-padding) / 2) 0;
  color: rgb(var(--color-text));
  text-transform: uppercase;
  margin: 0 var(--predictive-search-result-padding)
    calc(var(--predictive-search-result-padding) / 2)
    var(--predictive-search-result-padding);
  border-bottom: 1px solid rgb(var(--color-entry-line));
}
.predictive-search__head .predictive-search__spinner {
  display: none;
}
.predictive-search__head .predictive-search__rusults {
  text-transform: initial;
}
.predictive-search__list-item > * {
  transition: color 0.3s, background 0.3s;
}
.predictive-search__list-item[selected="true"] > *,
.predictive-search__list-item:hover > * {
  color: rgb(var(--color-text));
  background-color: rgba(rgb(var(--color-text)), 0.08);
}
.predictive-search__item {
  display: grid;
  grid-template: "image content" auto / auto 1fr;
  gap: var(--predictive-search-result-padding);
}
.predictive-search__item-image {
  display: block;
  width: 62px;
  height: 62px;
  grid-area: image;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 959px) {
  .predictive-search__item-image {
    width: 56px;
    height: 56px;
  }
}
.predictive-search__item-content {
  grid-area: content;
  justify-content: center;
}
.predictive-search__item-head {
  margin: 0;
}
.predictive-search__item-price {
  margin: 0;
}
.predictive-search__item-price .line-through {
  text-decoration: line-through;
  opacity: 0.5;
}
.predictive-search__term {
  margin: var(--predictive-search-result-padding);
}
.predictive-search__term-icon {
  display: inline-flex;
  transition: transform 0.3s;
  width: 20px;
  height: 20px;
}
.predictive-search__spinner {
  display: inline-flex;
  animation: button-loading linear 1.5s infinite;
}
.predictive-search__spinner .icon {
  width: 15px;
  height: 15px;
}
.predictive-search__loading-state {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.predictive-search__results {
  overflow: hidden;
  overflow-y: auto;
}
predictive-search[data-focus][open] .predictive-search,
predictive-search[data-focus][loading] .predictive-search {
  display: block;
}
predictive-search[data-focus][loading]
  .predictive-search__results:empty
  ~ .predictive-search__loading-state {
  display: flex;
}
predictive-search[data-focus][loading]
  .predictive-search__head
  .predictive-search__spinner {
  display: flex;
}
.predictive-search__results-list {
  display: grid;
  row-gap: var(--predictive-search-result-padding);
  column-gap: var(--predictive-search-result-padding);
  margin-top: var(--predictive-search-result-padding);
  padding: 0 var(--predictive-search-result-padding);
}
.search-modal__content[data-col="4"] .predictive-search__results-list {
  grid-template-columns: repeat(4, 1fr);
}
.search-modal__content[data-col="3"] .predictive-search__results-list {
  grid-template-columns: repeat(3, 1fr);
}
.search-modal__content[data-col="2"] .predictive-search__results-list {
  grid-template-columns: repeat(2, 1fr);
}
.search-modal__content[data-col="1"] .predictive-search__results-list {
  grid-template-columns: repeat(1, 1fr);
}
/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */


.section-header_menu-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 21px;
}

/* 吸顶时的样式变化 start */
.shopline-section-header-sticky--always .section-header_menu-wrapper {
  justify-content: space-between;
  align-items: center;
  padding: 0 120px 0 30px;
  margin-top: 0;
  position: relative;
}

@media screen and (max-width: 1200px) {
  .shopline-section-header-sticky--always .section-header_menu-wrapper {
    padding-right: 0px;
  }
}

.shopline-section-header-sticky--always .header__inline-menus {
  margin-left: clamp(10px, 2vw, 42px);
}

.shopline-section-header-sticky--always .header-inline-menus__link {
  height: 58px;
}

.shopline-section-header-sticky--always header {
  margin-bottom: 53px;
  border-bottom: 1px solid;
}

.section-header_menu_icon-name {
  display: none;
  font-size: 0;
}

.section-header_menu_icon-name img {
  max-height: 40px;
  max-width: 12vw;
  width: auto;
  height: auto;
}

.section-header_menu_icon-name svg {
  max-height: 40px;
  max-width: 50px;
  fill: inherit;
}

.shopline-section-header-sticky--always .section-header_menu_icon-name {
  display: block;
}

.shopline-section-header-sticky--always .section-header_no-sticky_header {
  display: none;
}

.section-header_sticky_header,
.shopline-section-header-sticky--always .section-header_sticky_header .component-menu-header_title-block_left,
.shopline-section-header-sticky--always .section-header_sticky_header .component-menu-header_title-block_center {
  display: none;
}

.section-header_sticky_header .component-menu-header {
  margin-top: 0;
}

.shopline-section-header-sticky--always .section-header_sticky_header {
  display: block;
}

.shopline-section-header-sticky--always .section-header_sticky_header .component-menu-header_title-block {
  padding: 0;
  position: static;
}
/* 吸顶时的样式变化 end */


/*  */
.menu2-list{
  width: 22%;
  max-height: 760px;
  min-height: 280px;
  overflow-y: auto;
  background-color: rgb(var(--navigation-menu-color, 175, 148, 218));
  padding: 15px 9px;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.menu2-list li{
  margin: 0;
  padding: 6px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #fff;
}
.menu2-list li:hover path{
  fill:#fff;
}
.menu2-list li a {
  margin: 0;
  padding: 0;
}
.menu2-wrap{
  border-radius: 20px;
  background-color: #ffffff;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.menu2-image-right{
  flex: 1;
  display: none;
  overflow-y: auto;
}
.menu2-image-rt{
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 24px 12px;
  gap: 12px;
}
.menu2-image-rt .header__image {
  width: calc(33% - 8px);
  border-radius: 12px;
  overflow: hidden;
}
.menu2-title{
  padding: 24px 12px 0 12px;
  font-size: 28px;
  font-weight: 500;
}
.product-list-menu2{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
  overflow: hidden;
  padding: 0 8px 24px 8px;
}
.product-list-menu2 li {
  width: 100%;
  overflow: hidden;
  padding: 0 4px;
}

/* productMenu */
.product-menu{
  display: flex;
  justify-content: space-between;
  color: #000;
}
.product-menu .product-menu-left{
  width: 76%;
  padding: 40px 20px 40px 20px;
  display: flex;
  flex-direction: column;
}
.product-menu-category{
  padding: 20px;
  background-color: rgba(255,255,255,0.45);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  border-radius: 12px;
  overflow-y: auto;
  flex: 1;
}
.product-menu-button{
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-top: 50px;
} 
.product-menu-button a:nth-of-type(1){
  background-color: var(--theme-color);
  color: #fff !important;
  padding: 13px 50px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
}
.product-menu-button a:nth-of-type(2){
  color: var(--theme-color) !important;
  padding: 13px 50px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid var(--theme-color);
  background-color: #ffffff;
}
.product-menu-message{
  display: flex;
  justify-content: center;
  gap: 37px;
  margin-top: 15px;
}
.product-menu-category-item{
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
}
.product-menu-category-item-top{
  border-radius: 12px;
  padding: 14px;
  background-color: #ffffff;
  color: var(--theme-color);
  transition: all 0.2s;
}
.product-menu-category-item-top:hover{
  background-color: var(--theme-color);
  color: #fff;
}
.product-menu-category-item-title{
  font-size: 18px;
  font-weight: bold;
}
.product-menu-category-item-des{
  font-size: 10px;
  font-weight: 300;
}
.product-menu-category-tips{
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 2px 12px;
  font-size: 10px;
  color: #000;
  width: max-content;
  gap: 2px;
}
.product-menu-category-tips img,
.product-menu-category-tips svg{
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 3px;
}
.product-menu-category-tips svg {
  transform: scale(1.5);
}
.product-menu-category-product{
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.product-menu-category-product ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-menu-category-product-item{
  list-style: none;
  position: relative;
  width: calc(50% - 5px);
}
.product-menu-category-product-item .tips{
  position: absolute;
  top: 0;
  right: -4px;
  transform: translateY(-50%);
  border-radius: 4px;
  z-index: 10;
  padding: 0 4px;
  width: max-content;
}
.product-menu-category-product-item-image{
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.product-menu-category-product-item-image img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.product-menu-category-title{
  font-size: 14px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}
.product-menu-category-product-title{
  color: #1B2061;
  font-size: 12px;
  font-weight: 400;
  margin-top: 5px;
  overflow: hidden;
}
.product-menu-message-item{
  display: flex;
  align-items: center;
  width: max-content;
  color: var(--theme-color);
  font-size: 9px;
  font-weight: 400;
}
.product-menu-message-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 6px;
}

.product-menu .product-menu-right{
  width: 22%;
  background-color: #ffffff;
  border-radius: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 40px;
}
.product-menu-right-item{
  display: flex;
  flex-direction: column;
  gap: 20px;  
  color: var(--theme-color);
  font-size: 16px;
  font-weight: bold;
}
.product-menu-right-item-image{
  position: relative;
  width: 100%;
  padding-bottom: 65%;
  overflow: hidden;
  border-radius: 10px;
}
.product-menu-right-item-image img,
.product-menu-right-item-image svg{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-menu-right-item-title {
  &:not(:empty):after {
    content: '\2192';
    font-size: 14px;
    line-height: 1;
    margin-left: 5px;
  }
}

/* 一级图文菜单 */
.image-text-menu{
  width: 100%;
  padding: 90px 0;
  max-height: 760px;
  min-height: 280px;
  display: flex;
  gap: 40px;
}
.image-text-menu-left{
  width: 37%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  height: 100%;
  overflow-y: auto;
}
.image-text-menu-item-wrap{
  display: flex;
  flex-direction: column;
}
.image-text-menu-item-2{
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}
.image-text-menu-item-3{
  font-size: 16px;
  font-weight: 300;
  color: #000;
  margin-bottom: 9px;
}
.image-text-menu-item-3:last-child{
  margin-bottom: 0;
}
.image-text-menu-right{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  height: 100%;
  overflow-y: auto;
}
.image-text-menu-right-item-image{
  margin-bottom: 16px;
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.image-text-menu-right-item-image::after{
  content: "";
  width: 100%;
  padding-bottom: 122%;
  display: block;
}
.image-text-menu-right-item-image img,
.image-text-menu-right-item-image svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-text-menu-right-item-title{
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: bold;
}
.image-text-menu-right-item-des{
  font-size: 14px;
  font-weight: 300;
}

/* 一级商品菜单 */
.category-menu-left{
  width: 52%;
  display: flex;
  gap: 12px;
  overflow-y: auto;
}
.category-menu-item{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}
.category-menu-item-title{
  width: 100%;
  padding: 0 10px;
  border-bottom: 1px solid #000;
  font-size: 22px;
  font-weight: bold;
}
.category-menu-item-products{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.category-menu-item-product{
  display: flex;
  gap: 11px;
}
.category-menu-item-product-image{
  width: 25%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: max-content;
}
.category-menu-item-product-image::before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
.category-menu-item-product-image img,.category-menu-right img {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.category-menu-right{
  width: 41%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: max-content;
}
.category-menu-right::before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 59%;
}
.category-menu-item-product-des{
  width: 59%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.category-menu-item-product-title{
  font-size: 20px;
  color: #000;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示溢出部分 */
}
.category-menu-item-product-price{
  font-size: 18px;
  color: #6C4DEA;
}

@media screen and (max-width: 1400px) {
  .header__inline-submenus {
    padding: 0 5vw;
  }
}

@media screen and (max-width: 768px) {
  .header {
    height: var(--header-mobile-height, 60px);
  }
}
/* ============================================================
   悬浮玻璃导航（BrandZ 定制）
   全部数值来自 header.html 的 <style> 里由后台设置注入的变量，
   变量缺省时整段退化为原生 header 外观，不影响未开启的站点。
   ============================================================ */

/* 非悬浮态的顶部间隙：用外层容器的 padding，不用 top ——
   因为 [data-settings-id]:not(.shopline-section-header-scrolling) 有
   `top: 0 !important`，用 top 会在页面未滚动时被打掉。
   --bz-wrapper-gap 只在「开启悬浮 且 不浮在首屏之上」时才由 header.html 赋值；
   悬浮态下容器高度塌成 0，再给 padding 就会露成一条白边。 */
[data-settings-id="shopline-section-header"] {
  padding-top: var(--bz-wrapper-gap, 0px);
  transition: padding-top 0.5s ease-out;
}

.header.bz-floating {
  width: calc(100% - 2rem);
  max-width: var(--bz-float-max-width, 1164px);
  margin-inline: auto;
  border-radius: var(--bz-float-radius, 16px);
  border: 1px solid var(--bz-glass-border, rgba(255, 255, 255, 0.1));

  /* 玻璃：低不透明度渐变 + 背景模糊。
     底色用独立的 --bz-glass-tint（默认白），不用页面背景色 ——
     深色站上「深色底 10%」看不出条，白色底 10% 才是磨砂玻璃。
     渐变从左到右递减，模仿参考站的 from-white/10 → to-neutral-400/10。 */
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    rgba(var(--bz-glass-tint, 255, 255, 255), var(--bz-glass-opacity, 0.1)),
    rgba(var(--bz-glass-tint, 255, 255, 255), calc(var(--bz-glass-opacity, 0.1) * 0.6))
  );
  -webkit-backdrop-filter: blur(var(--bz-glass-blur, 16px));
  backdrop-filter: blur(var(--bz-glass-blur, 16px));

  /* 参考站用的是 500ms ease-out，滚动收窄时的「液态」感全靠它 */
  transition:
    max-width 0.5s ease-out,
    border-radius 0.5s ease-out;
}

/* 底部分割线在悬浮态下必须去掉，否则胶囊里会横穿一条线 */
.header.bz-floating {
  border-bottom-color: var(--bz-glass-border, rgba(255, 255, 255, 0.1)) !important;
}

/* 滚动后收窄 —— 复用 BrandZ 自带的 scrolling 类，无需新增 JS。
   触发距离由 data-scroll-threshold 控制（后台可调）。 */
[data-settings-id="shopline-section-header"].shopline-section-header-scrolling
  .header.bz-floating {
  max-width: var(--bz-float-scrolled-max-width, 720px);
}

/* 右侧图标位显示为胶囊按钮（对应参考站的 Start creating） */
.component-menu-header_title-block_right_item.bz-nav-cta {
  /* CTA 排到右侧组最后（搜索、购物车之后），跟参考站一致。
     DOM 里 $peculiarity 在两个图标之前，_right 是 flex 容器，用 order 调序即可。
     只在「显示为按钮」时生效，普通图标位不受影响。 */
  order: 1;
  flex-shrink: 0;
  background-color: rgb(var(--color-text));
  border-radius: 999px;
  padding: 10px 20px;
  transition: opacity 0.2s;
  /* 颜色设在容器上，不设在 <a> 上 —— BrandZ 有一条
     `.header a:not(.button):hover { color: inherit }`，特异性 (0,3,1)，
     比任何针对 <a> 的选择器都高，hover 时会把字色抢回去变成深色（在深色按钮上＝隐形）。
     它既然强制 inherit，那就让它继承到对的颜色，不跟它比特异性。 */
  color: rgb(var(--color-page-background));
}

.component-menu-header_title-block_right_item.bz-nav-cta:hover {
  opacity: 0.85;
}

.component-menu-header_title-block_right_item.bz-nav-cta a {
  text-decoration: none;
  white-space: nowrap;
}

/* 超级菜单下拉是相对 .header 定位的；导航内缩后下拉会跟着内缩，
   这里把圆角补上，避免方角面板挂在圆角胶囊下面显得断裂。 */
.header.bz-floating .header__inline-submenus {
  border-radius: var(--bz-float-radius, 16px);
  overflow: hidden;
}

@media (max-width: 959px) {
  .header.bz-floating {
    width: calc(100% - var(--bz-float-top, 16px) * 2);
  }
}

/* ---- 悬浮态：浮在首屏大图之上 ----------------------------------------
   问题：header 在正常文档流里自己占一行，玻璃背后只有页面底色 → 看着像
   「白栏里嵌了个灰盒子」，毛玻璃完全没意义。
   解法：复用 BrandZ 已有的 is-transparent（position:absolute → 容器高度塌成 0，
   首屏大图上移到 header 底下）。滚动后 BrandZ 自己会把它切回 relative 吸顶。 */
.header.bz-floating.is-transparent {
  position: absolute;
  left: 0;
  right: 0;
  /* 悬浮态的顶部间隙在这里给：容器已经没有高度了，只能靠 top 自己撑开 */
  top: var(--bz-float-top, 16px);
  /* 盖掉 .header.is-transparent 的 width:100%，保持胶囊内缩 */
  width: calc(100% - 2rem);
}

/* is-transparent 自带一个 ::before 白色背景板，滚动时 scaleY(1) 展开铺满整行。
   那正是我们要消灭的白栏，悬浮态必须关掉。 */
.header.bz-floating.is-transparent::before {
  display: none;
}

/* ---- 悬浮态：logo / 菜单 / CTA 收成一行 ---------------------------------
   .header 本身是 flex column，三个直接子元素依次是：
     .section-header_no-sticky_header（内含 logo 与右侧 CTA）
     .section-header_menu-wrapper    （菜单，单独一行）
     .section-header_sticky_header   （吸顶态才显示）
   所以 logo 和菜单天然是上下两行。这里把 .header 改成 row，并用 display:contents
   把中间几层容器「打平」，让 logo / 菜单 / CTA 变成同一个 flex 容器的兄弟，再用
   order 排成：logo | 菜单 | CTA。不改动任何 DOM。

   只作用于未吸顶态：吸顶后 BrandZ 自己就是单行布局（菜单行变 space-between，
   吸顶头部只留右侧），那套逻辑不要碰。 */
@media screen and (min-width: 960px) {
  .header.bz-floating.bz-logo-left {
    flex-direction: row;
    align-items: center;
    /* title-block 原本的 padding: 0 120px 会随 display:contents 一起失效，在这里补回 */
    padding: 4px 24px;
    column-gap: 24px;
  }
}

.header.bz-floating.bz-logo-left .section-header_no-sticky_header,
.header.bz-floating.bz-logo-left .component-menu-header,
.header.bz-floating.bz-logo-left .component-menu-header_title-block {
  display: contents;
}

/* logo：最左，按内容宽度收缩（原本 flex:0.8 + text-align:center） */
.header.bz-floating.bz-logo-left .component-menu-header_title-block_center {
  order: 0;
  flex: 0 0 auto;
  text-align: left;
}

/* 菜单：紧跟 logo，吃掉剩余空间把 CTA 推到最右（原本 margin-top:21px 另起一行） */
.header.bz-floating.bz-logo-left .section-header_menu-wrapper {
  order: 1;
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-top: 0;
}

/* 左侧图标位（Reviews / Get help 之类），此时排在菜单之后 */
.header.bz-floating.bz-logo-left .component-menu-header_title-block_left {
  order: 2;
  flex: 0 0 auto;
}

/* 右侧 CTA + 搜索 + 购物车：最右 */
.header.bz-floating.bz-logo-left .component-menu-header_title-block_right {
  order: 3;
  flex: 0 0 auto;
}

/* ---- 收窄时的自适应 ---------------------------------------------------
   两个事实决定了这里的写法：
   1) .header-inline-menus__item 是 flex-shrink:0 —— 菜单永不收缩。所以胶囊
      一旦窄于内容，内容不会被挤压，而是直接溢出到玻璃外面（购物车跑出去）。
   2) logo 宽度来自主题设置 desktop_logo_width（默认 180px），不同站点不一样。
   所以不能靠「把收窄宽度调大一点」蒙混：那只是把溢出推迟到某个菜单更长的站点。
   用 min-width: fit-content 做硬保险 —— 胶囊永远不会窄于自身内容，
   溢出物理上不可能发生；收窄宽度设小了，也只会停在内容宽度处。 */
.header.bz-floating {
  min-width: fit-content;
}

/* 滚动后让内容自己缩一点，这样胶囊才有空间真的收窄（参考站是 80px→56px 压扁） */
@media screen and (min-width: 960px) {
  [data-settings-id="shopline-section-header"].shopline-section-header-scrolling
    .header.bz-floating.bz-logo-left {
    padding-block: 0;
    column-gap: 12px;
  }
}

/* logo 跟着缩：img 上有 width="180" 属性，用 max-width 盖掉，height:auto 保比例 */
.header.bz-floating .component-menu-header_title-block_center img {
  height: auto;
  transition: max-width 0.5s ease-out;
}

[data-settings-id="shopline-section-header"].shopline-section-header-scrolling
  .header.bz-floating .component-menu-header_title-block_center img {
  max-width: 120px;
}

/* 菜单间距收紧（原本 clamp(4px, 1vw, 30px)） */
[data-settings-id="shopline-section-header"].shopline-section-header-scrolling
  .header.bz-floating .header-inline-menus__item {
  padding-right: clamp(4px, 0.6vw, 16px);
}

/* 菜单链接高度跟着压扁 */
[data-settings-id="shopline-section-header"].shopline-section-header-scrolling
  .header.bz-floating .header-inline-menus__link {
  --padding-block: 6px;
}

/* ---- 胶囊高度 --------------------------------------------------------
   未滚动用后台设置的高度（默认 80px，与参考站 h-20 一致）；
   滚动后压扁到 56px（参考站 h-14），这个「变矮」是收窄动效的一半。 */
@media screen and (min-width: 960px) {
  .header.bz-floating.bz-logo-left {
    min-height: var(--bz-float-height, 80px);
  }
}

@media screen and (min-width: 960px) {
  [data-settings-id="shopline-section-header"].shopline-section-header-scrolling
    .header.bz-floating.bz-logo-left {
    min-height: 56px;
  }
}


/* ---- 右侧操作组（放大镜 + 购物车 + CTA）的水平位置 -----------------------
   margin-left:auto 是 flex 里强制贴右的确定性手法：不管前面的菜单行有没有撑开、
   撑开多少，它都会把剩余空间全部吃掉，把这一组顶到最右。
   之前靠「菜单行 flex:1 去撑」是间接的，撑不开时右侧组就会浮在中间。 */
.header.bz-floating.bz-logo-left .component-menu-header_title-block_right {
  margin-left: auto;
}

/* 这一组距胶囊右缘的距离，后台可调。左侧保持 24px —— logo 那边要留白，不必对称。 */
@media screen and (min-width: 960px) {
  .header.bz-floating.bz-logo-left {
    padding-right: var(--bz-actions-gap, 12px);
  }
}

/* ---- 右侧三个操作（放大镜 / 购物车 / CTA）等间距 -------------------------
   BrandZ 给每个 _right_item 挂了 margin-left:20px，而按钮又需要更宽的间距，
   结果是 20 / 20 / 56 的不等间距。这里清掉各自的 margin，改用容器的 column-gap
   —— 一个值管住所有间隙，天然等距，也只需要一个后台滑杆。 */
.header.bz-floating .component-menu-header_title-block_right {
  column-gap: var(--bz-actions-spacing, 24px);
}

.header.bz-floating .component-menu-header_title-block_right_item {
  margin-left: 0;
}

/* 滚动后单独的右边距。
   注意：这条和上面那条「滚动前」的特异性完全相同 (0,5,0)，
   同分时靠源码顺序决胜 —— 所以它必须留在文件更靠后的位置，删改时别调换顺序。 */
@media screen and (min-width: 960px) {
  [data-settings-id="shopline-section-header"].shopline-section-header-scrolling
    .header.bz-floating.bz-logo-left {
    padding-right: var(--bz-actions-gap-scrolled, 12px);
  }
}

/* ---- 中和 BrandZ 吸顶态（--always）的布局接管 ---------------------------
   关键事实：JS 的 onScrollAlways 在滚过阈值时同时加了
   `shopline-section-header-sticky--always` 和 `shopline-section-header-scrolling`。
   所以滚动后 BrandZ 会切到它自己那套吸顶布局：隐藏不吸顶头部、显示吸顶头部、
   给菜单行套上 padding: 0 120px 0 30px。那 120px 就是右侧那块抹不掉的空白，
   也让所有作用在外层 .header 上的间距设置看起来「没反应」。

   悬浮玻璃导航要的是滚动前后同一套布局（只有宽度/高度变化），
   所以这里把它的接管逐条中和掉。特异性 (0,3,0)~(0,4,0) > BrandZ 的 (0,2,0)。 */

/* 1. 不吸顶头部：滚动后不要隐藏，继续参与打平后的单行布局 */
.header.bz-floating.bz-logo-left .section-header_no-sticky_header {
  display: contents;
}

/* 2. 吸顶头部：整份是不吸顶头部的重复，始终隐藏，避免两套内容同时出现 */
.header.bz-floating.bz-logo-left .section-header_sticky_header {
  display: none;
}

/* 3. 菜单行：清掉 --always 塞进来的 120px/30px 与 space-between */
.header.bz-floating.bz-logo-left .section-header_menu-wrapper {
  padding: 0;
  justify-content: flex-start;
  margin-top: 0;
}

/* 4. 吸顶态才出现的那个小 logo：会和左上角的主 logo 重复 */
.header.bz-floating.bz-logo-left .section-header_menu_icon-name {
  display: none;
}

/* 5. --always 给 header 加的 53px 下边距和实线下边框，会在胶囊下方留出一条 */
.header.bz-floating {
  margin-bottom: 0;
}

/* ---- 移动端：让玻璃胶囊直接当导航条 ------------------------------------
   移动端渲染的是 <header-mobile>，而 .header-mobile__top 自带
   `background: var(--theme-color)` —— 那就是压在玻璃里面的那条黑栏。
   悬浮态下把它透明掉，玻璃才是唯一的容器。

   连带问题：汉堡线和 logo 文字在主题里写死是 #fff（本来就是配深色栏的），
   黑栏一没，白图标在浅色玻璃上会隐形。所以让它们改用 currentColor，
   跟随 .header 的 color（来自 color_scheme），深色站/浅色站都成立。 */
@media screen and (max-width: 959px) {
  /* 两层背景都要透明：__top 是 var(--theme-color)（那条黑栏），
     它的父级 .header-mobile 自带 background:#fff —— 只透明子级，白底就露出来了。 */
  .header.bz-floating .header-mobile,
  .header.bz-floating .header-mobile__top {
    background: transparent;
  }

  /* 移动端头部整套图标都为「深色栏 + 白图标」设计，把白色写死在了多处：
       .header-mobile__menu-line   background-color: #fff   （汉堡）
       .header-mobile__logo-text   color: #fff              （文字 logo）
       .header-mobile__right button { color:#fff; svg path { fill:#fff } }  （搜索/购物车/账户）
     最后那条用了 CSS 嵌套写法。黑栏一去，白图标压在浅色玻璃上全部隐形，
     所以这里统一改为跟随 color_scheme 的文字色。 */
  .header.bz-floating .header-mobile__menu-line {
    background-color: currentColor;
  }

  .header.bz-floating .header-mobile__logo-text {
    color: inherit;
  }

  .header.bz-floating .header-mobile__left a,
  .header.bz-floating .header-mobile__left button,
  .header.bz-floating .header-mobile__right a,
  .header.bz-floating .header-mobile__right button,
  .header.bz-floating .header-mobile__buttons a,
  .header.bz-floating .header-mobile__buttons button {
    color: rgb(var(--color-text));
  }

  .header.bz-floating .header-mobile__left svg path,
  .header.bz-floating .header-mobile__right svg path,
  .header.bz-floating .header-mobile__buttons svg path {
    fill: currentColor;
  }
}

/* ---- 移动端展开菜单：同样的玻璃胶囊 ------------------------------------
   原样式是贴边满屏白板：position:absolute; top:100%; left:0; width:100%;
   height:calc(100vh - 60px); background:#fff; box-shadow: inset ...
   这里改成与导航条同款的悬浮玻璃胶囊：左右内缩、圆角、同一套模糊/描边变量。

   不透明度用独立的 --bz-menu-opacity（默认 70%），不跟导航条共用：
   导航条只有图标，10% 的玻璃很好看；菜单全是文字，10% 会压在首屏大图上糊掉。 */
@media screen and (max-width: 959px) {
  .header.bz-floating .mobile-menu {
    /* 跟导航胶囊左右对齐 */
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    width: calc(100% - 2rem);

    /* 不再满屏：高度跟着内容走，长菜单滚动。
       上限取两者较小值：可用空间 vs 后台设定的「菜单高度」。
       这个上限只跟 --bz-menu-max-height 有关，与不透明度无任何关系。 */
    height: auto;
    max-height: min(
      calc(100vh - var(--header-mobile-height, 60px) - var(--bz-float-top, 16px) * 2),
      var(--bz-menu-max-height, 100vh)
    );

    margin-top: var(--bz-float-top, 16px);
    border-radius: var(--bz-float-radius, 16px);
    border: 1px solid var(--bz-glass-border, rgba(255, 255, 255, 0.1));

    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      rgba(var(--bz-glass-tint, 255, 255, 255), var(--bz-menu-opacity, 0.7)),
      rgba(var(--bz-glass-tint, 255, 255, 255), calc(var(--bz-menu-opacity, 0.7) * 0.85))
    );
    -webkit-backdrop-filter: blur(var(--bz-glass-blur, 16px));
    backdrop-filter: blur(var(--bz-glass-blur, 16px));

    /* 原本的 inset 阴影是给贴边白板做的，胶囊上会显脏 */
    box-shadow: none;
  }

  /* 展开态要覆盖掉上面的 transform，否则居中会失效 */
  .header.bz-floating .mobile-menu.is-active {
    transform: translateX(-50%) translateY(0);
  }

  /* 菜单内容跟随配色，别写死黑色（深色站会看不见） */
  .header.bz-floating .mobile-menu__link,
  .header.bz-floating .mobile-menu__sublink,
  .header.bz-floating .mobile-menu__feature-item {
    color: rgb(var(--color-text));
  }
}

/* ---- 移动端：玻璃必须下放，不能挂在共同祖先上 --------------------------
   CSS 规范坑：带 backdrop-filter 的元素会成为「backdrop root」，
   其后代再用 backdrop-filter 时只能采样到这个 root 内部，采不到页面背景。
   原先玻璃挂在 .header 上，而展开菜单是它的后代 → 菜单的 backdrop-filter
   完全失效，只剩一层半透明色，文字压在清晰的大图上看不清。
   （导航条看着有毛玻璃，其实是 .header 这个祖先提供的，不是它自己的。）

   所以移动端把 .header 的玻璃整个撤掉，改由「导航条」和「菜单」各自实现 ——
   两者互不嵌套，各自的 backdrop-filter 都能正常采样页面。 */
@media screen and (max-width: 959px) {
  .header.bz-floating {
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
  }

  /* 导航条自己变成那颗玻璃胶囊 */
  .header.bz-floating .header-mobile__top {
    border-radius: var(--bz-float-radius, 16px);
    border: 1px solid var(--bz-glass-border, rgba(255, 255, 255, 0.1));
    background-image: linear-gradient(
      to right,
      rgba(var(--bz-glass-tint, 255, 255, 255), var(--bz-glass-opacity, 0.1)),
      rgba(var(--bz-glass-tint, 255, 255, 255), calc(var(--bz-glass-opacity, 0.1) * 0.6))
    );
    -webkit-backdrop-filter: blur(var(--bz-glass-blur, 16px));
    backdrop-filter: blur(var(--bz-glass-blur, 16px));
  }
}