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

    min-height: 60px;
  }
}
.header #cart-icon-bubble-wrapper,
.header #cart-icon-bubble-wrapper-mobile {
  display: flex;
}
.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;
}
@media (max-width: 959px) {
  /* equal side columns so the logo sits on the viewport centre line, as the
     reference does — the icon groups are uneven (burger vs search+bag) */
  .header__container {
    grid-template: "tools logo buttons" auto / 1fr auto 1fr !important;
  }
  .header__container .header__buttons {
    justify-self: end;
    display: flex;
  }
}
.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 (min-width: 960px) {
  .tile-search.header__container--left-left {
    grid-template: "logo menu tools icons" auto / auto 1fr minmax(auto, 348px) 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 (min-width: 960px) {
  .tile-search.header__container--left-line {
    grid-template:
      "logo tools tools icons" auto
      "menu menu menu menu" auto
      / auto 1fr auto auto;
  }
  .tile-search.header__container--left-line .header__tools {
    justify-self: center;
  }
}
@media screen and (min-width: 960px) {
  .header__container--middle-line {
    grid-template:
      "tools logo buttons" auto
      "menu menu menu" auto
      / 1fr auto 1fr;
  }
}
@media screen and (max-width: 959px) {
  .header__container--middle-line {
    grid-template:
      "logo buttons" auto
      "menu menu" 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: "logo buttons" auto / auto 1fr;
  }
}
.header__container--middle-left .header__buttons {
  grid-area: buttons;
  justify-self: end;
  display: flex;
}
@media (min-width: 960px) {
  .tile-search.header__container--middle-left .header__buttons {
    width: 100%;
  }
}
.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;
}
.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;
}
.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;
}
.tile-search .header__tools {
  width: 100%;
}
.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__container--middle-left .header__icons {
  margin-left: 0;
}
.header__icon-button {
  display: flex;
  padding: 6px;
}
.header__cart-point {
  background-color: rgba(var(--color-cart-dot));
  border-radius: 20px;
  color: rgba(var(--color-cart-dot-text));
  bottom: 2px;
  left: 18px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 6px;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  max-width: 40px;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 1;
}
.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;
}
/* reset cart color */
header-layout + cart-notification .cart-notification {
  background-color: rgb(var(--color-header-background)) !important;
  color: rgb(var(--color-header-text)) !important;
  --color-text: var(--color-header-text) !important;
}
/* pc user center menu */
@media (min-width: 960px) {
  .user__container:hover ul {
    display: block;
  }
  .user__container {
    position: relative;
  }
  .user__container ul {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: rgb(var(--color-image-background));
    box-shadow: 0px 10px 20px 0px rgba(var(--color-text), 0.1);
    padding: 10px 20px;
    color: rgb(var(--color-text));
    width: 170px;
    z-index: 1;
  }
  .user__container ul li {
    padding: 4px 0;
  }
  .user__container ul li a {
    display: block;
  }
  .user__container ul li.user__menu-sign-out {
    text-decoration: underline;
  }
  .user__container ul .user__menu-title-line {
    width: 100%;
    height: 1px;
    background-color: rgb(var(--color-entry-line));
    margin: 10px 0;
  }
}
#shopline-section-header {
  position: relative;
  z-index: 30;
}
#shopline-section-header.animate {
  transition: all 0.15s ease-out;
}
#shopline-section-header.shopline-section-header-sticky {
  position: sticky;
  top: var(--header-sticky-top, 0px);
}
#shopline-section-header.shopline-section-header-sticky .is-transparent {
  position: relative;
}
@media (max-width: 959px) {
  #shopline-section-header.shopline-section-header-sticky {
    top: var(--mobile-header-sticky-top, 0px);
  }
}
#shopline-section-header.shopline-section-header-hidden:not(.menu-open) {
  transform: translateY(-200%);
}
#shopline-section-header:not(.shopline-section-header-scrolling) {
  top: 0 !important;
}
#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);
}
#shopline-section-header.shopline-section-header-sticky--always
  .is-transparent {
  position: relative;
}
@media (max-width: 959px) {
  #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 {
  position: relative;
  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);
  }
}
.header__heading-logo.header__heading-logo--transparent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
}
/*transform change*/
.is-transparent
  .header__heading-logo--transparent
  + .header__heading-logo--nomal,
