/**
 * @file
 * Site search (/search) — On.com–style discovery PLP (KOF release grid).
 */

/* Never show Drupal core / Solr search chrome on Kixify Next. */
body.kn-theme-on #search-box,
body.kn-theme-on #block-search-0,
body.kn-theme-on form#search-theme-form {
  display: none !important;
}

body.kn-theme-on.kn-site-search-kof .layout-content .title.page-title,
body.kn-theme-on.kn-site-search-kof .layout-content .tabs,
body.kn-theme-on.kn-site-search-kof .search-form:not(.kn-search-form),
body.kn-theme-on.kn-site-search-kof form#search-theme-form {
  display: none !important;
}

body.kn-theme-on.layout-search .layout-content .title.page-title,
body.kn-theme-on.layout-search .layout-content .tabs,
body.kn-theme-on.layout-search #search-box,
body.kn-theme-on.layout-search .search-form:not(.kn-search-form),
body.kn-theme-on.layout-search form#search-theme-form,
body.kn-theme-on.layout-search #block-search-0 {
  display: none !important;
}

/* Pinned search — bare /search only (not /search?s= results) */
body.kn-theme-on.layout-search.layout-search--bare .kn-header__panel--pinned {
  display: block;
  max-height: none;
  overflow: visible;
  border-bottom: 1px solid var(--kn-on-hairline);
  background: var(--kn-white);
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__panel-inner--search {
  max-width: none;
  margin: 0;
  padding: 0.85rem var(--kn-header-pad-x) 1.1rem;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned form.search-form {
  margin: 0;
  max-width: 52rem;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned .kn-search-overlay__input-row .form-item {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  position: relative;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned .kn-search-overlay__input-row {
  display: flex;
  width: 100%;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned .container-inline {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned input.kn-header-search-field,
body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned input.form-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 2.25rem 0.5rem 0.85rem;
  font-family: var(--kn-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--kn-ink);
  background: var(--kn-white);
  border: 1px solid var(--kn-line-strong);
  border-radius: var(--kn-radius, 3px);
  box-shadow: none;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned .kn-search-overlay__clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  z-index: 2;
  transform: translateY(-50%);
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned input:focus {
  outline: none;
  border-color: var(--kn-ink);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned .kn-header-search-submit,
body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned input[type="submit"] {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 2.75rem;
  height: auto;
  margin: 0;
  padding: 0 1.15rem;
  font-family: var(--kn-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kn-white) !important;
  background: var(--kn-ink) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
}

body.kn-theme-on.layout-search.layout-search--bare .kn-header__search--pinned .kn-header-search-submit:hover {
  opacity: 0.88;
}

/* In-page PLP shell — product grid/tiles use home.css + kn-shop.css (layout-shop), same as homepage. */
body.kn-theme-on.layout-search #kof-listings-wrapper.kn-plp {
  margin-top: 0;
}

body.kn-theme-on.kn-site-search-kof #kof-search-wrapper,
body.kn-theme-on.kn-site-search-kof #kof-search-keyword-wrapper,
body.kn-theme-on.kn-site-search-kof #block-releasedates_search-release_dates_search_form,
body.kn-theme-on.kn-site-search-kof .kn-release-search-mount--sr-only,
body.kn-theme-on.layout-search #kof-search-wrapper,
body.kn-theme-on.layout-search #kof-search-keyword-wrapper,
body.kn-theme-on.layout-search #block-releasedates_search-release_dates_search_form,
body.kn-theme-on.layout-search .kn-release-search-mount--sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hero + meta row */
.kn-search-hero {
  padding: clamp(1.35rem, 3vw, 2rem) 0 0.35rem;
  border-bottom: 1px solid var(--kn-on-hairline);
  margin-bottom: 1.25rem;
}

body.kn-theme-on.layout-search .kn-search-hero {
  padding: clamp(0.85rem, 2vw, 1.25rem) 0 0.5rem;
  border-bottom: none;
  margin-bottom: 0.65rem;
}

.kn-search-hero__title {
  margin: 0 0 0.35rem;
  font-family: var(--kn-display-font);
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--kn-ink);
}

.kn-search-hero__title-query {
  font-weight: 700;
}

.kn-search-hero__meta {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kn-muted);
}

.kn-search-suggest {
  margin-top: 1rem;
}

.kn-search-suggest__label {
  display: block;
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kn-muted);
}

.kn-search-suggest__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.kn-theme-on .kn-search-suggest__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  font-family: var(--kn-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--kn-white) !important;
  text-decoration: none !important;
  text-transform: lowercase;
  background: var(--kn-ink) !important;
  border: 1px solid var(--kn-ink) !important;
  border-radius: 999px;
  box-shadow: none;
  transition: opacity 0.15s ease;
}

body.kn-theme-on .kn-search-suggest__pill:hover,
body.kn-theme-on .kn-search-suggest__pill:focus-visible {
  opacity: 0.92;
  color: var(--kn-white) !important;
  background: var(--kn-ink) !important;
  border-color: var(--kn-ink) !important;
  outline: none;
  text-decoration: none !important;
}

/* Empty state */
body.kn-theme-on.layout-search #kof-listings-results-continer .release-date-item-continer {
  padding: 3rem 0;
  font-size: 1rem;
  color: var(--kn-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* On.com–style full-screen search overlay (header magnifier)                  */
/* -------------------------------------------------------------------------- */

body.kn-search-overlay-open {
  overflow: hidden;
}

/* Legacy kixifysearch_search.autocomplete.js — hide trending dropdown when overlay is closed. */
body:not(.kn-search-overlay-open) #tranding-data {
  display: none !important;
}

/* Search overlay takes over the whole viewport, including header chrome. */
body.kn-search-overlay-open .kn-header {
  z-index: 200;
}

body.kn-search-overlay-open #kn-search-toggle.kn-header__icon-btn--overlay {
  background: var(--kn-surface);
}

.kn-search-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1400;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kn-search-overlay[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

/* Fully remove closed overlay from layout (mobile ghost recent/preview chips). */
.kn-search-overlay[aria-hidden="true"]:not(.kn-search-overlay--closing) {
  display: none !important;
}

/* Dimmed page (left) — opacity only; never display:none while fading (avoids panel jump) */
.kn-search-overlay__backdrop {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(1px);
  cursor: pointer;
}

/* Hide panel content immediately on close so grid titles do not flash as a raw list */
.kn-search-overlay--closing .kn-search-overlay__field-wrap,
.kn-search-overlay--closing .kn-search-overlay__scroll {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Legacy On.com dismiss disc — removed from markup; hide if cached HTML still has it */
.kn-search-overlay__dismiss,
#kn-search-overlay-close:not(#kn-search-overlay-close-panel) {
  display: none !important;
  pointer-events: none !important;
}

.kn-search-overlay__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--kn-white);
  box-shadow: -8px 0 32px rgba(17, 17, 17, 0.12);
}

