/* CG_STABLE_SEARCH_HEADER_V1
 *
 * The primary search form is rendered once by Magento in header-content.phtml.
 * This CSS keeps that one form fixed on desktop. No DOM cloning, reparenting,
 * MutationObserver, polling, scroll handler, or resize handler is used.
 */

:root {
  --cg-stable-topbar-h: 46px;
  --cg-stable-search-header-h: 96px;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: calc(var(--cg-stable-topbar-h) + var(--cg-stable-search-header-h));
  }

  /* Reserve the exact space occupied by both fixed header rows from first paint. */
  body .page-header {
    padding-top: calc(var(--cg-stable-topbar-h) + var(--cg-stable-search-header-h)) !important;
  }

  /*
   * This class deliberately replaces MageBig's .sticky-menu hook. The theme
   * can therefore no longer wrap, clone, or toggle this element while scrolling.
   */
  .page-header .header-main-content.cg-search-header {
    position: fixed !important;
    inset: var(--cg-stable-topbar-h) 0 auto 0 !important;
    z-index: 2100 !important;
    width: 100% !important;
    height: var(--cg-stable-search-header-h) !important;
    margin: 0 !important;
    background:
      radial-gradient(32rem 10rem at 16% -130%, rgba(216, 189, 123, .14), transparent 66%),
      linear-gradient(180deg, rgba(255, 255, 255, .985), rgba(253, 253, 251, .985)) !important;
    border-bottom: 1px solid rgba(45, 51, 127, .10) !important;
    box-shadow: 0 10px 22px rgba(13, 22, 36, .07) !important;
    transform: none !important;
    animation: none !important;
  }

  .page-header .cg-search-header .header-main-inner,
  .page-header .cg-search-header .header-maininner-row {
    min-height: var(--cg-stable-search-header-h) !important;
    height: var(--cg-stable-search-header-h) !important;
  }

  .page-header .cg-search-header .col-search,
  .page-header .cg-search-header .top-search-wrap {
    min-width: 0 !important;
    width: 100% !important;
  }

  .page-header .cg-search-header #cg-site-searchbar {
    max-inline-size: none !important;
    margin: 0 !important;
  }

  .page-header .cg-search-header #cg-site-searchbar .cg-input {
    min-height: 50px !important;
  }

  .page-header .cg-search-header #search_autocomplete,
  .page-header .cg-search-header .search-autocomplete {
    z-index: 2110 !important;
  }
}

/*
 * Mobile deliberately remains on the normal, non-sticky header plus its native
 * bottom Search control. Making the full two-row header fixed on a phone would
 * remove too much usable viewport height. Most importantly, .sticky-menu is
 * still absent, so MageBig's mutation-producing sticky routine cannot run.
 */
@media (max-width: 767px) {
  .page-header .header-main-content.cg-search-header {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-header .header-main-content.cg-search-header,
  .page-header .header-main-content.cg-search-header * {
    transition: none !important;
    animation: none !important;
  }
}
/* /CG_STABLE_SEARCH_HEADER_V1 */