/** Shopify CDN: Minification failed

Line 946:0 Expected "}" to go with "{"

**/
/*
  assets/nvlty-mobile-predictive-search.css

  Clean, isolated styling for the mobile predictive-search panel.

  Important:
  - No CSS custom properties are declared or consumed.
  - No cart, menu, PDP, Quickview or search-results-page selectors are used.
  - Header overrides exist only while .nvlty-search-panel-active is present.
  - This file must be loaded once, after the theme's main stylesheet.
*/

@font-face {
  font-family: 'BasisGrotesqueArabicPro-Black';
  src: url('/cdn/shop/files/BasisGrotesqueArabicPro-Black.woff2?v=1780061010') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'BasisGrotesqueArabicPro-Bold';
  src: url('/cdn/shop/files/BasisGrotesqueArabicPro-Bold.woff2?v=1780061016') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Never expose the panel before its mobile media query becomes active. */
.nvlty-mobile-search-panel {
  display: none;
}

/* Preserve the theme's existing desktop/mobile search-bar split. */
@media screen and (min-width: 981px) {
  predictive-search.devMobilePreSerach {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {

  /*
===============================================================================
NVLTY MOBILE SEARCH — STABLE HEADER STACK
===============================================================================

While Search is open, the complete header stack must be viewport-fixed
regardless of the page's previous scroll/sticky state.

The normal sticky-navigation state remains untouched when Search is closed.
===============================================================================
*/

html.nvlty-search-panel-active
body.template-index
#header-group {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;

  z-index: 9999 !important;
}


/*
 * When Search opens from a scrolled position Testament may already have
 * .navigation--sticky on the navigation.
 *
 * Do not allow that child to remain independently fixed while its parent
 * header group is also fixed. Put it back into the header's normal flow
 * for the duration of the Search panel.
 */
html.nvlty-search-panel-active
body.template-index
#header-group
.navigation,

html.nvlty-search-panel-active
body.template-index
#header-group
.navigation.navigation--sticky {
  position: relative !important;

  top: auto !important;
  left: auto !important;
  right: auto !important;

  width: 100% !important;
}

  /*
    Search-active header state.

    The announcement bar is deliberately excluded. Only the actual header,
    navigation row and search row become white with black content.
  */
  html.nvlty-search-panel-active #header-group .header-section,
  html.nvlty-search-panel-active #header-group .header-wrapper,
  html.nvlty-search-panel-active #header-group .navigation,
  html.nvlty-search-panel-active #header-group .nav-container,
  html.nvlty-search-panel-active #header-group predictive-search.devMobilePreSerach,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach form,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach .devInputWrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #e7e7e7 !important;
  }

  html.nvlty-search-panel-active #header-group .header-section a,
  html.nvlty-search-panel-active #header-group .header-section button,
  html.nvlty-search-panel-active #header-group .header-section label,
  html.nvlty-search-panel-active #header-group .header-section p,
  html.nvlty-search-panel-active #header-group .header-section span,
  html.nvlty-search-panel-active #header-group .header-section input,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach a,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach button,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach label,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach span,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach input {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

  html.nvlty-search-panel-active #header-group .devMobilePreSerach input::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #000000 !important;
  }

  html.nvlty-search-panel-active #header-group .header-section svg,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach svg {
    color: #000000 !important;
  }

  html.nvlty-search-panel-active #header-group .header-section svg .hover-fill,
  html.nvlty-search-panel-active #header-group .header-section svg [fill]:not([fill='none']),
  html.nvlty-search-panel-active #header-group .devMobilePreSerach svg .hover-fill,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach svg [fill]:not([fill='none']) {
    fill: #000000 !important;
  }

  html.nvlty-search-panel-active #header-group .header-section svg .hover-stroke,
  html.nvlty-search-panel-active #header-group .header-section svg [stroke]:not([stroke='none']),
  html.nvlty-search-panel-active #header-group .devMobilePreSerach svg .hover-stroke,
  html.nvlty-search-panel-active #header-group .devMobilePreSerach svg [stroke]:not([stroke='none']) {
    stroke: #000000 !important;
  }

  /* Covers image-based white logos without affecting product imagery. */
  html.nvlty-search-panel-active #header-group .header-section #logo img,
  html.nvlty-search-panel-active #header-group .header-section .logo img {
    filter: brightness(0) saturate(100%) !important;
  }

  html.nvlty-search-panel-active #header-group .devMobilePreSerach .searchbox__input {
    caret-color: #000000 !important;
  }

  /*
    The MENU icon paths inherit currentColor. Target the button, SVG and paths
    directly so the homepage's later transparent-header rules cannot turn the
    icon white while the search panel is active.
  */
  html.nvlty-search-panel-active body #header-group
    .slideout__trigger-mobile-menu,
  html.nvlty-search-panel-active body #header-group
    .slideout__trigger-mobile-menu
    svg.testament--icon-theme-menu-bars,
  html.nvlty-search-panel-active body #header-group
    .slideout__trigger-mobile-menu
    svg.testament--icon-theme-menu-bars
    path.nv-menu-bar {
    color: #000000 !important;
    stroke: #000000 !important;
  }

  /* The replacement panel is the only predictive result area on mobile. */
  #header-group .devMobilePreSerach > form > #predictive-search-desktop {
    display: none !important;
  }

  /*
    Fixed panel.

    JavaScript writes one direct inline top value from the search row's real
    bottom edge. The 0 value is only a safe pre-initialisation fallback.
  */
  .nvlty-mobile-search-panel {
  background: #ffffff !important;
  bottom: 0 !important;
  box-sizing: border-box !important;
  color: #000000 !important;
  display: block !important;
  left: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: fixed !important;
  right: 0 !important;
  top: 0;

  /*
   * IMPORTANT:
   * Do not make the resting transform !important.
   *
   * The opening keyframe must temporarily control transform
   * while .is-opening is active.
   */
  transform: translate3d(0, -100%, 0);

  transition:
    transform 700ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 700ms !important;

  visibility: hidden !important;
  width: 100% !important;
  will-change: transform;
  z-index: 9990 !important;
}

  .nvlty-mobile-search-panel.is-open {
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
  transform 700ms cubic-bezier(0.76, 0, 0.24, 1),
  visibility 0s linear 700ms !important;
    visibility: visible !important;
  }

  .nvlty-mobile-search-panel.is-settled {
  will-change: auto;
}