.is-transparent .header__heading-logo--transparent + span {
  opacity: 0;
}
header.is-transparent--active .header__heading-logo--transparent {
  opacity: 0;
}
header.is-transparent--active .header__heading-logo--transparent + span {
  opacity: 1;
}
header.is-transparent--active
  .header__heading-logo--nomal.header__heading-logo--nomal {
  opacity: 1;
}
@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;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
}
.header-drawer__localization .dropdown-menu__button > span {
  margin-right: 0;
}
.header-drawer__localization span[data-label] {
  white-space: initial;
}
.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: wrap;
  padding: 0;
}
@media (min-width: 960px) {
  .header__container--left-line .header__inline-menus {
    justify-content: center;
  }
}
.header-inline-menus__link {
  --padding-inline: 0px;
  --padding-block: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--padding-block) var(--padding-inline);
}
.header-inline-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-inline-menus__link:hover::after,
.header-inline-menus__link:focus::after {
  transform: scale(1);
}
/* The dropdown panel lives inside the menu item, so moving the pointer off the
   anchor and onto the panel dropped the underline while the panel stayed open.
   The reference keeps it drawn for as long as the item is open, so key the
   open state on the item rather than only on the anchor. */
.header-inline-menus__item--has-submenu:hover .header-inline-menus__link::after,
.header-inline-menus__item--has-submenu:focus-within .header-inline-menus__link::after {
  transform: scale(1);
}
.header-inline-menus__item {
  padding: 0 16px;
}
.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;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(var(--color-header-background));
  width: 100%;
  z-index: 10;
  box-shadow: 0 10px 20px rgb(0 0 0 / 9%);
  max-height: 760px;
  min-height: 280px;
  overflow: auto;
}
.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-header-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 {
  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 {
  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 {
  text-transform: uppercase;
  margin-bottom: 15px;
  font-weight: 600;
}
.header__image .header__image--cover .header__image_button {
  text-transform: uppercase;
  position: relative;
}
.header__inline-menus--img-normal .header__image__content {
  height: 0;
}
.header__inline-menus--img-normal .header__image {
  width: calc(25vw - 20px);
  overflow-y: auto;
}
.header__inline-menus--img-normal .header__image img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  object-fit: unset;
}
.header__inline-menus--img-normal .megamenu__list {
  padding: 0;
}
.header__inline-menus--img-normal .header-nav-list {
  gap: 20px;
  padding: 40px;
}
.header__inline-menus--img-normal .header__image--cover {
  position: unset;
  padding: 0;
  padding-bottom: 6px;
}
.header__inline-menus--img-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) 0%,
    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;
  margin-left: var(--drawer-padding-inline);
  font-weight: bold;
}
.drawer-menus__sub-item > a {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: var(--drawer-padding-inline);
}
.drawer-menus__item-icon {
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  margin-inline: 8px;
}
.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;
  background-color: rgb(var(--color-header-background));
}
.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;
}
@media (min-width: 960px) {
  .tile-search .search-modal__content {
    justify-content: flex-end;
    padding: 20px 0px 20px 20px;
  }
  .tile-search .right-search .search-modal__content {
    justify-content: flex-start;
  }

  .header__container--middle-line.tile-search .search-modal__content {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 20px;
    min-width: 300px;
  }

  .header__container--left-line.tile-search .search-modal__content {
    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;
  background-color: rgb(var(--color-header-background));
  color: rgb(var(--color-header-text));
}
.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;
  }
}
@media (min-width: 960px) {
  .tile-search .search-modal__field {
    background: transparent;
    color: rgb(var(--color-header-pc-searchbar-text));
  }

  .tile-search .search-modal__field::after {
    border-color: rgb(var(--color-header-pc-searchbar-border));
  }
  .tile-search .search-modal__form {
    max-width: 300px;
  }
  .tile-search .search-modal__input {
    height: 48px;
    padding: 10px 10px 10px 48px;
    color: rgb(var(--color-header-pc-searchbar-text));
    background-color: rgba(var(--color-header-pc-searchbar-bg), 1);
  }
  .tile-search .search-modal__submit-button {
    color: rgb(var(--color-header-pc-searchbar-text));
    left: 0;
    right: unset;
    width: 48px;
  }
  .tile-search .search-modal__input::placeholder {
    opacity: 1;
    color: rgb(var(--color-header-pc-searchbar-text));
  }

  .tile-search .search-modal__field-label {
    width: calc(100% - 48px);
    left: 48px;
  }
}
.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-color: rgb(var(--color-header-background));
  color: rgb(var(--color-header-text));
  border-radius: 0 0 var(--menu-modal-border-radius)
    var(--menu-modal-border-radius);
  z-index: 1;
}
.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;
  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 > * {
  padding: calc(var(--predictive-search-result-padding) / 2);
  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(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: calc(var(--predictive-search-result-padding) / 2);
  padding: 0 calc(var(--predictive-search-result-padding) / 2);
}
.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 */
/* detectingScreen need to consider the configuration of the tablet */

/* ===== Top-nav parity (Shopify: 16px / weight 500 / uppercase) ===== */
.header .header__inline-nav .header-inline-menus__link {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  --padding-block: 9px;
}
@media (min-width: 960px) {
  .header .header__inline-nav .header-inline-menus__link {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
  }
}
/* Shopify reserves a 16px caret slot inside every anchor that owns a submenu,
   which is what widens its label-to-label gap from 32px to 48px. */
.header .header__inline-nav .header-inline-menus__item--has-submenu
  .header-inline-menus__link {
  padding-right: 16px;
}
/* Hover underline: 2px, sitting 3px under the text rather than flush with the
   bottom of the item, so the dropdown panel clears it. */
.header .header__inline-nav .header-inline-menus__link::after {
  height: 2px;
  top: auto;
  bottom: 4px;
}
/* Reference clears the hover underline by 15px before the panel starts; its
   taller nav link produces that on its own, so with our link height the panel
   is offset instead. */
.header .header__inline-nav .header-dropdown-menu {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  padding: 16px 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
  top: calc(100% + 11px);
}
/* Without a hit-testable bridge across that offset the panel closes while the
   pointer travels into it. */
.header
  .header__inline-nav
  .header-inline-menus__item--has-submenu:not(.is-megamenu)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 11px;
}
/* Row insets move from the item to the link so the hover fill covers the whole
   row (250 panel - 16 either side = 218) as it does on the reference. */
