/* ============================================================
   EN-TÊTE POPLOOT — mécanique portée de vapoteur, couleurs Poploot
   (rose #DF0067, pas de bandeau bleu, pas de panier-tiroir)
   ============================================================ */

/* Masque la recherche native ps_searchbar (on utilise .vp-search) */
#search_widget,
#_desktop_search_wrapper,
.search-widget { display: none !important; }
.material-icons:empty { display: none; }

/* Grid header-top : logo + recherche sur la même ligne, menu pleine largeur dessous */
.vp-header-top { padding: 16px 0 0 0; background: #ffffff; }
.vp-header-top .container {
  display: grid !important;
  grid-template-areas:
    "logo  search"
    "menu  menu";
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  row-gap: 0.75rem;
  align-items: center;
}
.vp-header-top .vp-header-logo-row   { grid-area: logo;   margin: 0 !important; }
.vp-header-top .vp-header-search-row { grid-area: search; margin: 0 !important; display: flex; justify-content: center; }
.vp-header-top .vp-header-menu-row   { grid-area: menu;   margin: 0 !important; border-top: 1px solid #f0f0f0; padding: 4px 0; }

.vp-header-top #_desktop_logo {
  width: auto !important; max-width: none !important; padding: 0 !important;
  flex: 0 0 auto; text-align: left;
}
.vp-header-top #_desktop_logo h1 { margin: 0; }
.vp-header-top #_desktop_logo img.logo,
.vp-header-top #_desktop_logo img { max-height: 90px; width: auto; height: auto; display: block; }
.vp-header-top .vp-header-search-row > .col-md-12 { width: 100% !important; max-width: none !important; padding: 0 !important; }
.vp-header-search-row .vp-search { max-width: 640px; width: 100%; }

/* Top-nav neutre (pas de bleu vapoteur) ; contact + user/cart masqués ici (déplacés en JS) */
.header-nav #_desktop_contact_link,
.header-nav #_desktop_user_info,
.header-nav #blockcart-wrapper { display: none !important; }

/* Slot compte+panier dans la barre du menu, aligné à droite */
.vp-menu-right-actions {
  display: flex; align-items: center; gap: 1.5rem;
  margin-left: auto; padding-right: 20px;
}
.vp-menu-right-actions #_desktop_user_info,
.vp-menu-right-actions #blockcart-wrapper { display: block !important; }
.vp-menu-right-actions .user-info a { color: inherit !important; }
.user-info a { display: inline-flex !important; align-items: center !important; gap: .4rem !important; text-decoration: none !important; }
.user-info a .material-icons { line-height: 1 !important; vertical-align: middle !important; }

/* Mini-recherche compacte injectée dans la barre, visible seulement quand sticky */
.vp-menu-search { display: none; position: relative; align-items: center; width: 260px; margin-left: auto; }
body.vp-menu-stuck .vp-menu-search { display: flex; }
body.vp-menu-stuck .vp-menu-search ~ .vp-menu-right-actions { margin-left: 1.5rem; }
.vp-menu-search__input {
  width: 100%; height: 36px; padding: 0 38px 0 14px;
  border: 1px solid #e0e0e0; border-radius: 18px; font-size: 14px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.vp-menu-search__input:focus { outline: none; border-color: #DF0067; box-shadow: 0 0 0 3px rgba(223,0,103,.15); }
.vp-menu-search__btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #666;
}
.vp-menu-search__btn:hover { color: #DF0067; }
.vp-menu-search__btn svg { width: 18px; height: 18px; }
.vp-menu-search .vp-search-results { position: absolute; top: calc(100% + 8px); right: 0; left: auto; width: 360px; max-width: 90vw; z-index: 9991 !important; }

/* Sticky : SEULE la barre du menu colle (position fixed pilotée en JS) */
body.vp-menu-stuck #mm-nav-wrap.mm-nav-wrap {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9985 !important; background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
  animation: vp-menu-slide-down 220ms ease-out;
}
@keyframes vp-menu-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body.vp-menu-stuck #mm-nav-wrap.mm-nav-wrap { animation: none; } }
/* Neutralise le sticky natif du megamenu (un seul mécanisme actif) */
.mm-nav-wrap.mm-sticky { position: relative !important; top: auto !important; }
/* Ancêtres en overflow visible pour les dropdowns du méga-menu */
#header, .vp-header-top, .vp-header-top .container,
.vp-header-menu-row, .vp-header-menu-row > .col-md-12 { overflow: visible !important; }

/* Recherche principale au-dessus du méga-panneau */
.vp-search { position: relative !important; z-index: 10001 !important; }
.vp-search-results { z-index: 10002 !important; }
.vp-header-search-row { position: relative !important; z-index: 10000 !important; }

/* Responsive mobile : on empile, recherche centrée, logo réduit */
@media (max-width: 767px) {
  .vp-header-top .container { display: block !important; }
  .vp-header-search-row { padding: 4px 12px 12px !important; }
  .vp-header-top #_desktop_logo { text-align: center; }
  .vp-header-top #_desktop_logo img.logo,
  .vp-header-top #_desktop_logo img { max-height: 48px; margin: 0 auto; }
}

/* ===== Panier dans la barre du menu : icône + badge compteur rose ===== */
.vp-menu-right-actions #_desktop_cart,
.vp-menu-right-actions #blockcart-wrapper { display: block !important; }
.vp-menu-right-actions #_desktop_cart .blockcart .header,
.vp-menu-right-actions #blockcart-wrapper .blockcart .header {
  position: relative; display: inline-flex; align-items: center; text-decoration: none;
}
/* on garde l'icône, on masque le mot "Panier" pour un rendu icône + badge */
.vp-menu-right-actions #_desktop_cart .blockcart .header > span.hidden-sm-down { display: none !important; }
.vp-menu-right-actions #_desktop_cart .material-icons.shopping-cart,
.vp-menu-right-actions #blockcart-wrapper .material-icons.shopping-cart { font-size: 26px; color: #1a1a2e; }
.vp-menu-right-actions .cart-products-count {
  position: absolute; top: -7px; right: -11px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  background: #DF0067; color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.vp-menu-right-actions .cart-products-count.vp-cart-empty { background: #c2c2c2; }

/* ===== Mobile (téléphone) : UN seul menu = le méga-menu, ouvert par le hamburger du HAUT ===== */
@media (max-width: 767px) {
  /* Le hamburger du méga-menu (sous la recherche) disparaît : on passe par celui du haut */
  #mm-nav-wrap { display: none !important; }
  /* La rangée menu ne montre plus de bordure/strip vide (le tiroir y reste, invisible jusqu'à ouverture) */
  .vp-header-menu-row { border-top: none !important; padding: 0 !important; }
  /* Le menu natif vide ("Contactez-nous") ne s'ouvre plus */
  #mobile_top_menu_wrapper { display: none !important; }
  /* Hamburger du haut bien cliquable */
  .header-nav .mobile #menu-icon { cursor: pointer; }
}

/* Mobile : le tiroir du méga-menu + son fond doivent passer AU-DESSUS de la
   barre de recherche (sinon la recherche, en z-index élevé pour le desktop,
   recouvre le 1er élément du menu quand il s'ouvre). */
@media (max-width: 767px) {
  .mm-backdrop { z-index: 10050 !important; }
  .mm-drawer   { z-index: 10060 !important; }
}