/*
 * DAM Marine — overlay de recherche, calé sur la maquette du 06/10/2026.
 * Chargé APRÈS le thème et front.css (priorité 1100, custom.css est à 1000).
 *
 * Chaque sélecteur est préfixé par .damsearch-overlay : front.css contient
 * des règles à deux classes qui, sinon, l'emporteraient par spécificité
 * quel que soit l'ordre de chargement.
 *
 * Ne change ni les hooks data-damsearch ni les états pilotés par le JS
 * (hidden, aria-expanded, .damsearch-sidebar-collapsed, .active).
 */

.damsearch-overlay {
  --ds-navy: #032c6c;
  --ds-ink: #0b1d4a;
  --ds-text: #0e1b3d;
  --ds-muted: #6b7aa0;
  --ds-page: #f0f6fb;
  --ds-line: #e3ebf3;
  --ds-card-line: #e4e9f0;
  --ds-thumb: #f5f6f8;
  --ds-tab: #e4edf7;
  --ds-tab-text: #4c5d82;
  --ds-link: #1d4aa8;
  --ds-green: #13803f;
  --ds-orange: #b26a00;
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--ds-text);
  background: var(--ds-page);
  text-align: left;
  line-height: 1.4;
  /* L'ouverture (display) appartient au JS existant. */
}
/*
 * Les modales du thème (popup « ajouté au panier » #blockcart-modal, ouverte
 * par le bouton panier des cartes) sont à z-index 1050 : sans ça, elles
 * s'ouvrent derrière l'overlay et la page semble figée.
 * Limité aux enfants directs de body, là où Bootstrap et le thème les
 * ajoutent : des modules (wishlist…) gardent des backdrops invisibles dans
 * la page, qui couvriraient sinon l'overlay et bloqueraient les clics.
 */
body.damsearch-overlay-open > .modal-backdrop { z-index: 100001; }
body.damsearch-overlay-open > .modal { z-index: 100002; }

.damsearch-overlay *,
.damsearch-overlay *::before,
.damsearch-overlay *::after { box-sizing: border-box; }
.damsearch-overlay [hidden] { display: none !important; }
.damsearch-overlay button,
.damsearch-overlay input { font: inherit; }
.damsearch-overlay a { color: var(--ds-navy); }
.damsearch-overlay .damsearch-svg {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

/* --- Cadre ---------------------------------------------------------------- */
.damsearch-overlay .damsearch-overlay-panel {
  width: 100%;
  max-width: 1440px;
  min-height: 100%;
  margin: 0 auto;
  padding: 18px 40px 40px;
  background: transparent;
  overflow: visible;
}

/* --- Barre du haut : logo | recherche | fermer ---------------------------- */
.damsearch-overlay .damsearch-overlay-topbar {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  margin: 0 0 16px;
}
.damsearch-overlay .damsearch-overlay-logo { display: inline-flex; align-items: center; }
.damsearch-overlay .damsearch-overlay-logo img {
  display: block;
  width: 110px;
  max-width: 100%;
  max-height: none;
  height: auto;
}
.damsearch-overlay .damsearch-overlay-form {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #dde6f0;
  border-radius: 10px;
  background: #fff;
}
.damsearch-overlay .damsearch-overlay-icon { font-size: 22px; color: var(--ds-tab-text); }
.damsearch-overlay .damsearch-overlay-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  color: var(--ds-ink);
  background: transparent;
  font-size: 20px;
}
.damsearch-overlay .damsearch-overlay-topbar-right { display: flex; align-items: center; gap: 12px; margin-left: 12px; }
/* La maquette n'a pas d'accès panier dans l'overlay : le panier du thème
   reste dans l'en-tête de la boutique, et chaque carte a son bouton. */
.damsearch-overlay .damsearch-overlay-cart { display: none; }
.damsearch-overlay .damsearch-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--ds-navy);
  font-size: 22px;
  cursor: pointer;
}