.header .header__inline-nav .header-dropdown-menu .header-inline-submenus__item {
  padding: 0 16px;
}
.header .header__inline-nav .header-dropdown-menu .header-inline-submenus__link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  line-height: 24px;
  color: rgba(90, 56, 25, 0.6);
  transition: color 0.2s, background-color 0.2s;
}
.header
  .header__inline-nav
  .header-dropdown-menu
  .header-inline-submenus__link::after {
  content: none;
}
/* !important beats the transparent-header colour guard in parity-globals.css,
   which would otherwise pin the hover colour to the rest colour on the home
   page. */
.header .header__inline-nav .header-dropdown-menu .header-inline-submenus__link:hover,
.header .header__inline-nav .header-dropdown-menu .header-inline-submenus__link:focus {
  color: rgb(90, 56, 25) !important;
  background-color: rgba(90, 56, 25, 0.07);
}

/* Logo: the reference pins the WIDTH (170 desktop / 110 mobile) and lets each
   wordmark's own ratio set the height — brown 170x74, white 170x57. Height-pinning
   here would give the brown asset the white asset's box. Wins over the earlier
   height cap in parity-globals.css. */
@media (min-width: 960px) {
  .header.header .header__heading-logo {
    width: 170px !important;
    height: auto !important;
    aspect-ratio: 1920 / 833;
  }
  .header.header .header__heading {
    margin: 10px auto 13px !important;
  }
  .header.is-transparent:not(.is-transparent--active) .header__heading {
    margin: 10px auto !important;
  }
  /* Scrolled home: the reference pins this state 3px shorter than an inner-page
     header (93.8 vs 96.8) — same logo, symmetric 10px margins. */
  .header.is-transparent.is-transparent--active .header__heading {
    margin: 10px auto !important;
  }
}
@media (max-width: 959px) {
  .header.header .header__heading-logo {
    width: 110px !important;
    height: auto !important;
    aspect-ratio: 1920 / 833;
  }
  .header.header .header__heading {
    margin: 10px auto !important;
  }
  /* the shorter white wordmark falls under the stock 60px floor; the reference
     header is 57 tall here */
  .header.is-transparent:not(.is-transparent--active) {
    min-height: 0;
  }
}

/* Scrolled/sticky header drop shadow (reference parity, both viewports). */
#shopline-section-header.shopline-section-header-scrolling {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.04);
}