@media (max-width: 999.98px) {
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] {
    --sp-mobile-control: 44px;
    --sp-mobile-gap: clamp(4px, 1.35vw, 8px);
    --sp-mobile-inset: clamp(10px, 3vw, 22px);
    --sp-mobile-logo-width: 150px;
  }

  html body.home.sp-header-is-compact #sp-sticky-masthead #header.ct-header [data-device="mobile"] {
    --sp-mobile-control: 40px;
    --sp-mobile-logo-width: 112px;
  }

  /* Reserve the controls' space first and let the logo fit the middle column. */
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] > .ct-container {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template: minmax(0, 1fr) / max-content minmax(0, 1fr) max-content !important;
    align-items: center !important;
    align-content: center !important;
    gap: 0 var(--sp-mobile-gap) !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 0 var(--sp-mobile-inset) !important;
    transform: none !important;
  }

  /* The homepage has a separate 23px shortcut strip above the main row. */
  html body.home:not(.sp-header-is-compact) #sp-sticky-masthead #header.ct-header [data-device="mobile"] [data-row="middle"] > .ct-container {
    padding-top: 23px !important;
  }

  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] [data-column],
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] [data-column] > [data-items] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    gap: var(--sp-mobile-gap) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] [data-column="start"] {
    grid-area: 1 / 1 !important;
    justify-self: start !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] [data-column="middle"] {
    grid-area: 1 / 2 !important;
    justify-self: stretch !important;
    justify-content: center !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] [data-column="middle"] > [data-items] {
    width: 100% !important;
    justify-content: center !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] [data-column="end"] {
    grid-area: 1 / 3 !important;
    justify-self: end !important;
  }

  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.site-branding, .site-logo-container) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: var(--sp-mobile-logo-width) !important;
    min-width: 0 !important;
    height: var(--sp-mobile-control) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.site-branding, .site-logo-container)::before,
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.site-branding, .site-logo-container)::after {
    content: none !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container img {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 30px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container img.default-logo {
    display: block !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container img:is(.sticky-logo, .transparent-logo) {
    display: none !important;
  }

  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-header-cart, .ct-account-item, .ct-cart-item) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex: 0 0 var(--sp-mobile-control) !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: var(--sp-mobile-control) !important;
    min-width: var(--sp-mobile-control) !important;
    max-width: var(--sp-mobile-control) !important;
    height: var(--sp-mobile-control) !important;
    min-height: var(--sp-mobile-control) !important;
    max-height: var(--sp-mobile-control) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    line-height: 1 !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-account-item, .ct-cart-item) {
    border: 1px solid #eee3f4 !important;
    border-radius: 12px !important;
    background: #fcf8ff !important;
    color: #57376a !important;
    box-shadow: 0 2px 8px #49215e0b !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-account-item, .ct-cart-item) > .ct-label {
    display: none !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-account-item, .ct-cart-item)::before,
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-account-item, .ct-cart-item)::after {
    content: none !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-account-item) > svg,
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-account-item, .ct-cart-item) > .ct-icon-container > svg,
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] .ct-account-item > .ct-media-container {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    transform: none !important;
    fill: currentColor !important;
  }
  html body :is(#main-container, #sp-sticky-masthead) #header.ct-header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-account-item, .ct-cart-item, .site-logo-container):focus-visible {
    outline: 2px solid #84429c !important;
    outline-offset: 2px !important;
  }
}