@media (min-width: 900px) {
  .kn-search-overlay__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(52rem, 92vw);
    height: auto;
    border-left: 1px solid var(--kn-on-hairline);
  }
}

/* Mobile: full-width panel + corner close (no dimmed strip) */
@media (max-width: 899px) {
  .kn-search-overlay {
    flex-direction: column;
  }

  .kn-search-overlay__backdrop {
    display: none !important;
  }

  .kn-search-overlay__panel {
    width: 100%;
    box-shadow: none;
  }
}

.kn-search-overlay__close--panel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--kn-ink);
  cursor: pointer;
}

@media (max-width: 899px) {
  .kn-search-overlay__close--panel {
    display: flex;
  }
}

.kn-search-overlay__close--panel:hover {
  background: var(--kn-surface);
}

.kn-search-overlay__field-wrap {
  flex-shrink: 0;
  padding: 2rem var(--kn-header-pad-x) 1rem;
}

.kn-search-overlay__panel-title {
  margin: 0 0 1.15rem;
  font-family: var(--kn-display-font);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--kn-ink);
}

.kn-search-overlay__input-row {
  position: relative;
  width: 100%;
}

.kn-search-overlay__input-row .form-item {
  margin: 0 !important;
}

.kn-search-overlay__clear {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--kn-ink);
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 1;
  transition: background 0.15s ease;
}

.kn-search-overlay__clear--hidden {
  display: none;
}

.kn-search-overlay__clear:hover,
.kn-search-overlay__clear:focus-visible {
  background: var(--kn-surface);
}

.kn-search-overlay__clear-svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  stroke: currentColor;
  pointer-events: none;
}

@media (max-width: 899px) {
  .kn-search-overlay__field-wrap {
    padding-right: calc(var(--kn-header-pad-x) + 2.5rem);
  }
}

.kn-search-overlay__field-wrap form.search-form {
  margin: 0;
  max-width: none;
}

/* Match List Your Item style-code search (kn-plain-input-fields on node/add/product). */
.kn-search-overlay__field-wrap .kn-search-plain-field,
.kn-search-overlay__field-wrap .kn-plain-input-fields {
  width: 100%;
  max-width: 100%;
}

.kn-search-overlay__field-wrap .kn-search-plain-field .form-item {
  margin: 0 !important;
}

.kn-search-overlay__field-wrap .kn-search-plain-field input.kn-search-overlay__input,
.kn-search-overlay__field-wrap .kn-search-plain-field input.form-text {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: 2.75rem !important;
  padding: 0.5rem 2.75rem 0.5rem 0.85rem !important;
  font-family: var(--kn-font) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--kn-ink) !important;
  background: var(--kn-white) !important;
  border: 1px solid var(--kn-line-strong) !important;
  border-radius: var(--kn-radius, 3px) !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

/* Hide native search clear (we use Lucide X) */
.kn-search-overlay__field-wrap input[type="search"]::-webkit-search-cancel-button,
.kn-search-overlay__field-wrap input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.kn-search-overlay__field-wrap .kn-search-plain-field input::placeholder {
  color: var(--kn-muted);
  opacity: 1;
}

.kn-search-overlay__field-wrap .kn-search-plain-field input:focus {
  outline: none !important;
  border-color: var(--kn-ink) !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08) !important;
}

