/* Empêche le scroll derrière la modale */
html.xv-distrib-open { overflow: hidden; }

/* Modale */
.xv-distrib-modal {
  position: fixed; inset: 0; z-index: 9999; top:100px;
}

#wpsl-result-list {width:100%!important;}

.xv-distrib-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
}
.xv-distrib-panel {
  position: absolute; inset: 0 0 auto 0;
  bottom: 1%;
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  display: grid; grid-template-rows: auto 1fr;
  overflow: hidden;
}
.xv-distrib-close {
  position: absolute; bottom: 10px; right: 12px;
  font-size: 16px; line-height: 1; background: none; border: 0; cursor: pointer;
  font-family:"ubuntu",sans-serif; color:#ffffff;
}

html.xv-distrib-open .breadcrumb-0-2-332 {
  display: none !important;
}

#wpsl-search-btn {
	background:#E84B31!important; 
  border:1px solid #E84B31!important;
  border-radius:8px!important;
  width:130px!important; height:38px!important;
  font-size: 16px!important; cursor: pointer;
  font-family:"ubuntu",sans-serif!important; color:#ffffff!important;
}

.wpsl-autocomplete-search-results ul {
	font-family:"ubuntu",sans-serif!important;
	padding:0!important;
	list-style-type:none!important;
}

#wpsl-stores ul {
	padding:0!important;
	list-style-type:none!important;
}



/* Zone intérieure = layout */
.xv-distrib-inner {
  display: grid;
  grid-template-columns: 1fr;       /* 1 colonne par défaut: la zone WPSL prend 100% */
  gap: 0;
  height: 100%;
}

/* Quand le détail est ouvert => 2 colonnes */
.xv-distrib-panel.xv-has-detail .xv-distrib-inner {
  grid-template-columns: minmax(0, 1fr) 380px; /* liste/cartes à gauche, off-canvas à droite */
}
#wpsl-search-input, #wpsl-category .wpsl-dropdown, #wpsl-radius .wpsl-dropdown {width:220px!important; height:35px;}


/* WPSL: fais occuper toute la colonne de gauche */
.xv-distrib-wpsl {
  min-height: 100%;
  overflow: auto;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
}

/* Off-canvas */
.xv-offcanvas {
  border-left: 1px solid #eee;
  padding: 16px;
  overflow: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  background: #fff;
  font-family:"ubuntu",sans-serif;
  z-index:9999;
}
.xv-offcanvas.xv-open {
  transform: translateX(0);
}
.xv-oc-close {
  position: sticky; top: 0; float: right;
  background: none; border: 0; font-size: 28px; cursor: pointer;
}
.xv-oc-header { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.xv-oc-header img { width:80px; height:80px; object-fit:cover; border-radius:8px; }
.xv-oc-thumb-ph { width:80px; height:80px; background:#eee; border-radius:8px; }
.xv-oc-title { margin:0; font-size:18px; line-height:1.3; }
.xv-oc-cat { color:#666; font-size:13px; }
.xv-oc-block { margin:14px 0; }
.xv-oc-label { display:block; font-size:14px; text-transform:uppercase; color:#5F5C5B; margin-bottom:6px; font-weight:700; }
.xv-oc-links a { display:inline-block; margin-right:10px; }

.wpsl-info-window p{ font-size:14px; color:#5F5C5B; font-family:"ubuntu", sans-serif!important; }

/* --- Bouton fermer : toujours au-dessus de la carte --- */
.xv-distrib-close{
  z-index: 99999;                 /* <-- par-dessus Google Maps */
  background:#E84B31; 
  border:1px solid #E84B31;
  border-radius:8px;
  width:106px; height:31px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* --- (Option) Modale plein écran --- */
/* Si tu veux la modale 100% écran, dé-commente ce bloc : */
/*
.xv-distrib-panel{
  inset: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
*/

/* --- Layout WPSL dans la modale : gauche (search+results), droite (map) --- */
#xv-distribution #wpsl-wrap{
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "search map"
    "results map";
  gap: 16px;
  height: 100%;         /* remplit la hauteur dispo de la modale */
  min-height: 0;
}

/* zones */
#xv-distribution #wpsl-wrap .wpsl-search{ 
  grid-area: search; 
  position: sticky; 
  top: 0; 
  z-index: 2; 
  background: #fff; 
  margin-bottom:0;
}

#wpsl-gmap {
	margin-top:-10px;
}

#xv-distribution #wpsl-wrap #wpsl-result-list{
  grid-area: results;
  min-height: 0;
  overflow: hidden!important;    
}

#xv-distribution #wpsl-wrap #wpsl-gmap{
  grid-area: map;
  position: relative;
  min-height: 420px;    /* fallback petites hauteurs */
  height: 100%;
}

/* La carte doit VRAIMENT remplir sa cellule */
#xv-distribution #wpsl-wrap #wpsl-gmap,
#xv-distribution #wpsl-wrap #wpsl-gmap > div,
#xv-distribution #wpsl-wrap #wpsl-gmap .gm-style{
  height: 100% !important;
  width: 100% !important;
}

/* Mobile : on empile tout et on met la carte en bas */
@media (max-width: 900px){
  #xv-distribution #wpsl-wrap{
	  gap:0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 50vh;
    grid-template-areas:
      "search"
      "results"
      "map";
  }
}




/* ===== WPSL — Bottom sheet mobile ===== */
@media (max-width:980px){
  #wpsl-wrap.wpsl-mobile{position:relative; min-height:100vh; display:block;}

  /* La carte occupe tout l'écran sous la barre de recherche */
  #wpsl-wrap.wpsl-mobile #wpsl-search{position:relative; z-index:2;}
  #wpsl-wrap.wpsl-mobile #wpsl-gmap{
    position:relative; z-index:1; height:calc(100vh - 56px); /* ajuste 56px selon ta barre */
  }

  /* Bottom sheet : la liste en bas */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list{
    position:fixed; left:0; right:0; bottom:0;
    z-index:9999; background:#fff; box-shadow:0 -10px 30px rgba(0,0,0,.18);
    border-top-left-radius:16px; border-top-right-radius:16px;
    transform:translateY(calc(100% - var(--sheet-collapsed,64px)));
    transition:transform .28s ease;
    max-height:70vh; display:flex; flex-direction:column;
  }

  /* Entête cliquable (injectée par le JS) */
  #wpsl-wrap.wpsl-mobile .xv-wpsl-sheet-head{
    display:flex; align-items:center; gap:.5rem;
    padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    min-height:64px; cursor:pointer; user-select:none; position:relative;
  }
  #wpsl-wrap.wpsl-mobile .xv-wpsl-grip{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; border-radius:999px; background:#e5e7eb;
  }
  #wpsl-wrap.wpsl-mobile .xv-wpsl-sheet-title{font-weight:600; font-size:16px;}
  #wpsl-wrap.wpsl-mobile .xv-wpsl-count{opacity:.6; font-size:13px; margin-left:.25rem;}

  /* Corps scrollable (contenu existant) */
  #wpsl-wrap.wpsl-mobile .xv-wpsl-sheet-body{
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding:0 12px 12px;
    max-height:calc(70vh - 64px);
  }

  /* Ouvert */
  #wpsl-wrap.wpsl-mobile #wpsl-result-list.is-open{
    transform:translateY(0);
  }
  #wpsl-wrap.wpsl-mobile .xv-wpsl-sheet-head{ touch-action: none; }
  #wpsl-wrap.wpsl-mobile .xv-wpsl-sheet-body{ overscroll-behavior: contain; }
}