/*
 * OC_MOBILE_HEADER_VIEWPORT_CENTER_AND_SEARCH_V04
 * Scope: mobile Header v04 only. Desktop and existing icon dimensions remain unchanged.
 */
@media (max-width: 767px) {
  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar {
    position: relative !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
    column-gap: 3px !important;
  }

  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .menu-toggle {
    grid-column: 1 !important;
  }

  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: -11px !important;
    width: max-content;
    max-width: calc(100% - 132px) !important;
    z-index: 1;
  }

  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .oc-search-toggle {
    grid-column: 3 !important;
    justify-self: center !important;
    z-index: 3;
  }

  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .cart.mobile-cart {
    grid-column: 4 !important;
    z-index: 3;
  }
}

/* Keep a visible gap between the centered wordmark and the fixed search icon at 390px. */
@media (min-width: 360px) and (max-width: 399px) {
  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .logo,
  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .logo span {
    font-size: 21px !important;
  }
}

@media (max-width: 359px) {
  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .logo,
  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .logo span {
    font-size: 19px !important;
    letter-spacing: .5px !important;
  }

  .oc-sandbox-header[data-oc-header-version="v04"] .mobile-top-bar .logo {
    max-width: calc(100% - 112px) !important;
    margin-top: -9.5px !important;
  }
}