/* --- Grille : filtres | résultats ----------------------------------------- */
.damsearch-overlay .damsearch-overlay-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.damsearch-overlay .damsearch-overlay-body {
  grid-column: 2;
  position: static;
  float: none;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* --- Colonne de filtres --------------------------------------------------- */
.damsearch-overlay .damsearch-overlay-sidebar {
  grid-column: 1;
  position: sticky;
  top: 16px;
  float: none;
  width: auto;
  min-width: 0;
  max-height: min(var(--dam-search-available-height, 85dvh), calc(100dvh - 32px));
  margin: 0;
  padding: 18px 26px 18px 30px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 1px solid var(--ds-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.damsearch-overlay .damsearch-sidebar-section { position: relative; margin: 0; padding: 0; border: 0; }
.damsearch-overlay .damsearch-sidebar-section + .damsearch-sidebar-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-line);
}
.damsearch-overlay .damsearch-sidebar-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ds-navy);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
/* Barre d'accent à gauche du titre de groupe. */
.damsearch-overlay .damsearch-sidebar-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -18px;
  width: 4px;
  height: 26px;
  margin-top: -13px;
  border-radius: 2px;
  background: var(--ds-navy);
}
.damsearch-overlay .damsearch-sidebar-title {
  margin: 0;
  color: var(--ds-navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.damsearch-overlay .damsearch-sidebar-chevron {
  font-size: 20px;
  color: var(--ds-navy);
  transform: none;
  transition: transform .15s ease;
}
.damsearch-overlay .damsearch-sidebar-toggle[aria-expanded="false"] .damsearch-sidebar-chevron { transform: rotate(-90deg); }
.damsearch-overlay .damsearch-sidebar-body { padding: 6px 0 0; }
.damsearch-overlay .damsearch-sidebar-list { margin: 0; padding: 0; list-style: none; }
.damsearch-overlay .damsearch-sidebar-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 0;
  border-radius: 0;
  color: var(--ds-text);
  background: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.damsearch-overlay .damsearch-sidebar-item:hover .damsearch-sidebar-name { text-decoration: underline; }
.damsearch-overlay .damsearch-sidebar-item.active .damsearch-sidebar-name { color: var(--ds-navy); text-decoration: underline; }
.damsearch-overlay .damsearch-sidebar-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.damsearch-overlay .damsearch-sidebar-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ds-muted);
  background: none;
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.damsearch-overlay .damsearch-sidebar-item-hidden { display: none; }
.damsearch-overlay .damsearch-sidebar-more {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  color: var(--ds-link);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Disponibilité : cases carrées, libellé en graisse normale. */
.damsearch-overlay .damsearch-sidebar-avail { align-items: center; gap: 14px; font-weight: 500; cursor: pointer; }
.damsearch-overlay .damsearch-availability-checkbox {
  -webkit-appearance: none;
          appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #a7b1c2;
  border-radius: 3px;
  background: #fff center / 12px 12px no-repeat;
  cursor: pointer;
}
.damsearch-overlay .damsearch-availability-checkbox:checked {
  border-color: var(--ds-navy);
  background-color: var(--ds-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* Prix : bornes en gras aux extrémités, sans tiret au milieu. */
.damsearch-overlay .damsearch-price-slider { padding: 2px 0 0; }
.damsearch-overlay .damsearch-price-values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
}
.damsearch-overlay .damsearch-price-value-sep { display: none; }
.damsearch-overlay .damsearch-price-track,
.damsearch-overlay .damsearch-price-track-fill { height: 3px; background: var(--ds-navy); }
.damsearch-overlay .damsearch-price-track { background: #c9d3e1; }
.damsearch-overlay .damsearch-price-input::-webkit-slider-thumb { border: 2px solid var(--ds-navy); box-shadow: none; }
.damsearch-overlay .damsearch-price-input::-moz-range-thumb { border: 2px solid var(--ds-navy); box-shadow: none; }

/* Le panneau de filtres mobile (en-tête, actions, fond) et la ligne
   « N résultats + Filtres » n'existent que jusqu'à 900px : au-delà, la
   colonne reste en ligne, comme sur la maquette desktop. */
.damsearch-overlay .damsearch-filters-head,
.damsearch-overlay .damsearch-filters-actions,
.damsearch-overlay .damsearch-filters-scrim,
.damsearch-overlay .damsearch-results-toolbar,
/* Deux classes : la règle générale .damsearch-banner (plus bas) l'emporterait. */
.damsearch-overlay .damsearch-banner.damsearch-banner-intro { display: none; }

/* Effacer la saisie. */
.damsearch-overlay .damsearch-overlay-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0 -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ds-muted);
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.damsearch-overlay .damsearch-overlay-clear:hover { color: var(--ds-navy); background: #eef3f9; }

/* --- Onglets -------------------------------------------------------------- */
.damsearch-overlay .damsearch-results-wrap,
.damsearch-overlay .damsearch-results-body { width: 100%; min-width: 0; max-width: 100%; }
.damsearch-overlay .damsearch-overlay-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.damsearch-overlay .damsearch-overlay-tabs::-webkit-scrollbar { display: none; }
.damsearch-overlay .damsearch-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 38px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--ds-tab-text);
  background: var(--ds-tab);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.damsearch-overlay .damsearch-tab:hover { color: var(--ds-navy); }
.damsearch-overlay .damsearch-tab.active,
.damsearch-overlay .damsearch-tab[aria-selected="true"] { color: #fff; background: var(--ds-navy); }
.damsearch-overlay .damsearch-tab-count {
  margin: 0 0 0 4px;
  padding: 0;
  color: inherit;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.damsearch-overlay .damsearch-tab.active .damsearch-tab-count { font-weight: 700; }

/* --- Bandeau -------------------------------------------------------------- */
.damsearch-overlay .damsearch-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 136px;
  margin: 0 0 14px;
  padding: 20px 32px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  background: var(--ds-navy);
}
.damsearch-overlay .damsearch-banner-text { position: relative; z-index: 1; min-width: 0; max-width: 58%; }
.damsearch-overlay .damsearch-banner-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}
.damsearch-overlay .damsearch-banner-sub { margin: 0; color: #fff; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.4; opacity: 1; }
/* Le moteur déborde en haut et en bas, comme sur la maquette : le bandeau
   ne montre que sa moitié supérieure, plaque YANMAR au centre. */
.damsearch-overlay img.damsearch-banner-art {
  position: absolute;
  top: -24%;
  right: 0;
  bottom: auto;
  width: 41%;
  max-width: 460px;
  height: auto;
  margin: 0;
  opacity: 1;
  pointer-events: none;
}

/* --- Sections de résultats ------------------------------------------------ */
.damsearch-overlay .damsearch-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.damsearch-overlay .damsearch-results-section {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  background: #fff;
}
/* Barre d'accent au niveau du titre, à cheval sur le bord gauche. */
.damsearch-overlay .damsearch-results-section::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -4px;
  width: 6px;
  height: 46px;
  border-radius: 3px;
  background: var(--ds-navy);
}
.damsearch-overlay .damsearch-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 0 0 0 10px;
  border: 0;
}
.damsearch-overlay .damsearch-section-heading { display: flex; align-items: center; gap: 22px; min-width: 0; }
.damsearch-overlay .damsearch-section-headings { min-width: 0; }
.damsearch-overlay .damsearch-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--ds-navy);
  background: none;
  font-size: 34px;
}
.damsearch-overlay .damsearch-section-title {
  margin: 0;
  color: var(--ds-navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}
.damsearch-overlay .damsearch-section-count { display: none; }
.damsearch-overlay .damsearch-section-description { margin: 2px 0 0; color: var(--ds-muted); font-size: 15px; }
.damsearch-overlay .damsearch-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px 0 18px;
  border: 1.5px solid var(--ds-navy);
  border-radius: 999px;
  color: var(--ds-navy);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.damsearch-overlay .damsearch-view-all .damsearch-svg { font-size: 18px; }
.damsearch-overlay .damsearch-view-all:hover { color: #fff; background: var(--ds-navy); text-decoration: none; }

/* --- Grilles de cartes ---------------------------------------------------- */
/* Vue « Tous » : quatre cartes par section, sur toute la largeur. */
.damsearch-overlay .damsearch-results-section .damsearch-cards-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
/* Vue d'un seul onglet : autant de colonnes que la largeur en permet. */
.damsearch-overlay .damsearch-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
/* Produits populaires (avant la saisie) : rangée défilante. */
.damsearch-overlay .damsearch-section-popular .damsearch-cards-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 0 8px;
}
.damsearch-overlay .damsearch-section-popular .damsearch-card { flex: 0 0 210px; }

/* --- Carte ---------------------------------------------------------------- */
.damsearch-overlay .damsearch-card {
  display: flex;
  flex-direction: column;
  flex: none;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ds-card-line);
  border-radius: 6px;
  color: var(--ds-text);
  background: #fff;
  text-align: left;
  transform: none;
}
.damsearch-overlay .damsearch-card:hover { border-color: #c9d5e5; transform: none; }
.damsearch-overlay .damsearch-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.damsearch-overlay .damsearch-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 2.1 / 1;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--ds-thumb);
}
.damsearch-overlay .damsearch-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Les photos produit ont un fond blanc : le multiplier le rend transparent
     sur le gris de la vignette, comme sur la maquette. */
  mix-blend-mode: multiply;
}
.damsearch-overlay .damsearch-card-noimage { font-size: 32px; color: #b6c0cf; }
.damsearch-overlay .damsearch-card-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px 0;
  text-align: left;
}
.damsearch-overlay .damsearch-card-title {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 0 2px;
  overflow: visible;
  color: var(--ds-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
.damsearch-overlay .damsearch-card-products .damsearch-card-title { min-height: 2.5em; text-transform: uppercase; }
.damsearch-overlay .damsearch-card-title mark { padding: 0; color: inherit; background: none; font-weight: inherit; }
.damsearch-overlay .damsearch-card-sku,
.damsearch-overlay .damsearch-card-meta {
  margin: 0 0 10px;
  color: var(--ds-muted);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}
.damsearch-overlay .damsearch-card-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: auto 0 8px;
  padding: 0;
  text-align: left;
}
.damsearch-overlay .damsearch-card-price-ttc { color: #071a4f; font-size: 20px; font-weight: 700; line-height: 1.2; }
.damsearch-overlay .damsearch-card-price-ht { color: var(--ds-muted); font-size: 14px; font-weight: 400; }
.damsearch-overlay .damsearch-card-availability {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}
.damsearch-overlay .damsearch-card-availability-in_stock { color: var(--ds-green); }
.damsearch-overlay .damsearch-card-availability-on_order { color: var(--ds-orange); }
.damsearch-overlay .damsearch-card-availability-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.damsearch-overlay .damsearch-card-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 16px 16px;
}
.damsearch-overlay .damsearch-card-add-to-cart {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--ds-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.damsearch-overlay .damsearch-card-add-to-cart .damsearch-svg { font-size: 18px; }
.damsearch-overlay .damsearch-card-add-to-cart:hover { background: #021f4d; }
.damsearch-overlay .damsearch-card-add-to-cart:disabled { opacity: .55; cursor: default; }
.damsearch-overlay .damsearch-card-add-to-cart.is-error { background: #a12b23; }

/* Sélecteur de quantité : − [1] + */
.damsearch-overlay .damsearch-qty {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #cdd7e6;
  border-radius: 4px;
  background: #fff;
}
.damsearch-overlay .damsearch-qty-btn {
  width: 32px;
  min-height: 36px;
  padding: 0;
  border: 0;
  color: var(--ds-navy);
  background: #f2f5fa;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.damsearch-overlay .damsearch-qty-btn:hover { background: #e3eaf4; }
.damsearch-overlay .damsearch-qty-input {
  width: 38px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #e3e9f2;
  border-left: 1px solid #e3e9f2;
  color: var(--ds-ink);
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.damsearch-overlay .damsearch-qty-input::-webkit-outer-spin-button,
.damsearch-overlay .damsearch-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.damsearch-overlay .damsearch-cart-msg { flex: 1 1 100%; margin: 0; color: var(--ds-text); font-size: 12px; line-height: 1.35; }
.damsearch-overlay .damsearch-cart-msg.is-error { color: #a12b23; }

/* Vues éclatées : schéma sur fond blanc, lien d'action en bas. */
.damsearch-overlay .damsearch-card-exploded_views .damsearch-card-thumb { aspect-ratio: 1.75 / 1; background: #fff; }
.damsearch-overlay .damsearch-card-exploded_views .damsearch-card-thumb img { mix-blend-mode: normal; }
.damsearch-overlay .damsearch-card-exploded_views .damsearch-card-info { padding-top: 10px; }
.damsearch-overlay .damsearch-card-exploded_views .damsearch-card-meta,
.damsearch-overlay .damsearch-card-engines .damsearch-card-meta { margin-bottom: 6px; }
/* Moteurs : pas de photo disponible, donc pas de vignette (ni d'espace vide). */
.damsearch-overlay .damsearch-card-engines .damsearch-card-info { padding-top: 14px; }
.damsearch-overlay .damsearch-card-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 4px 0 14px;
  color: var(--ds-link);
  font-size: 14px;
  font-weight: 500;
}
.damsearch-overlay .damsearch-card-cta .damsearch-svg { font-size: 18px; }
.damsearch-overlay .damsearch-card-link:hover .damsearch-card-cta { text-decoration: underline; }

/* --- États hors résultats ------------------------------------------------- */
.damsearch-overlay .damsearch-overlay-section {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  background: #fff;
}
.damsearch-overlay .damsearch-recent-icon { display: inline-flex; font-size: 18px; color: var(--ds-muted); }
.damsearch-overlay .damsearch-overlay-empty {
  padding: 32px;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  background: #fff;
}
.damsearch-overlay .damsearch-overlay-footer { margin: 20px 0 0; padding: 0; border: 0; text-align: right; }
/* Même pilule que « Tout voir » : front.css lui donnait un fond marine, et la
   couleur de lien marine de l'overlay rendait alors le texte invisible. */
.damsearch-overlay .damsearch-overlay-seeall {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border: 1.5px solid var(--ds-navy);
  border-radius: 999px;
  color: var(--ds-navy);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.damsearch-overlay .damsearch-overlay-seeall:hover { color: #fff; background: var(--ds-navy); }

.damsearch-overlay :is(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--ds-navy); outline-offset: 2px; }
.damsearch-overlay .damsearch-overlay-input:focus-visible { outline: 0; }
.damsearch-overlay .damsearch-overlay-form:focus-within { border-color: var(--ds-navy); box-shadow: 0 0 0 3px rgba(3, 44, 108, .12); }

/* --- Adaptatif ------------------------------------------------------------ */
@media (max-width: 1199px) {
  .damsearch-overlay .damsearch-overlay-panel { padding: 16px 24px 32px; }
  .damsearch-overlay .damsearch-overlay-topbar,
  .damsearch-overlay .damsearch-overlay-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .damsearch-overlay .damsearch-overlay-topbar { grid-template-columns: 240px minmax(0, 1fr) auto; }
  .damsearch-overlay .damsearch-overlay-sidebar { padding: 16px 20px 16px 26px; }
  .damsearch-overlay .damsearch-sidebar-toggle::before { left: -15px; }
  /* Quatre colonnes deviendraient trop étroites : la rangée défile. */
  .damsearch-overlay .damsearch-results-section .damsearch-cards-row {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .damsearch-overlay .damsearch-results-section .damsearch-card { flex: 0 0 210px; scroll-snap-align: start; }
}
/*
 * Jusqu'à 900px : une seule colonne, pleine largeur.
 *   1. logo + fermer (défile hors de l'écran)
 *   2. champ de recherche (reste en haut au défilement)
 *   3. moteur sélectionné, 4. onglets, 5. N résultats + Filtres, 6. résultats
 * Les filtres passent dans un panneau qui monte du bas de l'écran.
 */
@media (max-width: 900px) {
  .damsearch-overlay .damsearch-overlay-panel {
    max-width: none;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Une seule bande collante : son top négatif laisse partir la ligne du logo
     et garde le champ de recherche en haut de l'écran. */
  .damsearch-overlay .damsearch-overlay-topbar {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) - max(8px, env(safe-area-inset-top, 0px)) - 52px);
    z-index: 20;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px auto;
    grid-template-areas: "logo actions" "form form";
    row-gap: 8px;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--ds-line);
    background: var(--ds-page);
  }
  .damsearch-overlay .damsearch-overlay-logo { grid-area: logo; }
  .damsearch-overlay .damsearch-overlay-logo img { width: auto; max-width: 96px; max-height: 34px; }
  .damsearch-overlay .damsearch-overlay-form { grid-area: form; height: 48px; padding: 0 12px 0 14px; }
  /* 17px : sous 16px, iOS zoome sur le champ au focus. */
  .damsearch-overlay .damsearch-overlay-input { font-size: 17px; }
  .damsearch-overlay .damsearch-overlay-clear { width: 44px; height: 44px; margin-right: -8px; }
  .damsearch-overlay .damsearch-overlay-topbar-right { grid-area: actions; margin-left: 0; }
  .damsearch-overlay .damsearch-overlay-close { width: 44px; height: 44px; }

  .damsearch-overlay .damsearch-overlay-layout {
    display: block;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  }
  .damsearch-overlay .damsearch-overlay-body { grid-column: auto; }

  /* --- Panneau de filtres (bas de l'écran) --- */
  .damsearch-overlay.damsearch-sheet-open { overflow: hidden; }
  .damsearch-overlay .damsearch-overlay-sidebar {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(88vh, calc(var(--ds-vvh, 100vh) - 40px));
    max-height: min(88dvh, calc(var(--ds-vvh, 100dvh) - 40px));
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -10px 30px rgba(3, 20, 60, .18);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .damsearch-overlay .damsearch-filters-visible .damsearch-overlay-sidebar {
    transform: none;
    visibility: visible;
    transition: transform .22s ease;
  }
  .damsearch-overlay .damsearch-filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(5, 18, 45, .45);
  }
  .damsearch-overlay .damsearch-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px max(18px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--ds-line);
  }
  .damsearch-overlay .damsearch-filters-head-title { color: var(--ds-navy); font-size: 17px; font-weight: 700; }
  .damsearch-overlay .damsearch-filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ds-navy);
    background: #eef3f9;
    font-size: 20px;
    cursor: pointer;
  }
  .damsearch-overlay .damsearch-filters-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px max(18px, env(safe-area-inset-right, 0px)) 16px max(24px, env(safe-area-inset-left, 0px));
  }
  .damsearch-overlay .damsearch-filters-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--ds-line);
    background: #fff;
  }
  .damsearch-overlay .damsearch-filters-reset,
  .damsearch-overlay .damsearch-filters-apply {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .damsearch-overlay .damsearch-filters-reset { flex: 0 0 auto; border: 1.5px solid var(--ds-navy); color: var(--ds-navy); background: #fff; }
  .damsearch-overlay .damsearch-filters-apply { flex: 1 1 auto; border: 0; color: #fff; background: var(--ds-navy); }

  /* Groupes du panneau : cibles tactiles de 44px, sélection visible. */
  .damsearch-overlay .damsearch-sidebar-toggle { min-height: 48px; }
  .damsearch-overlay .damsearch-sidebar-item { align-items: center; min-height: 44px; padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); border-radius: 8px; font-weight: 600; }
  .damsearch-overlay .damsearch-sidebar-item.active { background: #e6eef8; }
  .damsearch-overlay .damsearch-sidebar-item.active .damsearch-sidebar-name { color: var(--ds-navy); text-decoration: none; }
  .damsearch-overlay .damsearch-sidebar-item.active .damsearch-sidebar-count { color: var(--ds-navy); font-weight: 600; }
  .damsearch-overlay .damsearch-sidebar-item.active::after {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032c6c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }
  .damsearch-overlay .damsearch-availability-checkbox { width: 20px; height: 20px; }
  .damsearch-overlay .damsearch-sidebar-more { min-height: 44px; }
  .damsearch-overlay .damsearch-price-track-wrap { height: 36px; }

  /* --- Onglets, ligne « N résultats + Filtres », pastilles, résultats --- */
  .damsearch-overlay .damsearch-results-wrap { display: flex; flex-direction: column; }
  .damsearch-overlay .damsearch-overlay-tabs {
    order: 1;
    gap: 8px;
    width: auto;
    margin: 0 calc(-1 * max(12px, env(safe-area-inset-right, 0px))) 8px calc(-1 * max(12px, env(safe-area-inset-left, 0px)));
    padding: 0 max(12px, env(safe-area-inset-right, 0px)) 2px max(12px, env(safe-area-inset-left, 0px));
    scroll-padding: 0 12px;
    scroll-snap-type: x proximity;
  }
  .damsearch-overlay .damsearch-tab { height: 44px; padding: 0 16px; scroll-snap-align: start; }
  .damsearch-overlay .damsearch-results-toolbar {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 10px;
  }
  .damsearch-overlay .damsearch-results-count { margin: 0; color: var(--ds-text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .damsearch-overlay .damsearch-is-refreshing .damsearch-results-count::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    vertical-align: -1px;
    border: 2px solid #c9d5e5;
    border-top-color: var(--ds-navy);
    border-radius: 50%;
    animation: damsearch-spin .8s linear infinite;
  }
  .damsearch-overlay .damsearch-filters-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--ds-navy);
    border-radius: 999px;
    color: var(--ds-navy);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .damsearch-overlay .damsearch-filters-open .damsearch-svg { font-size: 18px; }
  .damsearch-overlay .damsearch-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    color: #fff;
    background: var(--ds-navy);
    font-size: 12px;
    font-weight: 700;
  }
  .damsearch-overlay .damsearch-active-filters { order: 3; margin: 0 0 10px; }
  .damsearch-overlay .damsearch-banner.damsearch-banner-results { display: none; }
  .damsearch-overlay .damsearch-results-body { order: 4; }

  /* Bandeau de présentation : à l'ouverture seulement, compact. */
  .damsearch-overlay .damsearch-banner.damsearch-banner-intro { display: flex; min-height: 0; margin: 0 0 12px; padding: 14px 16px; }
  .damsearch-overlay .damsearch-banner-intro .damsearch-banner-text { max-width: none; }
  .damsearch-overlay .damsearch-banner-intro .damsearch-banner-title { margin-bottom: 4px; font-size: 18px; }
  .damsearch-overlay .damsearch-banner-intro .damsearch-banner-sub { font-size: 14px; }
  .damsearch-overlay.damsearch-has-query .damsearch-banner.damsearch-banner-intro { display: none; }

  .damsearch-overlay .damsearch-overlay-footer { margin: 16px 0 0; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); text-align: center; }
  .damsearch-overlay .damsearch-overlay-seeall { justify-content: center; width: 100%; height: auto; min-height: 48px; }
}
@media (max-width: 639px) {
  .damsearch-overlay img.damsearch-banner-art { display: none; }
  .damsearch-overlay .damsearch-overlay-section { padding: 12px; }
  .damsearch-overlay .damsearch-results-section { padding: 10px 12px 2px; }
  .damsearch-overlay .damsearch-results-section::before { top: 12px; height: 32px; }
  .damsearch-overlay .damsearch-section-header { gap: 8px; margin-bottom: 4px; padding-left: 4px; }
  .damsearch-overlay .damsearch-section-heading { gap: 10px; }
  .damsearch-overlay .damsearch-section-icon { font-size: 22px; }
  .damsearch-overlay .damsearch-section-title { font-size: 17px; }
  .damsearch-overlay .damsearch-section-description { font-size: 13px; }
  .damsearch-overlay .damsearch-view-all { height: auto; min-height: 44px; padding: 0 12px 0 14px; font-size: 13px; }

  /* Résultats en liste : photo à gauche, texte à droite, panier au bout. */
  .damsearch-overlay .damsearch-results-section .damsearch-cards-row,
  .damsearch-overlay .damsearch-results-body .damsearch-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-cards-grid {
    padding: 2px 12px;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    background: #fff;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex: none;
    gap: 8px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--ds-card-line);
    border-radius: 0;
    overflow: visible;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card:last-child { border-bottom: 0; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-link { flex-direction: row; align-items: flex-start; gap: 12px; min-height: 44px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    aspect-ratio: auto;
    padding: 4px;
    border-radius: 6px;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card-info { padding: 0; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-title,
  .damsearch-overlay .damsearch-results-body .damsearch-card-products .damsearch-card-title {
    display: -webkit-box;
    min-height: 0;
    margin: 0 0 2px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card-sku {
    margin: 0 0 4px;
    color: #2b3a57;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card-meta { margin: 0 0 4px; font-size: 13px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-compat { margin: 0 0 4px; font-size: 12px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-prices {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0 0 2px;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card-price-ttc { font-size: 16px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-price-ht { font-size: 12px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-price-regular { flex-basis: 100%; font-size: 12px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-availability { margin: 0; font-size: 13px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-cta { padding: 2px 0 0; font-size: 13px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-engines .damsearch-card-info { padding: 0; }
  /* Achat : quantité + panier sur une ligne sous le texte, à droite. */
  .damsearch-overlay .damsearch-results-body .damsearch-card { flex-wrap: wrap; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-link { flex: 1 1 100%; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-buy { flex: 1 1 100%; justify-content: flex-end; gap: 8px; margin: 6px 0 0; }
  .damsearch-overlay .damsearch-results-body .damsearch-cart-msg { text-align: right; }
  .damsearch-overlay .damsearch-results-body .damsearch-qty-btn { width: 44px; min-height: 44px; }
  .damsearch-overlay .damsearch-results-body .damsearch-qty-input { width: 44px; font-size: 16px; }
  /* Panier : icône seule, 44x44 ; le libellé reste pour les lecteurs d'écran. */
  .damsearch-overlay .damsearch-results-body .damsearch-card-add-to-cart {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    font-size: 20px;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card-add-to-cart .damsearch-svg { font-size: 20px; }
  .damsearch-overlay .damsearch-results-body .damsearch-card-add-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .damsearch-overlay .damsearch-results-body .damsearch-card-add-to-cart.is-done { background: var(--ds-green); }

  /* Produits populaires (avant saisie) : rangée défilante, cartes étroites. */
  .damsearch-overlay .damsearch-section-popular .damsearch-card { flex: 0 0 150px; }
  .damsearch-overlay .damsearch-section-popular .damsearch-card-info { padding: 10px 10px 0; }
  .damsearch-overlay .damsearch-section-popular .damsearch-card-buy { margin: 0 10px 10px; }
  .damsearch-overlay .damsearch-section-popular .damsearch-card-add-to-cart { gap: 6px; font-size: 13px; }
  .damsearch-overlay .damsearch-section-popular .damsearch-card-price-ttc { font-size: 16px; }

  /* Pastilles de filtres actifs : zone tactile élargie autour de la croix. */
  .damsearch-overlay .damsearch-chip { min-height: 36px; }
  .damsearch-overlay .damsearch-chip-clear { position: relative; width: 32px; height: 32px; }
  .damsearch-overlay .damsearch-chip-clear::after { content: ''; position: absolute; inset: -6px; }

  .damsearch-overlay .damsearch-engine-notice { padding: 12px 14px; }
  .damsearch-overlay .damsearch-engine-notice-btn { justify-content: center; width: 100%; min-height: 44px; }
}

/* Très petits écrans (320px) : les deux actions du panneau sur une ligne. */
@media (max-width: 359px) {
  .damsearch-overlay .damsearch-filters-actions { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .damsearch-overlay .damsearch-filters-reset { padding: 0 12px; font-size: 14px; }
  .damsearch-overlay .damsearch-filters-apply { padding: 0 10px; font-size: 14px; white-space: nowrap; }
  .damsearch-overlay .damsearch-tab { padding: 0 14px; }
}

/* Retour à l'ancienne recherche (option du back-office). */
.damsearch-overlay .damsearch-classic {
  margin: 24px 0 0;
  padding: 0 16px;
  color: var(--ds-muted);
  font-size: 13px;
  text-align: center;
}
.damsearch-overlay .damsearch-classic-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  color: var(--ds-link);
  background: none;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* États de la recherche : chargement, aucun résultat, erreur technique. */
.damsearch-overlay .damsearch-overlay-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  color: var(--ds-text);
  background: #fff;
  text-align: center;
}
.damsearch-overlay .damsearch-overlay-loading { flex-direction: row; justify-content: center; gap: 10px; color: var(--ds-muted); }
.damsearch-overlay .damsearch-state-title { margin: 0; color: var(--ds-ink); font-size: 16px; font-weight: 700; line-height: 1.35; }
.damsearch-overlay .damsearch-state-text { max-width: 520px; margin: 0; color: var(--ds-muted); font-size: 14px; line-height: 1.45; }
.damsearch-overlay .damsearch-state-note { font-size: 13px; }
.damsearch-overlay .damsearch-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--ds-navy);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.damsearch-overlay .damsearch-state-btn:hover { background: #021f4d; }
.damsearch-overlay .damsearch-state-btn-secondary { border: 1.5px solid var(--ds-navy); color: var(--ds-navy); background: #fff; }
.damsearch-overlay .damsearch-state-btn-secondary:hover { color: #fff; background: var(--ds-navy); }
.damsearch-overlay .damsearch-overlay-error { border-color: #f0c7c2; background: #fff7f6; }
.damsearch-overlay .damsearch-overlay-error .damsearch-state-title { color: #a12b23; }
.damsearch-overlay .damsearch-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #d6e0ee;
  border-top-color: var(--ds-navy);
  border-radius: 50%;
  animation: damsearch-spin .8s linear infinite;
}
@keyframes damsearch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .damsearch-overlay .damsearch-spinner,
  .damsearch-overlay .damsearch-is-refreshing .damsearch-results-count::after { animation: none; }
  .damsearch-overlay .damsearch-overlay-sidebar,
  .damsearch-overlay .damsearch-filters-visible .damsearch-overlay-sidebar { transition: none; }
}

/* Rechargement après un filtre : les résultats restent visibles, atténués,
   jusqu'à l'arrivée des résultats filtrés. */
.damsearch-overlay .damsearch-results-body { transition: opacity .15s ease; }
.damsearch-overlay .damsearch-is-refreshing .damsearch-results-body { opacity: .5; pointer-events: none; }
.damsearch-overlay .damsearch-sidebar-none { padding: 6px 0; color: var(--ds-muted); font-size: 13px; }

/* Moteur du garage : pièces compatibles, et sortie quand il restreint trop. */
.damsearch-overlay .damsearch-card-compat { margin: 0 0 8px; color: var(--ds-green); font-size: 13px; font-weight: 600; }
.damsearch-overlay .damsearch-engine-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid #f0d9a8;
  border-left: 4px solid var(--ds-orange);
  border-radius: 10px;
  background: #fff8ea;
}
.damsearch-overlay .damsearch-engine-notice p { flex: 1 1 320px; margin: 0; color: var(--ds-text); font-size: 14px; }
.damsearch-overlay .damsearch-engine-notice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: var(--ds-navy);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.damsearch-overlay .damsearch-engine-notice-btn .damsearch-svg { font-size: 18px; }
.damsearch-overlay .damsearch-engine-notice-btn:hover { background: #021f4d; }

/* Promotion : ancien prix barré et remise au-dessus du prix payé. */
.damsearch-overlay .damsearch-card-price-regular { display: flex; align-items: center; gap: 8px; color: var(--ds-muted); font-size: 13px; }
.damsearch-overlay .damsearch-card-discount {
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  background: #c0392b;
  font-size: 12px;
  font-weight: 700;
}
.damsearch-overlay .damsearch-card-prices-promo .damsearch-card-price-ttc { color: #c0392b; }