theme-sticky-top-bar.top-bar-wrapper {
  display: block;
  background-color: rgb(var(--color-background));
}

/* Use the app's real launcher as the search control. Its appearance is
   normalized to the existing header icon without changing its DOM or events. */
.plugin-product-search-searchIconMask.__sl-custom-track-search-plugin-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: currentColor !important;
  cursor: pointer !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.plugin-product-search-searchIconMask.__sl-custom-track-search-plugin-icon
  .plugin-product-search-searchIcon {
  display: block !important;
  width: 19px !important;
  height: 21px !important;
  color: currentColor !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

[data-wishlist-plugin-duplicate] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

:root {
  --club-promo-height-desktop: 26px;
  --club-promo-height-mobile: 21px;
  --club-header-height-mobile: 52px;
  --club-header-padding-x-desktop: 16px;
  --club-header-padding-x-mobile: 8px;
  --club-action-gap-desktop: 8px;
  --club-action-gap-mobile: 9px;
  --club-action-hit-area-desktop: 32px;
  --club-action-hit-area-mobile: 24px;
  --club-action-icon-desktop: 20px;
  --club-action-icon-mobile: 18px;
}

body.has-fullscreen-hero theme-sticky-top-bar.top-bar-wrapper {
  position: fixed;
  inset-block-start: var(--promotion-banner-height, 38px);
  inset-inline: 0;
  z-index: calc(var(--z-index-sticky, 1010) + 40);
  display: block;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.top-bar-search-open theme-sticky-top-bar.top-bar-wrapper,
body.top-bar-locale-popup-open theme-sticky-top-bar.top-bar-wrapper {
  z-index: calc(var(--z-index-header-sticky-layer, 1000) + 100);
}

body.has-fullscreen-hero:not(.fullscreen-hero-past) theme-sticky-top-bar.top-bar-wrapper {
  inset-block-start: var(--promotion-banner-height, 38px);
  color: #fff;
  background-color: transparent;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting theme-sticky-top-bar.top-bar-wrapper {
  --color-background: 255, 255, 255;
  --color-text: 0, 0, 0;
  --color-entry-line: 0, 0, 0;

  color: #000;
  background-color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgb(0 0 0 / 8%);
}

body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar-section {
  --color-text: 255, 255, 255;
  --color-entry-line: 255, 255, 255;

  color: #fff;
  background-color: transparent;
}

body.has-fullscreen-hero .top-bar-section.top-bar-section--sticky {
  position: relative;
  inset-block-start: auto;
  inset-inline-start: auto;
  z-index: auto;
  max-width: var(--page-width, 1200px);
  animation: none;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar-section.top-bar-section--sticky {
  background-color: transparent;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar-section,
body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar-section.top-bar-section--sticky {
  --color-text: 0, 0, 0;
  --color-entry-line: 0, 0, 0;

  color: #000;
  background-color: #fff;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__logo-link,
body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__action-item,
body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__search-icon,
body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__search-input,
body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__actions [data-relocated-to-top-bar] {
  color: #000 !important;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__search-input::placeholder {
  color: rgb(0 0 0 / 54%);
}

body.has-fullscreen-hero:not(.fullscreen-hero-past).fullscreen-hero-header-interacting .top-bar__search-form {
  background-color: #fff;
  border-color: rgb(0 0 0 / 18%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__logo-link,
body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__action-item,
body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__search-icon,
body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__search-input,
body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__actions [data-relocated-to-top-bar] {
  color: #fff !important;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__search-form {
  background-color: transparent;
  border-color: rgb(255 255 255 / 42%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.has-fullscreen-hero:not(.fullscreen-hero-past) .top-bar__search-input::placeholder {
  color: #fff;
}

.top-bar-section {
  /* 灏?padding 浠庡灞傚鍣ㄧЩ鍒板唴閮紝閬垮厤鍐呭涓虹┖鏃朵粛鏈夐棿璺?*/
  padding-top: 24px;
  --top-bar-height: 80px;
  --top-bar-height-mobile: 56px;
  --top-bar-gap: 24px;
  --top-bar-gap-mobile: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-bar-height);
  background-color: rgb(var(--color-background));
  margin: 0 auto;
  width: 100%;
  max-width: var(--page-width, 1200px);
}

/* 鍚搁《鏁堟灉鏍峰紡 */
.top-bar-section.top-bar-section--sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  z-index: calc(var(--z-index-sticky, 1010) + 20);
  animation: animation-top-bar-sticky 0.26s ease-out forwards;
  padding-top: 24px;
  /* 鍚搁《鑴辩鏂囨。娴佸悗闇€鑷甫鑳屾櫙锛?-color-* 鐢辩埗绾?.top-bar-wrapper 缁ф壙 */
  background-color: rgb(var(--color-background));
}

/* 鍚搁《鍔ㄧ敾 */
@keyframes animation-top-bar-sticky {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 959px) {
  .top-bar-section {
    height: var(--top-bar-height-mobile);
  }
}

.top-bar__container {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 600px) 1fr;
  gap: var(--top-bar-gap);
  align-items: center;
  width: 100%;
  max-width: var(--page-width);
  height: 100%;
  padding-inline: var(--page-width-spacing);
  margin: 0 auto;
}

@media (max-width: 959px) {
  .top-bar__container {
    grid-template-columns: auto 1fr auto;
    gap: var(--top-bar-gap-mobile);
  }
}

/* Logo */
.top-bar__logo {
  display: flex;
  align-items: center;
  font-family: var(--sort-title-font);
  gap: 8px;
}

.top-bar__logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgb(var(--color-text)) !important;
}

.top-bar__logo-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.top-bar__logo-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.top-bar__logo-text {
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.top-bar__logo-image {
  width: auto;
  height: 25px;
  max-width: var(--desktop-logo-width, 150px);
  max-height: 25px;
  object-fit: contain;
}

@media (max-width: 959px) {
  .top-bar__logo-image {
    width: auto;
    height: 25px;
    max-width: var(--mobile-logo-width, 100px);
    max-height: 25px;
  }

  .top-bar__logo-text {
    font-size: 25px;
    line-height: 1;
  }
}

/* Search Bar - 鏍规嵁 Figma 璁捐 */
.top-bar__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 700px; /* Figma: 700px */
}

.top-bar__search-placeholder {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.top-bar__search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px; /* Figma: 52px */
  background-color: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: 50px; /* Figma: 瀹屽叏鍦嗚 */
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  z-index: 1;
}

.top-bar__search-form:focus-within {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor;
}

.top-bar__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; /* 璋冩暣浠ラ€傚簲 31px 鍥炬爣 */
  height: 100%;
  flex-shrink: 0;
  color: rgb(var(--color-text));
}

.top-bar__search-icon svg {
  width: 31px; /* Figma: 31px */
  height: 31px;
}

.top-bar__search-input {
  flex: 1;
  height: 100%;
  padding: 0;
  padding-inline-end: 20px;
  font-size: 14px; /* Figma: 14px */
  color: rgb(var(--color-text));
  background: transparent;
  border: none;
  outline: none;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: text;
}

.top-bar__search-input::placeholder {
  color: rgb(var(--color-text));
  opacity: 1; /* 閬垮厤 WebKit 榛樿闄嶄綆閫忔槑搴﹀鑷翠笌涓婚鑹蹭笉涓€鑷?*/
}

@media (max-width: 959px) {
  .top-bar__search-form {
    height: 44px;
  }

  .top-bar__search-icon {
    width: 44px;
  }

  .top-bar__search-icon svg {
    width: 24px;
    height: 24px;
  }

  .top-bar__search-input {
    font-size: 13px;
  }
}

/* Actions */
.top-bar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

/* 杩佺Щ鍒?top-bar 鐨勫钩鍙版敞鍏ユ寜閽細鍙繚鐣?wishlist-box锛岃瑙夋浛鎹负缁熶竴瀵艰埅鍥炬爣 */
.top-bar__actions [data-relocated-to-top-bar] {
  position: relative;
  z-index: calc(var(--z-index-sticky, 1010) + 20);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgb(var(--color-text)) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.top-bar__actions #HeaderBtnBox[data-relocated-to-top-bar],
.top-bar__actions [id*="HeaderBtnBox"][data-relocated-to-top-bar],
.top-bar__actions [class*="HeaderBtnBox"][data-relocated-to-top-bar],
.top-bar__actions [class*="wishlist_header"][data-relocated-to-top-bar] {
  display: none !important;
}

.top-bar__actions [data-relocated-to-top-bar] > a,
.top-bar__actions [data-relocated-to-top-bar] > button,
.top-bar__actions [data-relocated-to-top-bar] > [role="button"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.top-bar__actions [data-relocated-to-top-bar]:hover,
.top-bar__actions [data-relocated-to-top-bar]:focus-within {
  opacity: 0.7;
}

/* app 鍘熷 SVG 鐢辫剼鏈垹闄わ紱杩欓噷浠呬繚鐣欑粺涓€鍚庣殑 wishlist 瀵艰埅鍥炬爣鏍峰紡 */
.top-bar__actions [data-relocated-to-top-bar]::before,
.top-bar__actions [data-relocated-to-top-bar]::after {
  display: none !important;
  content: none !important;
}

.top-bar__actions [data-relocated-to-top-bar] .top-bar__app-wishlist-icon {
  display: block !important;
  width: 23px !important;
  height: 20px !important;
  color: currentColor !important;
  pointer-events: none;
}

.top-bar__actions [data-relocated-to-top-bar] .top-bar__app-wishlist-icon,
.top-bar__actions [data-relocated-to-top-bar] .top-bar__app-wishlist-icon path {
  fill: currentColor !important;
  stroke: currentColor !important;
}
.top-bar__actions [data-relocated-to-top-bar] [class*="dropdown"],
.top-bar__actions [data-relocated-to-top-bar] [class*="popover"],
.top-bar__actions [data-relocated-to-top-bar] [class*="tooltip"],
.top-bar__actions [data-relocated-to-top-bar] [class*="menu"],
.top-bar__actions [data-relocated-to-top-bar] [class*="panel"] {
  z-index: var(--z-index-tooltip, 1050) !important;
  color: rgb(var(--color-text)) !important;
  background-color: rgb(var(--color-background)) !important;
}

/* 涓嬫媺鍐呬富鎸夐挳锛氳儗鏅负涓婚涓绘寜閽壊锛屾枃瀛椾负鎸夐挳涓婄殑瀵规瘮鑹?*/
.top-bar__actions [data-relocated-to-top-bar] [class*="_link_btn_content"] a[class*="_viewWishlist"] {
  background: rgb(var(--color-button-background)) !important;
  color: rgb(var(--color-button-text)) !important;
}

@media (min-width: 960px) {
  .header-action-bar [id*="HeaderBtnBox"]:not([data-relocated-to-top-bar]),
  .header-action-bar [class*="HeaderBtnBox"]:not([data-relocated-to-top-bar]),
  .header-action-bar [class*="wishlist_header"]:not([data-relocated-to-top-bar]),
  theme-action-bar [id*="HeaderBtnBox"]:not([data-relocated-to-top-bar]),
  theme-action-bar [class*="HeaderBtnBox"]:not([data-relocated-to-top-bar]),
  theme-action-bar [class*="wishlist_header"]:not([data-relocated-to-top-bar]) {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .top-bar__actions {
    gap: 12px;
    min-width: max-content;
    flex-wrap: nowrap;
  }

  .top-bar__actions [data-relocated-to-top-bar] {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .top-bar__actions [data-relocated-to-top-bar] svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.top-bar__action-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: rgb(var(--color-text)) !important;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: opacity 0.2s ease;
}

.top-bar__action-item:hover {
  opacity: 0.7;
}

.top-bar__action-item svg {
  width: 24px;
  height: 24px;
}

.top-bar__actions [data-wishlist-entry] .top-bar__app-wishlist-icon {
  display: block !important;
  color: currentColor !important;
  pointer-events: none;
}

.top-bar__actions [data-wishlist-entry] .top-bar__app-wishlist-icon,
.top-bar__actions [data-wishlist-entry] .top-bar__app-wishlist-icon path {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.top-bar__action-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: rgba(var(--color-cart-bubble-text));
  background-color: rgba(var(--color-cart-bubble));
  border-radius: 9px;
}

.top-bar__action-badge:empty {
  display: none;
}

@media (max-width: 959px) {
  .top-bar__action-item {
    width: 36px;
    height: 36px;
  }

  .top-bar__action-item svg {
    width: 20px;
    height: 20px;
  }
}

/* Mobile uses the same structural top-bar as desktop. */
@media (max-width: 959px) {
  .top-bar-section {
    display: grid !important;
  }

  .header-action-bar.right [data-relocated-to-top-bar] {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: currentColor !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .header-action-bar.right [data-relocated-to-top-bar] > a,
  .header-action-bar.right [data-relocated-to-top-bar] > button,
  .header-action-bar.right [data-relocated-to-top-bar] > [role="button"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .header-action-bar.right [data-relocated-to-top-bar]::before,
  .header-action-bar.right [data-relocated-to-top-bar]::after {
    display: none !important;
    content: none !important;
  }

  .header-action-bar.right [data-relocated-to-top-bar] .top-bar__app-wishlist-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: currentColor !important;
    pointer-events: none;
  }

  .header-action-bar.right [data-relocated-to-top-bar] .top-bar__app-wishlist-icon,
  .header-action-bar.right [data-relocated-to-top-bar] .top-bar__app-wishlist-icon path {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* Hide on mobile */
.top-bar__desktop-only {
  display: flex;
}

@media (max-width: 959px) {
  .top-bar__desktop-only {
    display: none;
  }
}

/* ========================================
   Search Dropdown Menu Styles
   ======================================== */

/* 鎼滅储涓嬫媺鑿滃崟瀹瑰櫒 */
.top-bar__search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 200px);
  max-width: 900px;
  padding: 24px 32px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
  z-index: var(--z-index-dropdown);
}

/* 涓嬫媺鑿滃崟鏄剧ず鐘舵€?*/
.top-bar__search.is-dropdown-open .top-bar__search-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 涓嬫媺鑿滃崟鍖哄潡 */
.search-dropdown__section {
  margin-bottom: 20px;
}

.search-dropdown__section:last-child {
  margin-bottom: 0;
}

/* 涓嬫媺鑿滃崟鏍囬 */
.search-dropdown__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: currentColor; /* 閲戣壊鏍囬 */
  line-height: 1.4;
}

/* 鏈€杩戞悳绱㈠尯鍧楀ご閮?*/
.search-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.search-dropdown__header .search-dropdown__title {
  margin-bottom: 0;
}

/* 娓呴櫎鎸夐挳 */
.search-dropdown__clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-entry-line));
  transition: color 0.2s ease;
}

.search-dropdown__clear-btn:hover {
  color: rgb(var(--color-text));
}

.search-dropdown__clear-btn svg {
  width: 18px;
  height: 18px;
}

/* 鏈€杩戞悳绱㈤殣钘忕姸鎬?*/
.search-dropdown__recent.is-hidden {
  display: none;
}

/* 绌虹姸鎬佹彁绀?*/
.search-dropdown__empty-tip {
  font-size: 14px;
  color: rgb(var(--color-entry-line));
}

/* 鎼滅储鏍囩瀹瑰櫒 */
.search-dropdown__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 鎼滅储鏍囩 */
.search-dropdown__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  background-color: rgb(var(--color-entry-line));
  border-radius: 4px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.search-dropdown__tag:hover {
  background-color: #111111;
  color: #fff !important;
}

/* ========================================
   Mobile Responsive Styles
   ======================================== */

@media (max-width: 959px) {
  .top-bar__search-dropdown {
    width: calc(100vw - 24px);
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
  }

  .search-dropdown__title {
    font-size: 14px;
  }


  .search-dropdown__tag {
    padding: 6px 12px;
    font-size: 13px;
  }



}


/* Club L London-style nav icon group */
.top-bar__container {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

@media (min-width: 960px) {
  .top-bar-section,
  body.has-fullscreen-hero .top-bar-section.top-bar-section--sticky {
    width: 100%;
    max-width: none;
  }

  .top-bar__container.page-width {
    width: 100%;
    max-width: none;
    padding-inline: var(--club-header-padding-x-desktop, 24px);
  }
}

@media (max-width: 959px) {
  .top-bar__container {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.top-bar__logo {
  grid-column: 2;
  justify-self: center;
}

.top-bar__logo > h1,
.top-bar__logo > div {
  display: flex;
  justify-content: center;
  margin: 0;
}

.top-bar__logo-link {
  justify-content: center;
}

.top-bar__actions {
  grid-column: 3;
  justify-self: end;
  flex-wrap: wrap;
  gap: 16px;
  min-width: max-content;
}

.top-bar__search {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  max-width: none;
  flex: 0 0 auto;
}

.top-bar__search-placeholder {
  display: none;
}

.top-bar__search-form {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  align-items: center;
  width: min(360px, calc(100vw - 32px));
  height: 46px;
  color: #000;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 16%);
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  z-index: var(--z-index-dropdown);
}

.top-bar__search.is-dropdown-open .top-bar__search-form {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.top-bar__search-form:focus-within {
  border-color: #000;
  box-shadow: 0 0 0 1px #000;
}

.top-bar__search-icon {
  width: 46px;
  color: #000;
}

.top-bar__search-icon svg {
  width: 19px;
  height: 21px;
}

.top-bar__search-input {
  padding-inline-end: 16px;
  font-size: 14px;
  color: #000;
}

.top-bar__search-input::placeholder {
  color: rgb(0 0 0 / 54%);
  opacity: 1;
}

.top-bar__action-item {
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.top-bar__action-item:hover,
.top-bar__action-item:focus-visible,
.top-bar__search.is-dropdown-open > .top-bar__search-button,
.locale-popup-trigger:hover > .top-bar__action-item,
.locale-popup-trigger:focus-within > .top-bar__action-item {
  opacity: 0.7;
}

.top-bar__nav-icon,
.top-bar__nav-icon path {
  fill: currentColor;
}

.top-bar__search-icon .top-bar__nav-icon,
.top-bar__search-icon .top-bar__nav-icon path {
  fill: #000;
}

.top-bar__search-dropdown {
  top: calc(100% + 64px);
  right: 0;
  left: auto;
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  color: #000;
  transform: translateY(-4px);
}

.top-bar__search.is-dropdown-open .top-bar__search-dropdown {
  transform: translateY(0);
}

/* Search is an overlay, not a header-local dropdown: mount it on body so it
   can cover the fixed promotion bar, top bar, and navigation consistently. */
.top-bar__search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: none;
  padding: clamp(24px, 8vh, 96px) 16px;
  overflow-y: auto;
  background-color: rgb(var(--color-mask), 0.4);
}

body.top-bar-search-open .top-bar__search-overlay {
  display: block;
}

.top-bar__search-overlay .top-bar__search-form {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: flex !important;
  width: min(600px, 100%) !important;
  height: 52px;
  margin: 0 auto;
  color: #000 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  background-color: #fff !important;
  border-color: rgb(0 0 0 / 18%) !important;
  transform: none !important;
}

.top-bar__search-overlay .top-bar__search-dropdown {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: block;
  width: min(600px, 100%) !important;
  max-width: none;
  padding: 24px 32px;
  margin: 8px auto 0;
  color: #000;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 959px) {
  .top-bar__search-overlay .top-bar__search-form {
    height: 44px;
  }

  .top-bar__search-overlay .top-bar__search-dropdown {
    padding: 20px;
  }
}
/* Club L desktop top-bar action sizing */
@media (min-width: 960px) {
  .top-bar__actions {
    gap: var(--club-action-gap-desktop, 16px);
  }

  .top-bar__action-item,
  .top-bar__search {
    width: var(--club-action-hit-area-desktop, 32px);
    height: var(--club-action-hit-area-desktop, 32px);
  }

  .top-bar__action-item svg,
  .top-bar__search-button svg {
    width: var(--club-action-icon-desktop, 20px);
    height: var(--club-action-icon-desktop, 20px);
  }

  .top-bar__action-item[aria-label*="cart" i] {
    margin-inline-start: 2px;
  }
}

/* Club L desktop top-bar size-only alignment override */
@media (min-width: 960px) {
  :root {
    --club-desktop-logo-row-height: 74px;
    --club-desktop-nav-row-height: 64px;
  }

  .top-bar-section,
  body.has-fullscreen-hero .top-bar-section.top-bar-section--sticky {
    --top-bar-height: var(--club-desktop-logo-row-height, 74px);
    min-height: var(--club-desktop-logo-row-height, 74px) !important;
    height: var(--club-desktop-logo-row-height, 74px) !important;
    padding-top: 0 !important;
  }

  .top-bar__container.page-width {
    position: relative;
    min-height: var(--club-desktop-logo-row-height, 74px) !important;
    height: var(--club-desktop-logo-row-height, 74px) !important;
    padding-inline: 20px var(--club-header-padding-x-desktop, 16px) !important;
  }

  .top-bar__logo {
    align-self: center;
  }

  .top-bar__actions {
    align-self: center;
    gap: var(--club-action-gap-desktop, 16px) !important;
    padding-inline-end: 0;
  }
}

/* Top-bar desktop dual logo switching */
.top-bar__logo-image-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--desktop-logo-width, 150px);
  max-width: var(--desktop-logo-width, 150px);
  height: 25px;
  max-height: 25px;
}

.top-bar__logo-image-stack .top-bar__logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 25px;
  max-height: 25px;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.top-bar__logo-image-stack--has-transparent .top-bar__logo-image {
  position: absolute;
  inset: 0;
  margin: auto;
}

.top-bar__logo-image--default {
  opacity: 1;
}

.top-bar__logo-image--transparent {
  opacity: 0;
}

@media (min-width: 960px) {
  body.has-fullscreen-hero:not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--default {
    opacity: 0;
  }

  body.has-fullscreen-hero:not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--transparent {
    opacity: 1;
  }

  body.has-fullscreen-hero.fullscreen-hero-past
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--default,
  body.has-fullscreen-hero.fullscreen-hero-header-interacting
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--default {
    opacity: 1;
  }

  body.has-fullscreen-hero.fullscreen-hero-past
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--transparent,
  body.has-fullscreen-hero.fullscreen-hero-header-interacting
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--transparent {
    opacity: 0;
  }
}

body[data-page-type="collection"] .top-bar-section.top-bar-section--sticky,
body:has(.promotion-banner) .top-bar-section.top-bar-section--sticky {
  top: var(--promotion-banner-height, 0px) !important;
}

body.has-fullscreen-hero .top-bar-section.top-bar-section--sticky {
  top: auto !important;
}

@media (max-width: 959px) {
  .top-bar__logo-image-stack {
    width: var(--mobile-logo-width, 100px);
    max-width: var(--mobile-logo-width, 100px);
  }

  .top-bar__logo-image-stack--has-transparent .top-bar__logo-image {
    position: static;
  }

  .top-bar__logo-image--default {
    opacity: 1 !important;
  }

  .top-bar__logo-image--transparent {
    display: none !important;
    opacity: 0 !important;
  }
}

/* Club L desktop action reference spacing */
@media (min-width: 960px) {
  .top-bar__actions {
    gap: var(--club-action-gap-desktop, 8px) !important;
    padding-inline-end: 0 !important;
    margin-inline-end: 0 !important;
  }

  .top-bar__action-item,
  .top-bar__search,
  .top-bar__search-button,
  .top-bar__actions [data-relocated-to-top-bar] {
    flex: 0 0 var(--club-action-hit-area-desktop, 32px) !important;
    width: var(--club-action-hit-area-desktop, 32px) !important;
    min-width: var(--club-action-hit-area-desktop, 32px) !important;
    height: var(--club-action-hit-area-desktop, 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .top-bar__action-item[aria-label*="cart" i] {
    margin-inline-start: 0 !important;
  }

  .top-bar__action-badge {
    top: 1px;
    right: 1px;
  }
}
/* Club L desktop logo third module */
@media (min-width: 960px) {
  :root {
    --club-desktop-logo-module-height: 40px;
  }

  .top-bar__container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .top-bar__logo {
    grid-column: 2;
    justify-self: stretch;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: var(--club-desktop-logo-module-height, 40px);
    max-height: var(--club-desktop-logo-module-height, 40px);
  }

  .top-bar__logo > h1,
  .top-bar__logo > div,
  .top-bar__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--club-desktop-logo-module-height, 40px);
    max-height: var(--club-desktop-logo-module-height, 40px);
    margin: 0;
  }

  .top-bar__logo-image-stack {
    width: min(var(--desktop-logo-width, 400px), 100%);
    max-width: 100%;
    height: var(--club-desktop-logo-module-height, 40px);
    max-height: var(--club-desktop-logo-module-height, 40px);
  }
}
/* Club L desktop action edge alignment */
@media (min-width: 960px) {
  .top-bar__container.page-width {
    padding-inline-end: var(--club-header-padding-x-desktop, 16px) !important;
  }

  .top-bar__actions {
    margin-inline-end: 0 !important;
    padding-inline-end: 0 !important;
  }
}

/* Club L top-bar structural migration */
.top-bar__left,
.top-bar__mid,
.top-bar__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.top-bar__left {
  grid-column: 1;
  justify-content: flex-start;
}

.top-bar__mid {
  grid-column: 2;
  justify-content: center;
}

.top-bar__right {
  grid-column: 3;
  justify-content: flex-end;
}

.top-bar__mid .top-bar__logo,
.top-bar__right .top-bar__actions {
  width: 100%;
}

.top-bar__mobile-menu-placeholder {
  display: none;
  width: 24px;
  height: 24px;
}

@media (max-width: 959px) {
  .top-bar__mobile-menu-placeholder {
    display: block;
  }
}

/* Club L unified mobile-desktop top-bar structure */
@media (max-width: 959px) {
  theme-sticky-top-bar.top-bar-wrapper {
    display: block !important;
  }

  .top-bar.top-bar-section.top-bar__container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: var(--club-header-height-mobile, 52px);
    height: var(--club-header-height-mobile, 52px);
    padding: 0 var(--club-header-padding-x-mobile, 8px) !important;
  }

  .top-bar__left {
    grid-column: 1;
    justify-content: flex-start;
  }

  .top-bar__mid {
    grid-column: 2;
    justify-content: center;
  }

  .top-bar__right {
    grid-column: 3;
    justify-content: flex-end;
  }

  .top-bar__right .top-bar__actions {
    justify-content: flex-end;
    gap: var(--club-action-gap-mobile, 9px) !important;
    min-width: max-content;
    width: auto;
    flex-wrap: nowrap;
  }

  .top-bar__action-item,
  .top-bar__search,
  .top-bar__search-button,
  .top-bar__actions [data-relocated-to-top-bar] {
    width: var(--club-action-hit-area-mobile, 24px) !important;
    min-width: var(--club-action-hit-area-mobile, 24px) !important;
    height: var(--club-action-hit-area-mobile, 24px) !important;
    flex: 0 0 var(--club-action-hit-area-mobile, 24px) !important;
  }

  .top-bar__action-item svg,
  .top-bar__search-button svg,
  .top-bar__actions [data-relocated-to-top-bar] .top-bar__app-wishlist-icon {
    width: var(--club-action-icon-mobile, 18px) !important;
    height: var(--club-action-icon-mobile, 18px) !important;
  }

  theme-sticky-header,
  .header-section {
    display: none !important;
  }
}

/* Restore original mobile header; keep top-bar desktop-only */
@media (max-width: 959px) {
  theme-sticky-top-bar.top-bar-wrapper {
    display: none !important;
  }

  theme-sticky-header {
    display: block !important;
  }

  .header-section {
    display: block !important;
  }
}

/* Club L fixed desktop top-bar height */
@media (min-width: 960px) {
  :root {
    --club-desktop-logo-row-height: 80px;
  }

  theme-sticky-top-bar.top-bar-wrapper,
  .top-bar-section,
  .top-bar.top-bar-section.top-bar__container,
  body.has-fullscreen-hero .top-bar-section.top-bar-section--sticky {
    min-height: var(--club-desktop-logo-row-height) !important;
    height: var(--club-desktop-logo-row-height) !important;
    max-height: var(--club-desktop-logo-row-height) !important;
  }

  .top-bar__left,
  .top-bar__mid,
  .top-bar__right,
  .top-bar__logo,
  .top-bar__actions {
    min-height: var(--club-desktop-logo-row-height) !important;
    height: var(--club-desktop-logo-row-height) !important;
  }

  .top-bar__logo,
  .top-bar__logo-link,
  .top-bar__logo-image-stack {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Club L desktop dual logo target size */
@media (min-width: 960px) {
  :root {
    --club-transparent-logo-width: 194px;
    --club-transparent-logo-height: 41px;
    --club-desktop-logo-module-height: 41px;
    --club-desktop-logo-visual-offset: 12px;
  }

  .top-bar__logo {
    transform: translateY(var(--club-desktop-logo-visual-offset, 15px));
  }

  .top-bar__logo:has(.top-bar__logo-image-stack--has-transparent),
  .top-bar__logo:has(.top-bar__logo-image-stack--has-transparent) > h1,
  .top-bar__logo:has(.top-bar__logo-image-stack--has-transparent) > div,
  .top-bar__logo:has(.top-bar__logo-image-stack--has-transparent) .top-bar__logo-link {
    box-sizing: border-box;
    flex: 0 0 var(--club-transparent-logo-width, 194px) !important;
    width: var(--club-transparent-logo-width, 194px) !important;
    min-width: var(--club-transparent-logo-width, 194px) !important;
    max-width: var(--club-transparent-logo-width, 194px) !important;
    min-height: var(--club-transparent-logo-height, 41px) !important;
    height: var(--club-transparent-logo-height, 41px) !important;
    max-height: var(--club-transparent-logo-height, 41px) !important;
    overflow: visible;
  }

  .top-bar__logo-image-stack--has-transparent {
    flex: 0 0 var(--club-transparent-logo-width, 194px) !important;
    width: var(--club-transparent-logo-width, 194px) !important;
    min-width: var(--club-transparent-logo-width, 194px) !important;
    max-width: var(--club-transparent-logo-width, 194px) !important;
    height: var(--club-transparent-logo-height, 41px) !important;
    min-height: var(--club-transparent-logo-height, 41px) !important;
    max-height: var(--club-transparent-logo-height, 41px) !important;
  }

  .top-bar__logo-image-stack--has-transparent .top-bar__logo-image {
    display: block;
    width: var(--club-transparent-logo-width, 194px) !important;
    min-width: var(--club-transparent-logo-width, 194px) !important;
    max-width: var(--club-transparent-logo-width, 194px) !important;
    height: var(--club-transparent-logo-height, 41px) !important;
    min-height: var(--club-transparent-logo-height, 41px) !important;
    max-height: var(--club-transparent-logo-height, 41px) !important;
    object-fit: contain;
  }

  .top-bar__logo-image-stack--has-transparent .top-bar__logo-image picture,
  .top-bar__logo-image-stack--has-transparent .top-bar__logo-image img,
  .top-bar__logo-image-stack--has-transparent picture.top-bar__logo-image,
  .top-bar__logo-image-stack--has-transparent img.top-bar__logo-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
  }
}

@media (min-width: 960px) {
  body:has(.promotion-banner) {
    --club-fixed-header-stack-height: calc(
      var(--promotion-banner-height, 27px) +
      var(--club-desktop-logo-row-height, 80px) +
      var(--club-desktop-nav-row-height, 58px)
    );
    padding-top: calc(var(--promotion-banner-height, 27px) + var(--club-desktop-logo-row-height, 80px) + var(--club-desktop-nav-row-height, 58px)) !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner) {
    padding-top: var(--promotion-banner-height, 27px) !important;
  }

  body:has(.promotion-banner) theme-sticky-top-bar.top-bar-wrapper {
    position: fixed !important;
    inset-block-start: var(--promotion-banner-height, 27px) !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
    z-index: calc(var(--z-index-sticky, 1010) + 70) !important;
    color: rgb(var(--color-text)) !important;
    background-color: rgb(var(--color-background)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:has(.promotion-banner) .top-bar-section,
  body:has(.promotion-banner) .top-bar-section.top-bar-section--sticky,
  body.has-fullscreen-hero:has(.promotion-banner) .top-bar-section.top-bar-section--sticky {
    position: relative !important;
    inset-block-start: auto !important;
    top: auto !important;
    inset-inline-start: auto !important;
    left: auto !important;
    z-index: auto !important;
    transform: none !important;
    animation: none !important;
    color: rgb(var(--color-text)) !important;
    background-color: rgb(var(--color-background)) !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner) .top-bar__logo-link,
  body.has-fullscreen-hero:has(.promotion-banner) .top-bar__action-item,
  body.has-fullscreen-hero:has(.promotion-banner) .top-bar__search-icon,
  body.has-fullscreen-hero:has(.promotion-banner) .top-bar__search-input,
  body.has-fullscreen-hero:has(.promotion-banner) .top-bar__actions [data-relocated-to-top-bar] {
    color: rgb(var(--color-text)) !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner)
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--default {
    opacity: 1 !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner)
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--transparent {
    opacity: 0 !important;
  }

  /*
   * Promotion banner + fullscreen hero:
   * Keep the July 20 fixed-position stack fix, but restore the original
   * transparent opening state while the hero is still at the top.
   */
  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    theme-sticky-top-bar.top-bar-wrapper {
    color: #fff !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar-section,
  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar-section.top-bar-section--sticky {
    color: #fff !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__logo-link,
  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__action-item,
  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__search-icon,
  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__search-input,
  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__actions [data-relocated-to-top-bar] {
    color: #fff !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--default {
    opacity: 0 !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner):not(.fullscreen-hero-past):not(.fullscreen-hero-header-interacting)
    .top-bar__logo-image-stack--has-transparent
    .top-bar__logo-image--transparent {
    opacity: 1 !important;
  }

  body.has-fullscreen-hero:has(.promotion-banner).fullscreen-hero-past
    theme-sticky-top-bar.top-bar-wrapper,
  body.has-fullscreen-hero:has(.promotion-banner).fullscreen-hero-header-interacting
    theme-sticky-top-bar.top-bar-wrapper {
    color: rgb(var(--color-text)) !important;
    background-color: rgb(var(--color-background)) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}