/* ==========================================================================
   Recherche Brico-Phone — widget de recherche (overlay + page de résultats)
   Rendu conforme à la maquette « Module de recherche Prestashop ».
   Toutes les couleurs passent par des variables alimentées par la
   configuration du Hub : la personnalisation ne demande aucune mise à jour
   du module installé sur la boutique.
   ========================================================================== */

.bps-root {
  --bps-accent: #0FA5A9;
  --bps-accent-hover: #0B8285;
  --bps-border-accent: #2FC4C4;
  --bps-cta: #EE7A0F;
  --bps-cta-hover: #D96A05;
  --bps-banner: #103A5C;
  --bps-text: #16232D;
  --bps-text-soft: #64727C;
  --bps-muted: #8A96A0;
  --bps-muted-2: #98A4AD;
  --bps-line: #E8EBEE;
  --bps-line-2: #DCE1E5;
  --bps-surface: #FFFFFF;
  --bps-surface-2: #FAFBFC;
  --bps-thumb-bg: #F2F4F6;
  --bps-radius: 14px;
  --bps-star: #F5A524;
  --bps-ok: #11835A;      --bps-ok-bg: #E7F5EE;
  --bps-low: #A96A05;     --bps-low-bg: #FDF1DF;
  --bps-out: #C0392B;     --bps-out-bg: #FCEAE7;
  --bps-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.bps-root, .bps-root * { box-sizing: border-box; }

/* Champ injecté quand le thème n'expose pas d'input (cf. mountSelector).
   On hérite volontairement de la typographie du conteneur pour se fondre dans
   l'en-tête de la boutique. Le `!important` est nécessaire : le JS du thème
   remet un `display` en ligne sur le libellé d'origine. */
.bps-mounted-host { display: none !important; }
.bps-mounted-input {
  width: 100%; border: 0; outline: 0; background: none;
  font: inherit; color: inherit; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.bps-mounted-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Voile ---------------------------------------------------------- */
.bps-scrim {
  position: fixed; inset: 0; background: rgba(16, 36, 52, .42);
  z-index: 99998; opacity: 0; transition: opacity .16s ease;
}
.bps-scrim.bps-on { opacity: 1; }

/* --- Panneau overlay ------------------------------------------------ */
.bps-overlay {
  position: fixed; z-index: 99999; background: var(--bps-surface);
  border-radius: 18px; box-shadow: 0 30px 70px rgba(10, 32, 48, .28);
  overflow: hidden; display: flex; flex-direction: column;
  font-family: var(--bps-font); color: var(--bps-text);
  max-height: min(78vh, 900px);
  opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease;
}
.bps-overlay.bps-on { opacity: 1; transform: none; }

.bps-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px; border-bottom: 1px solid #EDEFF1; flex: 0 0 auto;
}
.bps-count { display: flex; align-items: baseline; gap: 8px; }
.bps-count b { font-size: 20px; font-weight: 800; color: var(--bps-text); }
.bps-count span { font-size: 15px; color: #7A8792; }

.bps-sort {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #4A5860; cursor: pointer;
  background: none; border: 0; font-family: inherit;
}
.bps-sort b { font-weight: 700; color: var(--bps-text); }
.bps-sort select {
  font: inherit; font-weight: 700; color: var(--bps-text);
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
}

.bps-body { overflow-y: auto; flex: 1 1 auto; }

/* --- Bannière catégorie --------------------------------------------- */
.bps-banner {
  background: var(--bps-banner); padding: 22px 24px;
  display: flex; align-items: center; gap: 22px; color: #fff;
}
.bps-banner-thumb {
  width: 96px; height: 96px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bps-banner-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bps-banner-thumb .bps-ph { width: 40px; height: 62px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 6px; }
.bps-banner-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bps-banner-kicker {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #7FD9DA;
}
.bps-banner-kicker .bps-crumb { color: #A9BDCD; text-transform: none; letter-spacing: .02em; font-weight: 600; }
.bps-banner-kicker a.bps-crumb { text-decoration: none; }
.bps-banner-kicker a.bps-crumb:hover { color: #fff; text-decoration: underline; }
.bps-banner-title { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.bps-banner-desc {
  font-size: 15px; color: #C2D2DE; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bps-banner-cta {
  margin-left: auto; flex-shrink: 0; height: 48px; padding: 0 22px; border-radius: 10px;
  background: var(--bps-cta); color: #fff; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.bps-banner-cta:hover { background: var(--bps-cta-hover); color: #fff; }

/* --- Puces « Affiner par catégorie » -------------------------------- */
.bps-chips-wrap { padding: 16px 24px 4px; display: flex; flex-direction: column; gap: 10px; }
.bps-chips-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bps-muted);
}
.bps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bps-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--bps-line-2); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 600; color: #23303A; cursor: pointer;
  font-family: inherit;
}
.bps-chip:hover { border-color: var(--bps-border-accent); background: #F0FCFC; color: var(--bps-accent-hover); }
.bps-chip b { font-size: 13px; font-weight: 700; color: var(--bps-muted-2); }

/* --- Barre de filtres ------------------------------------------------ */
.bps-filters {
  display: flex; align-items: center; gap: 8px; padding: 14px 24px;
  border-bottom: 1px solid #EDEFF1; background: var(--bps-surface-2);
  flex-wrap: wrap;
}
.bps-pill {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--bps-line-2); background: #fff;
  color: #3C4A54; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.bps-pill:hover { border-color: var(--bps-border-accent); color: var(--bps-accent-hover); }
.bps-pill.bps-active { background: var(--bps-accent); border-color: var(--bps-accent); color: #fff; font-weight: 700; }
.bps-pill-select select {
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  padding: 0; margin: 0; max-width: 240px;
}
/* Le menu déroulant natif ne suit pas le thème du bouton : sans ça, une
   fois la puce active (texte blanc sur fond vert), les options de la liste
   héritaient ce même blanc sur un fond blanc — illisible. */
.bps-pill-select select option {
  color: var(--bps-text, #16232D); background: var(--bps-surface, #fff); font-weight: 400;
}
.bps-pill-chip { cursor: default; }
.bps-pill-remove {
  border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
  line-height: 1; font-size: 17px; padding: 0; margin: 0 -4px 0 2px; opacity: .85;
}
.bps-pill-remove:hover { opacity: 1; }
.bps-filters .bps-sort { margin-left: auto; }

/* --- Liste de résultats ---------------------------------------------- */
.bps-list { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 10px; }

.bps-item {
  display: grid; grid-template-columns: 78px 1fr 210px; gap: 20px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--bps-line); border-radius: var(--bps-radius);
  background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
}
.bps-item:hover { border-color: var(--bps-border-accent); box-shadow: 0 8px 22px rgba(16, 58, 92, .09); }

.bps-thumb {
  width: 78px; height: 78px; border-radius: 11px; background: var(--bps-thumb-bg);
  border: 1px solid var(--bps-line); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bps-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bps-thumb .bps-ph { width: 34px; height: 50px; border: 2px solid #C6CDD3; border-radius: 5px; }

.bps-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bps-cat {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bps-muted-2);
}
.bps-title {
  font-size: 17px; font-weight: 700; color: var(--bps-accent); line-height: 1.3;
  text-decoration: none;
}
.bps-title:hover { color: var(--bps-accent-hover); text-decoration: underline; }
.bps-desc {
  font-size: 14px; color: var(--bps-text-soft); line-height: 1.45; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.bps-rating { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.bps-rating svg { flex: 0 0 auto; }
.bps-rating b { font-size: 14px; font-weight: 700; color: #23303A; }
.bps-rating span { font-size: 13px; color: var(--bps-muted); }

.bps-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.bps-price { font-size: 22px; font-weight: 800; color: var(--bps-text); letter-spacing: -.02em; }
.bps-price s { font-size: 14px; font-weight: 600; color: var(--bps-muted); margin-right: 6px; }

.bps-stock {
  display: flex; align-items: center; gap: 7px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; padding: 5px 11px;
}
.bps-stock i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bps-stock.bps-ok { color: var(--bps-ok); background: var(--bps-ok-bg); }
.bps-stock.bps-low { color: var(--bps-low); background: var(--bps-low-bg); }
.bps-stock.bps-out { color: var(--bps-out); background: var(--bps-out-bg); }
/* Variante « Texte » (réglage stockEmphasis) */
.bps-root[data-stock="text"] .bps-stock { background: transparent; padding: 2px 0; }

/* Deux actions côte à côte : picto panier + « Voir le produit ». */
.bps-actions { display: flex; align-items: stretch; gap: 8px; width: 100%; }

.bps-cta {
  height: 42px; border-radius: 10px; background: var(--bps-cta);
  border: 1.5px solid var(--bps-cta); color: #fff; font-size: 14.5px; font-weight: 800;
  letter-spacing: .02em; display: flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; text-decoration: none; font-family: inherit;
  flex: 1 1 auto; min-width: 0;
}
/* Bouton carré : uniquement le picto, libellé porté par title/aria-label. */
.bps-cta-icon {
  flex: 0 0 46px; width: 46px; padding: 0;
  transition: background .16s ease, border-color .16s ease;
}
.bps-cta-icon svg { display: block; }
.bps-cta:hover { filter: brightness(.95); color: #fff; }
.bps-cta.bps-added { background: var(--bps-ok); border-color: var(--bps-ok); }
.bps-cta.bps-ghost {
  background: #fff; border-color: var(--bps-line-2); color: #4A5860;
  font-size: 14px; font-weight: 700;
}
.bps-cta.bps-ghost:hover { color: var(--bps-text); border-color: var(--bps-border-accent); }

/* --- Pied de l'overlay ----------------------------------------------- */
.bps-foot {
  border-top: 1px solid #EDEFF1; padding: 16px 24px; display: flex;
  align-items: center; justify-content: center; background: var(--bps-surface-2);
  flex: 0 0 auto;
}
.bps-foot a {
  display: flex; align-items: center; gap: 10px; font-size: 15.5px;
  font-weight: 800; color: var(--bps-text); text-decoration: none;
}
.bps-foot a:hover { color: var(--bps-accent-hover); }

/* --- Entonnoir d'affinage (requête trop large) ------------------------- */
.bps-refine { padding: 20px 24px 24px; }
.bps-refine-title { font-size: 17px; font-weight: 800; color: var(--bps-text); }
.bps-refine-hint { font-size: 14px; color: var(--bps-text-soft); margin: 4px 0 16px; }
.bps-refine-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 8px;
}
.bps-refine-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--bps-line-2); border-radius: 12px;
  background: #fff; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .16s ease, background .16s ease;
}
.bps-refine-chip:hover { border-color: var(--bps-border-accent); background: #F0FCFC; }
.bps-refine-label { font-size: 14.5px; font-weight: 700; color: var(--bps-text); }
.bps-refine-count {
  font-size: 12.5px; font-weight: 700; color: var(--bps-muted-2);
  background: var(--bps-thumb-bg); border-radius: 999px; padding: 2px 9px; flex: 0 0 auto;
}
.bps-refine-all {
  display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700;
  color: var(--bps-accent); text-decoration: none;
}
.bps-refine-all:hover { color: var(--bps-accent-hover); text-decoration: underline; }
@media (max-width: 760px) {
  .bps-refine { padding: 16px; }
  .bps-refine-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .bps-refine-chip { padding: 10px 11px; }
  .bps-refine-label { font-size: 13.5px; }
}

/* --- États ------------------------------------------------------------ */
.bps-empty { padding: 44px 24px; text-align: center; color: var(--bps-text-soft); }
.bps-empty b { display: block; font-size: 17px; font-weight: 700; color: var(--bps-text); margin-bottom: 6px; }
.bps-identify-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: -20px 24px 32px; padding: 14px 18px; border-radius: var(--bps-radius);
  background: var(--bps-banner); border: 1px dashed var(--bps-line-2);
  color: #fff; font-size: 16px; font-weight: 600;
  text-decoration: none; transition: border-color .16s ease, color .16s ease;
}
.bps-identify-hint:hover { color: #fff; background: #1c496d; }
.bps-identify-hint svg { flex-shrink: 0; }
.bps-corrected { padding: 12px 24px 0; font-size: 14px; color: var(--bps-text-soft); }
.bps-corrected b { color: var(--bps-text); }
.bps-skel { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.bps-skel-row {
  height: 108px; border-radius: var(--bps-radius); border: 1px solid var(--bps-line);
  background: linear-gradient(90deg, #F4F5F6 25%, #EDEFF1 37%, #F4F5F6 63%);
  background-size: 400% 100%; animation: bps-shine 1.2s ease infinite;
}
@keyframes bps-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --- Page de résultats ------------------------------------------------ */
.bps-page { font-family: var(--bps-font); color: var(--bps-text); }
.bps-page .bps-crumbs {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: #7A8792; font-weight: 600; margin-bottom: 20px; flex-wrap: wrap;
}
.bps-page .bps-crumbs a { color: inherit; text-decoration: none; }
.bps-page .bps-crumbs .bps-cur { color: #23303A; }
.bps-page .bps-banner { border-radius: 16px; padding: 28px 30px; gap: 26px; margin-bottom: 20px; }
.bps-page .bps-banner-thumb { width: 128px; height: 128px; border-radius: 16px; }
.bps-page .bps-banner-title { font-size: 34px; letter-spacing: -.03em; line-height: 1.05; }
.bps-page .bps-banner-desc { font-size: 16px; line-height: 1.5; max-width: 660px; -webkit-line-clamp: 3; }
.bps-page .bps-banner-cta { height: 52px; padding: 0 24px; font-size: 16px; border-radius: 11px; }

.bps-page .bps-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff;
  border: 1px solid var(--bps-line); border-radius: var(--bps-radius);
  position: sticky; top: 0; z-index: 20; margin-bottom: 20px; flex-wrap: wrap;
}
.bps-page .bps-toolbar .bps-total { font-size: 16px; font-weight: 800; margin-right: 6px; }
.bps-page .bps-list { padding: 0; gap: 12px; }
.bps-page .bps-item { grid-template-columns: 104px 1fr 260px; gap: 24px; padding: 18px 20px; border-radius: 16px; }
.bps-page .bps-thumb { width: 104px; height: 104px; border-radius: 12px; }
.bps-page .bps-title { font-size: 19px; }
.bps-page .bps-desc { font-size: 14.5px; -webkit-line-clamp: 2; }
.bps-page .bps-price { font-size: 25px; }
.bps-page .bps-cta { height: 46px; border-radius: 11px; font-size: 15px; }
.bps-page .bps-cta-icon { flex: 0 0 50px; width: 50px; }

.bps-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 20px; }
.bps-pager button {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--bps-line-2);
  background: #fff; color: #3C4A54; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.bps-pager button.bps-active { background: var(--bps-accent); border-color: var(--bps-accent); color: #fff; font-weight: 800; }
.bps-pager button[disabled] { opacity: .4; cursor: default; }

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 760px) {
  .bps-overlay {
    position: fixed !important; inset: 0 !important; width: auto !important;
    max-height: none; border-radius: 0;
  }
  .bps-mobile-search {
    display: flex; align-items: center; gap: 12px; padding: 8px 16px 14px;
    border-bottom: 1px solid #EAEDEF; background: #fff;
  }
  .bps-mobile-search .bps-mfield {
    flex: 1; height: 44px; background: #F4F5F6; border: 1.5px solid var(--bps-border-accent);
    border-radius: 10px; display: flex; align-items: center; padding: 0 13px; gap: 10px;
    font-size: 15px; font-weight: 600;
  }
  .bps-mobile-search .bps-mfield input {
    flex: 1; border: 0; background: none; font: inherit; color: inherit; outline: none;
  }
  .bps-mobile-search .bps-cancel {
    font-size: 15px; font-weight: 700; color: var(--bps-accent);
    background: none; border: 0; cursor: pointer; font-family: inherit;
  }
  .bps-head { padding: 12px 16px 8px; }
  .bps-count b { font-size: 15px; }
  .bps-count-query { display: none; }
  /* .bps-banner-txt et .bps-banner-cta sont deux éléments frères de
     .bps-banner-thumb (pas imbriqués) : en flex simple, impossible de les
     empiler ensemble à droite de l'image sans que l'un des deux se retrouve
     mal placé. La grille fixe l'image sur une colonne qui couvre les deux
     lignes, texte et CTA occupant la seconde colonne, chacun sa ligne. */
  .bps-banner {
    display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto;
    align-items: start; padding: 16px; column-gap: 14px; row-gap: 6px;
  }
  .bps-banner-thumb { width: 60px; height: 60px; border-radius: 11px; grid-column: 1; grid-row: 1 / 3; }
  .bps-banner-txt { grid-column: 2; grid-row: 1; }
  .bps-banner-title { font-size: 16px; }
  .bps-banner-desc { display: none; }
  .bps-banner-cta {
    grid-column: 2; grid-row: 2;
    margin-left: 0; height: auto; padding: 0; background: none; color: #FFB35C;
    font-size: 13.5px; font-weight: 700;
  }
  .bps-banner-cta:hover { background: none; color: #FFC98A; }
  .bps-filters { padding: 10px 16px 10px; gap: 7px; flex-wrap: nowrap; overflow-x: auto; border-bottom: 0; background: none; }
  .bps-filters::-webkit-scrollbar { display: none; }
  .bps-pill { flex-shrink: 0; height: 32px; font-size: 13px; padding: 0 12px; }
  .bps-filters .bps-sort { margin-left: 0; flex-shrink: 0; }
  .bps-list, .bps-chips-wrap { padding: 4px 16px 16px; }

  .bps-item, .bps-page .bps-item {
    grid-template-columns: 62px 1fr; gap: 13px; padding: 12px; border-radius: 13px; align-items: start;
  }
  .bps-thumb, .bps-page .bps-thumb { width: 62px; height: 62px; border-radius: 9px; }
  .bps-title, .bps-page .bps-title { font-size: 14.5px; }
  .bps-desc { display: none; }
  .bps-cat { font-size: 10.5px; }
  .bps-right {
    grid-column: 2; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 3px;
  }
  .bps-price-line { display: flex; align-items: center; justify-content: space-between; }
  .bps-price, .bps-page .bps-price { font-size: 18px; }
  .bps-stock { font-size: 12.5px; padding: 4px 9px; }
  .bps-cta, .bps-page .bps-cta { height: 40px; font-size: 13.5px; }
  .bps-cta-icon { flex: 0 0 42px; width: 42px; }
  .bps-page .bps-banner-title { font-size: 22px; }
  .bps-page .bps-toolbar { padding: 10px 12px; }
}

/* Fil d'ariane de l'entonnoir (requête large : marque › gamme › modèle) */
.bps-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 14px; font-size: 13px; }
.bps-trail-item { background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font: inherit; color: var(--bps-accent); border-radius: 6px; }
.bps-trail-item:hover { background: var(--bps-accent-soft, #E8F7F7); }
.bps-trail-item.is-current { color: var(--bps-text, #16232D); font-weight: 700; cursor: default; }
.bps-trail-sep { color: var(--bps-muted, #98A4AD); }

/* Écran de recherche ouvert à vide (tap sur l'icône de l'en-tête mobile) */
.bps-blank { padding: 28px 22px 34px; text-align: center; }
.bps-blank-title { font-size: 17px; font-weight: 700; color: var(--bps-text, #16232D); }
.bps-blank-hint { margin-top: 6px; font-size: 14px; color: var(--bps-muted, #8A96A0); }

/* Disponibilité chez le fournisseur, quand le produit est épuisé chez nous */
.bps-restock { font-size: 12px; color: var(--bps-muted, #8A96A0); white-space: nowrap; }

/* Stock puis, en dessous et plus discrète, la date d'expédition. */
.bps-stock-block { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.bps-ship { font-size: 11.5px; font-weight: 600; color: var(--bps-muted, #8A96A0); text-align: right; line-height: 1.3; }
.bps-price { white-space: nowrap; }
.bps-stock i { flex: 0 0 8px; }

/* Fil d'ariane de la page de résultats : chaque niveau mène à sa catégorie. */
.bps-crumb-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.bps-crumb-link:hover { color: var(--bps-accent); border-bottom-color: currentColor; }