.kn-search-overlay__field-wrap .kn-search-overlay__submit,
.kn-search-overlay__field-wrap input[type="submit"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

.kn-search-overlay__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--kn-header-pad-x) 2rem;
}

.kn-search-overlay__section + .kn-search-overlay__section {
  margin-top: 1.75rem;
}

.kn-search-overlay__section--hidden {
  display: none;
}

.kn-search-overlay__heading {
  margin: 0 0 0.85rem;
  font-family: var(--kn-display-font);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kn-ink);
}

.kn-search-overlay__products-head {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.kn-search-overlay__products-head .kn-search-overlay__heading {
  margin: 0;
}

.kn-search-overlay__count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kn-muted);
}

.kn-search-overlay .kn-search-suggest {
  margin-top: 0;
}

/* View All — homepage / PLP “Next Page” pill, centered under preview grid */
body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all.kn-plp-pager-next {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Beat body.kn-theme-on .kn-plp-pager-next { margin: 0 } from kn-catalog.css */
  margin: clamp(2.75rem, 6vw, 4rem) 0 0 !important;
  padding: 0.75rem 0 0;
}

/* Must beat body.kn-theme-on … .kn-plp-pager-next { display: flex } above */
body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all.kn-plp-pager-next.kn-search-overlay__view-all--hidden,
body.kn-theme-on .kn-search-overlay .kn-search-overlay__grid--loading ~ .kn-search-overlay__view-all.kn-plp-pager-next {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all .kn-plp-pager-next__inner {
  display: flex;
  justify-content: center;
  width: 100%;
}

body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all a.kn-plp-pager__next-page {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: min(100%, 12rem);
  box-sizing: border-box;
  text-decoration: none !important;
}

body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all a.kn-plp-pager__next-page:hover,
body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all a.kn-plp-pager__next-page:focus,
body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all a.kn-plp-pager__next-page:active,
body.kn-theme-on .kn-search-overlay .kn-search-overlay__view-all a.kn-plp-pager__next-page:visited {
  text-decoration: none !important;
}

/* Product grid — match homepage/shop tile rhythm inside the overlay panel. */
.kn-search-overlay__grid,
.kn-search-overlay__grid.products-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 2px !important;
  row-gap: 1.4rem !important;
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0;
}

@media (min-width: 768px) {
  .kn-search-overlay__grid,
  .kn-search-overlay__grid.products-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 3px !important;
    row-gap: 1.5rem !important;
  }
}

.kn-search-overlay__grid--loading:not(:empty) {
  min-height: 10rem;
  opacity: 0.45;
}

/* Columns + gutters: home.css .products-wrapper (2-up until 768px, homepage gaps). */

.kn-search-overlay__tile {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden;
}

.kn-search-overlay__tile .kn-tile__link {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  text-align: left !important;
  text-decoration: none;
  color: inherit;
}

.kn-search-overlay__tile .kn-tile__media.image-wrapper,
.kn-search-overlay__grid article.kn-tile .kn-tile__media.image-wrapper {
  aspect-ratio: 1 / 1;
  background: var(--kn-tile-studio, #f4f4f4) !important;
  border-radius: 0 !important;
  overflow: hidden;
  padding-top: clamp(1rem, 4.25vw, 1.75rem) !important;
  padding-bottom: clamp(1rem, 4.25vw, 1.75rem) !important;
  padding-left: clamp(1rem, 3.75vw, 1.55rem) !important;
  padding-right: clamp(1rem, 3.75vw, 1.55rem) !important;
}

.kn-search-overlay__grid .kn-tile__img {
  width: auto !important;
  height: auto !important;
  max-width: 68% !important;
  max-height: 78% !important;
  object-fit: contain;
}

.kn-search-overlay__grid .kn-tile__copy {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-top: 0.65rem;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  overflow: hidden;
}

.kn-search-overlay__grid .kn-tile__title {
  box-sizing: border-box;
  display: block !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 var(--kn-tile-title-end-gutter, 1rem) 0 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--kn-font) !important;
  font-size: var(--kn-tile-title-size, 0.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  color: var(--kn-ink) !important;
  text-align: left !important;
}

body.kn-theme-on .kn-search-overlay__grid .kn-search-overlay__tile.product-item.product-wrapper .title-wrapper.kn-tile__title {
  display: block !important;
  flex: 0 1 auto;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  .kn-search-overlay__grid .kn-tile__img {
    max-width: 76% !important;
    max-height: 84% !important;
  }

  .kn-search-overlay__grid .kn-tile__title {
    font-size: var(--kn-tile-title-mobile, var(--kn-tile-title-size, 0.75rem)) !important;
    line-height: 1.25 !important;
  }
}

.kn-search-overlay__grid .kn-tile__price {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--kn-tile-price-size, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--kn-ink);
  text-align: left !important;
}

@media (max-width: 767px) {
  .kn-search-overlay__grid .kn-tile__price {
    font-size: var(--kn-tile-price-mobile, var(--kn-tile-price-size, 0.75rem));
    line-height: 1.3;
  }
}

.kn-search-overlay__empty {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--kn-muted);
}

.kn-search-overlay__empty--hidden {
  display: none;
}