/*
 * One mobile sheet:
 * the existing search form is moved into the existing panel while open.
 */
.nvlty-mobile-search-panel.nvlty-mobile-search-sheet {
  display: flex !important;
  flex-direction: column !important;
}

.nvlty-mobile-search-panel.nvlty-mobile-search-sheet > form {
  background: #ffffff !important;
  box-sizing: border-box !important;
  flex: 0 0 35px !important;
  min-height: 35px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  width: 100% !important;
}

.nvlty-mobile-search-panel
  > form
  > .devInputWrapper
  > input#searchbox.searchbox__input {
  box-sizing: border-box !important;

  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  background: transparent !important;

  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;

  opacity: 1 !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 35px !important;
}

.nvlty-mobile-search-panel
  > form
  > .devInputWrapper
  > input#searchbox.searchbox__input::placeholder,

.nvlty-mobile-search-panel
  > form
  > .devInputWrapper
  > input#searchbox.searchbox__input::-webkit-input-placeholder {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 35px !important;
}

.nvlty-mobile-search-panel.nvlty-mobile-search-sheet
  .nvlty-mobile-search-panel__scroll {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

.nvlty-mobile-search-panel.nvlty-mobile-search-sheet
  .nvlty-mobile-search-panel__close-wrapper {
  top: 55px !important;
}

  .nvlty-mobile-search-panel__scroll {
    box-sizing: border-box !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 25px 18px 40px !important;
    scrollbar-width: none;
    touch-action: pan-y;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__scroll::-webkit-scrollbar,
  .nvlty-mobile-search-panel__terms::-webkit-scrollbar,
  .nvlty-mobile-search-panel .search__product-loop::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  /* Close control: top-right of the panel content, not the page. */
  .nvlty-mobile-search-panel__close-wrapper {
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 16px !important;
    top: 20px !important;
    width: 20px !important;
    z-index: 3 !important;
  }

  .nvlty-mobile-search-panel__close {
    align-items: center !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000000 !important;
    cursor: pointer !important;
    display: flex !important;
    height: 20px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 20px !important;
  }

  .nvlty-mobile-search-panel__close svg {
    color: #000000 !important;
    display: block !important;
    height: 15px !important;
    width: 15px !important;
  }

  .nvlty-mobile-search-panel__close svg .hover-stroke {
    stroke: #000000 !important;
  }

  .nvlty-mobile-search-panel__section,
  .nvlty-mobile-search-panel__products {
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__section[hidden],
  .nvlty-mobile-search-panel__results-header[hidden],
  .nvlty-mobile-search-panel__empty[hidden] {
    display: none !important;
  }

  .nvlty-mobile-search-panel__heading,
  .nvlty-mobile-search-panel__results-title {
    color: #000000 !important;
    font-family: 'BasisGrotesqueArabicPro-Black', sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  /* Leave room for the close control on the first visible heading row. */
  .nvlty-mobile-search-panel__scroll > .nvlty-mobile-search-panel__section:first-of-type .nvlty-mobile-search-panel__heading {
    padding-right: 40px !important;
  }

  .nvlty-mobile-search-panel__terms {
    align-items: center !important;
    column-gap: 15px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 15px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    scrollbar-width: none;
    touch-action: pan-x;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__terms li {
    flex: 0 0 auto !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nvlty-mobile-search-panel__terms a {
    color: #000000 !important;
    display: block !important;
    font-family: 'BasisGrotesqueArabicPro-Bold', sans-serif !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .nvlty-mobile-search-panel__divider {
    background: #e7e7e7 !important;
    border: 0 !important;
    height: 1px !important;
    margin: 15px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__recent:not([hidden])
    + .nvlty-mobile-search-panel__suggestions {
    margin-top: 15px !important;
  }

  .nvlty-mobile-search-panel__products {
    margin: 15px 0 0 !important;
    min-height: 260px;
    padding: 0 !important;
  }

  /* Dynamic heading shown only after the visitor starts entering a query. */
  .nvlty-mobile-search-panel__results-header:not([hidden]) {
    align-items: baseline !important;
    column-gap: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__results-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .nvlty-mobile-search-panel__view-all {
    color: #000000 !important;
    flex: 0 0 auto !important;
    font-family: 'BasisGrotesqueArabicPro-Bold', sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 0 1px !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    white-space: nowrap !important;
  }

  .nvlty-mobile-search-panel__product-results {
    margin: 0 !important;
    opacity: 0;
    padding: 0 !important;
    transition: opacity 180ms ease-out;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__product-results.is-populated {
    opacity: 1;
  }

  /* Native two-card rail using the existing product-listing card markup. */
  .nvlty-mobile-search-panel .nvlty-search-product-rail,
  .nvlty-mobile-search-panel .search__product-loop {
    -webkit-overflow-scrolling: touch;
    column-gap: 4px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel .product-index {
    box-sizing: border-box !important;
    flex: 0 0 calc((100% - 20px) / 2) !important;
    grid-column: auto !important;
    list-style: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
    width: calc((100% - 20px) / 2) !important;
  }

  .nvlty-mobile-search-panel .product-index .js-product-image,
  .nvlty-mobile-search-panel .product-index .product-info {
    width: 100% !important;
  }

  /*
    Product-card typography overrides are intentionally confined to cards
    rendered inside this search panel. Their high specificity also defeats the
    per-card <style> blocks contained in the predictive-search response.
  */
  html body .nvlty-mobile-search-panel
    .nvlty-mobile-search-panel__product-results
    .product-index
    .product-info-inner
    > .devCollectionCardDetails
    > .devCollectionCardTitleLink
    .prod-title {
    color: #000000 !important;
    font-family: 'BasisGrotesqueArabicPro-Black', sans-serif !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body .nvlty-mobile-search-panel
    .nvlty-mobile-search-panel__product-results
    .product-index
    .product-info-inner
    > .devCollectionCardDetails
    > .product-color-name.devVariantColor.devCardColorLabel {
    font-size: 10px !important;
  }

  /* Product-rail progress track, created once by the panel-only progress JS. */
  .nvlty-mobile-search-panel__rail-progress {
    background: #e7e7e7 !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    height: 2px !important;
    margin: 15px 0 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
  }

  .nvlty-mobile-search-panel__rail-progress[hidden] {
    display: none !important;
  }

  .nvlty-mobile-search-panel__rail-progress-thumb {
    background: #000000 !important;
    border: 0 !important;
    border-radius: 2px !important;
    display: block !important;
    height: 2px !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    transform: translate3d(0, 0, 0);
    width: 10% !important;
    will-change: transform;
  }

  .nvlty-mobile-search-panel__empty {
    color: #000000 !important;
    font-family: 'BasisGrotesqueArabicPro-Bold', sans-serif !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

    @keyframes nvlty-mobile-search-slide-in {
    from {
      transform: translate3d(0, -100%, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  .nvlty-mobile-search-panel.is-opening {
  animation:
    nvlty-mobile-search-slide-in
    700ms
    cubic-bezier(0.76, 0, 0.24, 1)
    both !important;
  pointer-events: auto !important;
  transition:
    transform 700ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0s !important;
  visibility: visible !important;
}
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .nvlty-mobile-search-panel {
    transition-duration: 1ms, 0s !important;
  }

  .nvlty-mobile-search-panel__product-results {
    transition-duration: 1ms !important;
  }
}

/* Hide each card's internal track and Quickview toggle in this panel only. */
.nvlty-mobile-search-panel
.nvlty-mobile-search-panel__product-results
.product-index
.nvProductCardNav,
.nvlty-mobile-search-panel
.nvlty-mobile-search-panel__product-results
.product-index
.product-listing__quickview-trigger {
  display: none !important;
}

/* Fixed single product image inside search-panel cards only. */
.nvlty-mobile-search-panel
.nvlty-mobile-search-panel__product-results
.product-index
.devProductCardCarousel {
  overflow: hidden !important;
  touch-action: pan-x !important;
}

.nvlty-mobile-search-panel
.nvlty-mobile-search-panel__product-results
.product-index
.devProductCardCarouselTrack {
  display: block !important;
  overflow: hidden !important;
  transform: none !important;
  width: 100% !important;
}

.nvlty-mobile-search-panel
.nvlty-mobile-search-panel__product-results
.product-index
.devProductCardCarouselSlide {
  display: none !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.nvlty-mobile-search-panel
.nvlty-mobile-search-panel__product-results
.product-index
.devProductCardCarouselSlide:first-child {
  display: block !important;
}

/*
  APPEND TO THE ABSOLUTE BOTTOM OF:
  assets/nvlty-mobile-predictive-search.css

  Mobile search-active state only.
*/

@media screen and (max-width: 767px) {
  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    .header-section
    .mobile-menu__trigger,
  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    .header-section
    .mobile-menu__trigger
    .slideout__trigger--open,
  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    .header-section
    button.slideout__trigger-mobile-menu,
  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    .header-section
    button.slideout__trigger-mobile-menu
    svg.testament--icon-theme-menu-bars {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    .header-section
    button.slideout__trigger-mobile-menu
    svg.testament--icon-theme-menu-bars
    path.nv-menu-bar {
    color: #000000 !important;
    fill: none !important;
    opacity: 1 !important;
    stroke: #000000 !important;
    visibility: visible !important;
  }

  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input {
    caret-color: #000000 !important;
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
  }

  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input::placeholder,
  html.nvlty-search-panel-active
    body.nvlty-search-panel-active
    div#header-group
    predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
  }
}

@media screen and (max-width: 767px) {
  /*
    The definitive JS marks the active input with this attribute. Keep typed
    text and placeholder text black in every interaction state.
  */
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true'],
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:hover,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:focus,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:focus-visible,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:active {
    caret-color: #000000 !important;
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
  }

  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']::placeholder,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:hover::placeholder,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:focus::placeholder,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']:focus-visible::placeholder,
  html body predictive-search.devMobilePreSerach
    input#searchbox.searchbox__input[data-nvlty-search-input-active='true']::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
  }

  /* Preserve the requested panel-only product-card side spacing. */
  .nvlty-mobile-search-panel
    .nvlty-mobile-search-panel__product-results
    .product-index
    > .product-info {
    box-sizing: border-box !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    width: calc(100% - 16px) !important;
  }
}

/* Mobile header search: icon at rest, full search row only while open. */
@media screen and (max-width: 767px) {
  #header-group .mobile-menu__trigger {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
  }

  #header-group .nvlty-mobile-search-trigger {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--header-link-color) !important;
    display: inline-flex !important;
    height: 32px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 24px !important;
  }

  #header-group
  .nvlty-mobile-search-trigger
  .testament--icon-theme-search {
    height: 24px !important;
    max-height: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    min-width: 24px !important;
    width: 24px !important;
  }

  /*
 * The predictive-search custom element is the controller only.
 *
 * The real form is temporarily moved into .nvlty-mobile-search-panel
 * while mobile search is open. Therefore the original controller must
 * never create its own visible row or reserve header space.
 */
#header-group predictive-search.devMobilePreSerach {
  display: none !important;
}

@media screen and (min-width: 768px) {
  #header-group .nvlty-mobile-search-trigger {
    display: none !important;
  }
}

/*
===============================================================================
NVLTY MOBILE SEARCH — CART COUNT ACTIVE HEADER COLOUR
===============================================================================

Homepage normally requires a white cart count over the transparent hero.

When mobile Search is active the header becomes white, so explicitly switch
only the existing cart-count text to black.

No positioning, sizing, cart state or functionality is changed.
===============================================================================
*/

@media screen and (max-width: 767px) {
  html.nvlty-search-panel-active
  body.template-index.nvlty-search-panel-active
  #header-group
  .header-section
  .cart-links__link-cart
  span.js-cart-count {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/*
===============================================================================
NVLTY MOBILE SEARCH — REMOVE STICKY HEADER SPACER WHILE SEARCH IS ACTIVE
===============================================================================

When Search opens from a scrolled position, the sticky navigation is returned
to normal flow inside the fixed header group.

Testament's .header-spacer is therefore no longer required. Leaving it active
adds an invisible 45px block underneath the real header.
===============================================================================
*/

html.nvlty-search-panel-active
body.nvlty-search-panel-active
#header-group
.header-spacer {
  display: none !important;

  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}