/* Barre de recherche du header — shortcode [spc_header_search].
   Reste à opacity:0 (posé en inline par render_header_search()) jusqu'à ce
   que header-reveal-1.0.1.js (partagé avec les autres widgets du header)
   confirme que la mise en forme est stabilisée, pour éviter l'effet de
   "saut" au chargement (voir ce fichier JS pour le détail). La transition
   ne fait qu'adoucir cette apparition, elle ne remplace pas le mécanisme
   d'attente lui-même. */
.spc-header-search {
  position: relative;
  width: 100%;
  width: 560px !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 auto;
  flex: 0 1 560px;
  box-sizing: border-box;
  font-family: inherit;
  transition: opacity .2s ease;
}

.spc-header-search__box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 44px !important;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid #d7d9dc !important;
  border-radius: 999px !important;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.spc-header-search__box:focus-within {
  border-color: #444;
  box-shadow: 0 0 0 2px rgba(102, 102, 102, .08);
}

.spc-header-search__input {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 50px 0 18px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #20242a;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
}

.spc-header-search__input::placeholder {
  color: #8c9299;
  opacity: 1;
}

.spc-header-search__input::-webkit-search-cancel-button {
  display: none;
}

.spc-header-search__submit {
  position: absolute;
  top: 50%;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%);
  border: 0 !important;
  border-radius: 50% !important;
  background: #c8102e !important;
  color: #fff !important;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s ease, transform .1s ease;
}

.spc-header-search__submit:hover,
.spc-header-search__submit:focus-visible {
  background: #a90c25;
}

.spc-header-search__submit:active {
  transform: translateY(-50%) scale(.94);
}

.spc-header-search__submit svg {
  width: 17px !important;
  height: 17px !important;
}

.spc-header-search__suggestions {
  position: absolute;
  z-index: 99999;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow: hidden auto;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20, 22, 28, .16);
}

.spc-header-search__list {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.spc-header-search__result {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none !important;
}

.spc-header-search__result:hover,
.spc-header-search__result:focus-visible {
  background: #f6f8fa;
}

.spc-header-search__result img,
.spc-header-search__result-noimg {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  background: #f7f8f9;
}

.spc-header-search__result-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.spc-header-search__result-name {
  overflow: hidden;
  color: #20242a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spc-header-search__result-price {
  color: #c8102e;
  font-size: 12px;
  font-weight: 700;
}

.spc-header-search__empty {
  margin: 0;
  padding: 16px;
  color: #6c727a;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 767px) {
  .spc-header-search {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    flex-basis: 100%;
  }

  .spc-header-search__box {
    height: 44px !important;
  }

  .spc-header-search__input {
    padding-left: 18px !important;
    font-size: 14px;
  }

  .spc-header-search__submit {
    width: 34px !important;
    height: 34px !important;
  }
}