/* ═══════════════════════════════════════════════════════════════════
   Module recherche — panneau off-canvas et suggestions
   ═══════════════════════════════════════════════════════════════════
   Les classes .mc-offcanvas* et .mc-header__action viennent du système
   de design du thème ; ce fichier ne porte que ce qui est propre à la
   recherche, pour disparaître entièrement avec le module.
   ═══════════════════════════════════════════════════════════════════ */

/* Modificateur préfixé de sa classe de base : celle-ci vit dans le thème
   (header.css), qui peut se charger APRÈS ce fichier. À spécificité égale
   la base l'emporterait et le panneau repasserait à gauche. */
.mc-offcanvas.mc-offcanvas--search {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

.mc-offcanvas.mc-offcanvas--search[aria-hidden="false"] {
  transform: translateX(0);
}

/* ── Champ de saisie ─────────────────────────────────────────────── */

.mc-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.mc-search__icon {
  position: absolute;
  left: 0.875rem;
  color: var(--wp--preset--color--gris-texte);
  pointer-events: none;
  flex-shrink: 0;
}

.mc-search__input {
  width: 100%;
  height: 52px;
  font-family: var(--wp--preset--font-family--early-sans);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--teal-sombre);
  background: var(--wp--preset--color--gris-clair);
  border: none;
  border-radius: var(--wp--custom--radius--lg);
  padding-inline: 2.75rem 1rem;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.mc-search__input:focus {
  outline: none;
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 0 0 2px var(--wp--preset--color--teal);
}

.mc-search__input::placeholder {
  color: var(--wp--preset--color--gris-texte);
}

/* Masque le bouton × natif sur certains navigateurs */
.mc-search__input::-webkit-search-cancel-button {
  display: none;
}

/* ── Résultats ───────────────────────────────────────────────────── */

.mc-search__results {
  margin-block-start: 1rem;
}

/* Label de section */
.mc-search__section-label {
  font-size: 0.68rem;
  font-weight: 900;
  font-variation-settings: "wght" 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--gris-texte);
  margin: 0 0 0.5rem;
}

/* ── Grille produits (réutilise mc-product-card) ───────────── */

.mc-search__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-end: 0.75rem;
}

.mc-search__grid .mc-product-card__link {
  box-shadow: 0 2px 8px rgba(0, 55, 64, 0);
}

.mc-search__grid .mc-product-card__link:hover {
  box-shadow: var(--wp--preset--shadow--md);
}

.mc-search__grid .mc-product-card__img-wrap {
  aspect-ratio: 1;
}

.mc-search__grid .mc-product-card__body {
  padding: 0.75rem;
}

.mc-search__grid .mc-product-card__title {
  font-size: var(--wp--preset--font-size--sm) !important;
}

.mc-search__grid .mc-product-card__price {
  padding-block-start: 0.25rem;
}

.mc-search__grid .mc-product-card__price-qty {
  display: none;
}

/* ── "Voir tous les résultats" ───────────────────────────────────── */

.mc-search__see-all {
  display: block;
  width: 100%;
  text-align: center;
  margin-block-start: 0.25rem;
}

/* ── Section catégories ──────────────────────────────────────────── */

.mc-search__section--cats {
  border-top: 1px solid var(--wp--preset--color--gris-clair);
  padding-block-start: 0.75rem;
  margin-block-start: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mc-search__cat-link {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  color: var(--wp--preset--color--teal-sombre);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  border-radius: var(--wp--custom--radius--sm);
  transition: background-color 150ms ease;
}

.mc-search__cat-link:hover {
  background: var(--wp--preset--color--gris-clair);
}

.mc-search__cat-parent {
  font-size: 0.7rem;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  color: var(--wp--preset--color--gris-texte);
}

/* ── États ───────────────────────────────────────────────────────── */

.mc-search__no-results {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gris-texte);
  text-align: center;
  padding-block: 1.5rem;
}

/* Loader minimaliste */
.mc-search__loading {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--wp--preset--color--teal),
    transparent
  );
  background-size: 200% 100%;
  animation: mc-loading-bar 1s linear infinite;
  border-radius: 1px;
  margin-block: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .mc-search__loading {
    animation: none;
    background: var(--wp--preset--color--gris-clair);
  }
}