/* FH9 Header Pro v1.0.8
   - Info (shipping/contact/lang) is docked to the right of the logo (not above).
   - Search uses full available space between logo and actions.
   - Wishlist support for blockwishlist / ps_wishlist in the actions area.
*/

:root{
  --fh9hp-accent: #c89b3c;
  --fh9hp-bg: #0b0705;
  --fh9hp-bg2: #120c08;
  --fh9hp-txt: rgba(255,255,255,.92);
  --fh9hp-muted: rgba(255,255,255,.70);
  --fh9hp-line: rgba(255,255,255,.10);
  --fh9hp-radius: 14px;
  --fh9hp-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* =====================================================================
   FH9 Overlay Offset System (single source of truth)
   - JS updates :root --fh9hp-overlay-top based on the REAL sticky header height.
   - CSS applies this offset to all Bootstrap overlays (modal/offcanvas) + backdrops.
   - Works even if a theme variant prevents our JS from adding helper classes.
   - Uses 100dvh when available (mobile address bars) with 100vh fallback.
   ===================================================================== */

:root{
  --fh9hp-header-h: 0px;
  --fh9hp-overlay-top: 0px;
  --fh9hp-overlay-gap: 12px;
}

/* ===== Bootstrap Offcanvas ===== */
body.fh9hp--sticky .offcanvas.show,
body.fh9hp--sticky .offcanvas.showing,
body.fh9hp--sticky .offcanvas.fh9hp-has-offset{
  top: var(--fh9hp-overlay-top) !important;
  height: calc(100dvh - var(--fh9hp-overlay-top)) !important;
  height: calc(100vh - var(--fh9hp-overlay-top)) !important;
}

body.fh9hp--sticky .offcanvas-backdrop.show,
body.fh9hp--sticky .offcanvas-backdrop.fade{
  top: var(--fh9hp-overlay-top) !important;
  height: calc(100dvh - var(--fh9hp-overlay-top)) !important;
  height: calc(100vh - var(--fh9hp-overlay-top)) !important;
}

/* ===== Bootstrap Modal ===== */
body.fh9hp--sticky .modal.show,
body.fh9hp--sticky .modal.fade.showing,
body.fh9hp--sticky .modal.fh9hp-has-offset{
  padding-top: var(--fh9hp-overlay-top) !important;
}

body.fh9hp--sticky .modal-backdrop.show,
body.fh9hp--sticky .modal-backdrop.fade{
  top: var(--fh9hp-overlay-top) !important;
  height: calc(100dvh - var(--fh9hp-overlay-top)) !important;
  height: calc(100vh - var(--fh9hp-overlay-top)) !important;
}

body.fh9hp--sticky .modal.show .modal-dialog,
body.fh9hp--sticky .modal.fh9hp-has-offset .modal-dialog{
  margin-top: var(--fh9hp-overlay-gap) !important;
  margin-bottom: var(--fh9hp-overlay-gap) !important;
}

body.fh9hp--sticky .modal.show .modal-content,
body.fh9hp--sticky .modal.fh9hp-has-offset .modal-content{
  max-height: calc(100dvh - var(--fh9hp-overlay-top) - (var(--fh9hp-overlay-gap) * 2));
  max-height: calc(100vh - var(--fh9hp-overlay-top) - (var(--fh9hp-overlay-gap) * 2));
  overflow: auto;
}



/* === CART MODAL: start under sticky header (mobile) === */
@media (max-width: 767.98px){
  /* Modal cart in Hummingbird is usually #blockcart-modal */
  #blockcart-modal.fh9hp-modal-top{
    padding-top: 0 !important;
  }

  #blockcart-modal.fh9hp-modal-top .modal-dialog{
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* If theme uses centered dialog, force it to the top */
  #blockcart-modal.fh9hp-modal-top .modal-dialog-centered{
    align-items: flex-start !important;
    min-height: calc(100% - var(--fh9hp-overlay-top, 0px) - 24px) !important;
  }

  #blockcart-modal.fh9hp-modal-top .modal-content{
    max-height: calc(100dvh - var(--fh9hp-overlay-top, 0px) - 24px) !important;
    max-height: calc(100vh - var(--fh9hp-overlay-top, 0px) - 24px) !important;
    overflow: auto !important;
    border-radius: 16px !important;
  }
}

/* Header base */
#header{
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(200,155,60,.12), transparent 60%),
    linear-gradient(180deg, var(--fh9hp-bg), var(--fh9hp-bg2));
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 20000;
}
#header .header__banner{ display:none !important; }
#header .header-top{ display:none !important; } /* everything docked into header-bottom */

/* Ensure dropdowns / mega-menus fully cover the page content behind.
   Avoid using container opacity (it will show products through). */
#header .dropdown-menu,
#header .menu-dropdown,
#header .fh9-megamenu,
#header .megamenu,
#header .top-menu{
  z-index: 20010;
}

/* Default: premium dark, opaque background (products stay visually behind) */
#header .dropdown-menu,
#header .menu-dropdown,
#header .fh9-megamenu,
#header .megamenu{
  position: relative;
  background: #0b0b0b !important;
}

/* Optional glass effect without seeing product cards sharply */
#header .dropdown-menu::before,
#header .menu-dropdown::before,
#header .fh9-megamenu::before,
#header .megamenu::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
}

#header .header-bottom{ background: transparent !important; border-top: 0 !important; }
#header .header-bottom__container{ padding-top: 8px; padding-bottom:  8px; }
/* Theme row contains mobile offcanvas (menu). Do NOT hide it globally. We neutralize its inline layout only on mobile to avoid duplicates. */

/* Hide theme mobile duplicates */
@media (max-width: 767.98px){
  #header #_mobile_user_info,
  #header #_mobile_cart,
  #header .search__mobile{ display:none !important; }

  /* Neutralize theme inline header row on mobile (keeps offcanvas containers like #mobileMenu working) */
  #header .header-bottom__row{
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }
  /* Hide everything inside the theme row except the main menu offcanvas container */
  #header .header-bottom__row > :not(.main-menu__offcanvas){
    display: none !important;
  }
  /* Ensure the menu offcanvas is above the backdrop */
  #mobileMenu.offcanvas{ z-index: 1055; }

  /* Full-width offcanvas menu for premium mobile UX */
  #mobileMenu.offcanvas{ width: 100vw !important; max-width: 100vw !important; }
  /* If header is sticky/fixed, push menu below it */
  #mobileMenu.offcanvas{
    top: var(--fh9hp-overlay-top, 0px) !important;
    height: calc(100dvh - var(--fh9hp-overlay-top, 0px)) !important;
    height: calc(100vh - var(--fh9hp-overlay-top, 0px)) !important;
  }
  /* Backdrop offset is handled globally in the FH9 overlay system */

}

/* ===== Desktop wrap =====
   Objectif: rapprocher topbar + search du logo, tout en gardant la recherche au max.
   Layout: [logo][content (topbar+search)][actions]
*/
#header .fh9hp-desktopwrap{
  max-width: 1320px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items:center;
}

#header .fh9hp-desktopwrap__logo{
  grid-column: 1;
  grid-row: 1 / span 2;
  display:flex;
  align-items:center;
}
#header .fh9hp-desktopwrap__logo .me-auto{ margin-right: 0 !important; }
#header .fh9hp-desktopwrap__logo img{
  height: 96px !important;
  max-height: 96px !important;
  width: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.45));
}

/* Infobar (topbar) — compact and kept close to logo */
.fh9hp-topbar{
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--fh9hp-muted);
}
.fh9hp-topbar__inner{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  min-height: 28px;
}
.fh9hp-topbar__msg{ color: var(--fh9hp-muted); display:inline-flex; align-items:center; line-height:1.2; }
.fh9hp-topbar__right{ margin-left: auto; }
.fh9hp-topbar__right{ display:flex; align-items:center; gap: 12px; }
.fh9hp-topbar__link{ color: var(--fh9hp-txt); text-decoration:none; }
.fh9hp-topbar__link:hover{ color:#fff; text-shadow: 0 0 12px rgba(200,155,60,.20); }
.fh9hp-topbar__sep{ width:1px; height:14px; background: rgba(255,255,255,.14); }

/* Center USP message ("Livraison offerte...") without breaking right-side links */
.fh9hp-topbar__inner{ position: relative; }
.fh9hp-topbar__left{ min-width: 0; }
.fh9hp-topbar__msg{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 260px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On very small screens, allow more room for the centered message */
@media (max-width: 575.98px){
  .fh9hp-topbar__msg{ max-width: calc(100% - 24px); }
}


/* Style language selector inside infobar (Hummingbird) */
.fh9hp-topbar #_desktop_language_selector,
.fh9hp-topbar .language-selector,
.fh9hp-topbar .dropdown{
  margin: 0 !important;
}
.fh9hp-topbar .dropdown-toggle{
  color: var(--fh9hp-txt) !important;
  text-decoration:none !important;
  padding: 0 !important;
}
.fh9hp-topbar .dropdown-menu{
  background: linear-gradient(180deg, rgba(14,10,7,.98), rgba(12,8,6,.98)) !important;
  border: 1px solid rgba(200,155,60,.16) !important;
  border-radius: 14px !important;
  box-shadow: var(--fh9hp-shadow) !important;
}

/* Search row: full width between logo and actions */
#header .fh9hp-desktopwrap__search{
  min-width: 0; /* allow full-width in CSS grid */
  grid-column: 2;
  grid-row: 2;
  width: 100%;
}
#header .fh9hp-desktopwrap__search #_desktop_search{
  width: 100%;
  margin-left: 0 !important; /* neutralise .ms-auto from theme */
}
#header .fh9hp-desktopwrap__search .search-widgets form{ position: relative; }
#header .fh9hp-desktopwrap__search .js-search-input{
  width: 100%;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(200,155,60,.18) !important;
  border-radius: 12px !important;
  padding: 12px 44px 12px 44px !important;
  color: rgba(255,255,255,.92) !important;
}
#header .fh9hp-desktopwrap__search .js-search-input::placeholder{ color: rgba(255,255,255,.58) !important; }
#header .fh9hp-desktopwrap__search .search{
  position:absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.72) !important;
}
#header .fh9hp-desktopwrap__search .clear{
  position:absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.55) !important;
}
#header .fh9hp-desktopwrap__search .js-search-input:focus{
  outline:none !important;
  box-shadow: 0 0 0 3px rgba(200,155,60,.10) !important;
  border-color: rgba(200,155,60,.34) !important;
}

/* Actions row */
#header .fh9hp-desktopwrap__actions{
  grid-column: 3;
  grid-row: 2;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:flex-end;
  white-space: nowrap;
}
#header .fh9hp-desktopwrap__actions .header-block__action-btn,
#header .fh9hp-desktopwrap__actions a,
#header .fh9hp-desktopwrap__actions button{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
#header .fh9hp-desktopwrap__actions .header-block__action-btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 14px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
#header .fh9hp-desktopwrap__actions .header-block__action-btn:hover{
  border-color: rgba(200,155,60,.22);
  box-shadow: 0 0 0 3px rgba(200,155,60,.08);
}
#header .fh9hp-desktopwrap__actions .header-block__badge{
  background: var(--fh9hp-accent);
  color: #0b0705;
  font-weight: 900;
}

/* Wishlist common selectors: make it look like a pill button when possible */
#header .fh9hp-desktopwrap__actions .wishlist,
#header .fh9hp-desktopwrap__actions .blockwishlist{
  margin: 0 !important;
}
#header .fh9hp-desktopwrap__actions .wishlist a,
#header .fh9hp-desktopwrap__actions .blockwishlist a{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 14px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
#header .fh9hp-desktopwrap__actions .wishlist a:hover,
#header .fh9hp-desktopwrap__actions .blockwishlist a:hover{
  border-color: rgba(200,155,60,.22);
  box-shadow: 0 0 0 3px rgba(200,155,60,.08);
}

/* Menu bar */
#header .fh9hp-menubar{
  max-width: 1320px;
  margin: 6px auto 0;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 6px;
  display:flex;
  align-items:center;
}

/* =====================================================================
   FH9 — Desktop/Tablet density tuning
   Reduce vertical dead space between logo block and menu bar on >= md.
   ===================================================================== */

@media (min-width: 768px){
  /* The theme keeps a Bootstrap .row (header-bottom__row) that is mostly for mobile blocks.
     On desktop/tablet it can still occupy vertical space even if children are hidden.
     We hide it to remove the ~40px dead gap above the menubar. */
  #header .header-bottom__row{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  /* Slightly tighter container so the menu sits closer under the logo */
  #header .header-bottom__container{
    padding-top: 6px;
    padding-bottom: 4px;
  }

  /* Reduce internal grid breathing room */
  #header .fh9hp-desktopwrap{ row-gap: 4px; }

  /* Pull menu bar up a bit and reduce its own top padding */
  #header .fh9hp-menubar{
    margin-top: 2px;
    padding-top: 4px;
  }
}
#header .fh9hp-menubar .main-menu{ width: 100%; }
#header .fh9hp-menubar .main-menu__tree{ justify-content:flex-start; gap: 4px; }
#header .fh9hp-menubar .main-menu__tree__link{
  color: rgba(255,255,255,.86) !important;
  text-decoration:none !important;
  padding: 10px 12px !important;
  border-radius: 10px;
}
#header .fh9hp-menubar .main-menu__tree__link:hover,
#header .fh9hp-menubar .main-menu__tree__item:hover > .main-menu__tree__link{
  color:#fff !important;
  background: rgba(200,155,60,.08);
  box-shadow: 0 0 0 1px rgba(200,155,60,.14) inset;
}
#header .fh9hp-menubar .menu-container{
  background: linear-gradient(180deg, rgba(14,10,7,.98), rgba(12,8,6,.98)) !important;
  border: 1px solid rgba(200,155,60,.16) !important;
  border-radius: 16px !important;
  box-shadow: var(--fh9hp-shadow) !important;
}

/* Sticky */
body.fh9hp--sticky #header{ position: sticky; top: 0; z-index: 20000; backdrop-filter: blur(6px); }

/* Injection point hidden */
.fh9hp-topactions{ display:none; }

/* Mobile (compact bar + inline search under it) */
@media (max-width: 767.98px){
  #header .fh9hp-desktopwrap,
  #header .fh9hp-menubar{ display:none !important; }

  /* Theme duplicates to suppress */
  #header .header-bottom__row{ display:none !important; }

  .fh9hp-mobilebar{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px 8px;
  }

  .fh9hp-mobilebar__btn{
    appearance:none;
    border: 1px solid rgba(200,155,60,.18);
    background: rgba(0,0,0,.25);
    border-radius: 12px;
    width: 42px; height: 42px;
    display:flex; align-items:center; justify-content:center;
  }

  .fh9hp-mobilebar__logo{ flex: 1 1 auto; min-width: 0; display:flex; justify-content:center; }
  .fh9hp-mobilebar__logoimg{
    height: 36px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
  }

  .fh9hp-mobilebar__actions{ display:flex; align-items:center; gap: 8px; }
  .fh9hp-mobilebar__account,
  .fh9hp-mobilebar__cart{ display:flex; align-items:center; justify-content:center; }

  /* Force icon-only look for modules that output text */
  .fh9hp-mobilebar__account .header-block__title,
  .fh9hp-mobilebar__account .hidden-sm-down,
  .fh9hp-mobilebar__cart .header-block__title,
  .fh9hp-mobilebar__cart .hidden-sm-down{ display:none !important; }

  .fh9hp-mobilesearch{
    display:block !important;
    width: 100% !important;
    padding: 0 12px 12px;
  }

  .fh9hp-search{ position: relative; width:100%; }
  .fh9hp-search__input{
    width: 100%;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(200,155,60,.18) !important;
    border-radius: 12px !important;
    padding: 12px 44px 12px 14px !important;
    color: rgba(255,255,255,.92) !important;
  }
  .fh9hp-search__input::placeholder{ color: rgba(255,255,255,.58) !important; }
  .fh9hp-search__submit{
    position:absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border: 0;
    background: transparent;
    display:flex; align-items:center; justify-content:center;
  }
  .fh9hp-search__input:focus{
    outline:none !important;
    box-shadow: 0 0 0 3px rgba(200,155,60,.10) !important;
    border-color: rgba(200,155,60,.34) !important;
  }

  /* Kill Hummingbird offcanvas search (keep only our inline search) */
  #header .search__mobile,
  #header .search-widget__toggle,
  #header .js-search-toggler,
  .offcanvas.search,
  .offcanvas-search,
  #search-offcanvas{ display:none !important; }

  /* FH9-owned offcanvas menu (premium dark) */
  .fh9hp-offcanvas{
    background: linear-gradient(180deg, rgba(14,10,7,.98), rgba(12,8,6,.98)) !important;
    border-right: 1px solid rgba(200,155,60,.16);
    color: rgba(255,255,255,.92);
  }
  .fh9hp-offcanvas__head{
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .fh9hp-offcanvas__body{ padding-top: 10px; }
  .fh9hp-offcanvas__menu .main-menu__tree__link,
  .fh9hp-offcanvas__menu a{
    color: rgba(255,255,255,.90);
    text-decoration: none;
  }
  .fh9hp-offcanvas__menu .main-menu__tree__link:hover,
  .fh9hp-offcanvas__menu a:hover{
    color:#fff;
  }
  .fh9hp-offcanvas__extras{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); }
}

/* Icons */
.fh9hp-ico{ position:relative; display:inline-block; width:18px; height:18px; }
.fh9hp-ico--burger::before{
  content:""; position:absolute; left:2px; right:2px; height:2px;
  background: rgba(255,255,255,.88); border-radius:2px; top:2px;
  box-shadow: 0 6px 0 rgba(255,255,255,.88), 0 12px 0 rgba(255,255,255,.88);
}
.fh9hp-ico--search::before{
  content:""; position:absolute; width:10px; height:10px;
  border:2px solid rgba(255,255,255,.88); border-radius:50%; left:1px; top:1px;
}
.fh9hp-ico--search::after{
  content:""; position:absolute; width:7px; height:2px;
  background: rgba(255,255,255,.88); transform: rotate(45deg);
  right:0px; bottom:2px; border-radius:2px;
}

/* Wishlist wrapper (best-effort styling) */
#header .fh9hp-desktopwrap__actions .fh9hp-wishlist a,
#header .fh9hp-desktopwrap__actions .fh9hp-wishlist button{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 14px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
#header .fh9hp-desktopwrap__actions .fh9hp-wishlist a:hover,
#header .fh9hp-desktopwrap__actions .fh9hp-wishlist button:hover{
  border-color: rgba(200,155,60,.22);
  box-shadow: 0 0 0 3px rgba(200,155,60,.08);
}


/* Ensure the search widget can truly expand to full width (themes may constrain internal wrappers) */
#header .fh9hp-desktopwrap__search,
#header .fh9hp-desktopwrap__search > *,
#header .fh9hp-desktopwrap__search #_desktop_search,
#header .fh9hp-desktopwrap__search .search-widget,
#header .fh9hp-desktopwrap__search .search-widgets{
  width: 100%;
  max-width: 100%;
}

#header .fh9hp-desktopwrap__search form{
  width: 100%;
  max-width: 100%;
}


/* Breadcrumb — FH9 Dark Fantasy skin (no markup change required) */
nav.breadcrumb__wrapper{
  background: transparent;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
nav.breadcrumb__wrapper .breadcrumb{
  margin: 0;
  padding: 0;
  background: transparent;
}
nav.breadcrumb__wrapper .breadcrumb-item{
  font-size: .95rem;
  color: rgba(255,255,255,.82);
}
nav.breadcrumb__wrapper .breadcrumb-item a{
  color: rgba(255,255,255,.90);
  text-decoration: none;
}
nav.breadcrumb__wrapper .breadcrumb-item a:hover{
  text-decoration: underline;
}
nav.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before{
  content: "›";
  color: rgba(255,255,255,.55);
  padding: 0 .55rem;
}
nav.breadcrumb__wrapper .breadcrumb-item span{
  color: rgba(255,255,255,.92);
}

/* ============================
   FH9 HP — Header spacing (logo + topline + search)
   Objectifs :
   - rapprocher "livraison offerte..." + recherche du logo
   - la recherche s'étire au maximum (prend tout l'espace restant)
   - ne pas dépendre du thème (fallback sur plusieurs structures)
   ============================ */

/* Le layout doit coller à gauche (évite les trous) */
#header .header-top .container .row{
  justify-content: flex-start;
}

/* Réduit l'espace à droite du logo */
#header .header-top #_desktop_logo,
#header .header-top .header-logo{
  margin-right: 12px;
}

/* Bloc "promo" (Livraison offerte...) : pas de gros push */
#header .header-top .fh9hp-promo,
#header .header-top .header-promo,
#header .header-top .delivery-offer,
#header .header-top .fh9hp-topline{
  margin-left: 0;
  margin-right: 12px;
  white-space: nowrap;
}

/* Recherche : doit s'étirer au maximum */
#header .header-top #_desktop_search,
#header .header-top .search-widget,
#header .header-top #search_widget,
#header .header-top form#searchbox{
  flex: 1 1 auto;
  min-width: 320px;
}

/* Input recherche full width */
#header .header-top #_desktop_search form,
#header .header-top .search-widget form,
#header .header-top #search_widget form,
#header .header-top form#searchbox{
  width: 100%;
}

#header .header-top #_desktop_search input[type="search"],
#header .header-top .search-widget input[type="search"],
#header .header-top #search_widget input[type="search"],
#header .header-top form#searchbox input[type="search"]{
  width: 100%;
}

/* Petits écrans : évite les débordements */
@media (max-width: 991.98px){
  #header .header-top #_desktop_search,
  #header .header-top .search-widget,
  #header .header-top #search_widget,
  #header .header-top form#searchbox{
    min-width: 0;
  }

  /* Optionnel : souvent mieux de masquer la topline en mobile */
  #header .header-top .fh9hp-promo,
  #header .header-top .header-promo,
  #header .header-top .delivery-offer,
  #header .header-top .fh9hp-topline{
    display: none;
  }
}

/* Safety: never show desktop wrap on mobile (in case the theme overrides Bootstrap utilities) */
@media (max-width: 767.98px){
  .fh9hp-desktopwrap,
  .fh9hp-menubar{ display:none !important; }
}

/* === FH9: Style premium du menu offcanvas Hummingbird (mobile) ===
   But: le menu (#mobileMenu) s'ouvre bien, mais par défaut il garde un fond clair.
   On le "skin" en dark fantasy sans toucher aux templates du thème.
*/
@media (max-width: 767.98px){

  /* Offcanvas du thème (ps_mainmenu) */
  #mobileMenu.offcanvas,
  #mobileMenu.main-menu__offcanvas{
    background: linear-gradient(180deg, var(--fh9hp-bg2), var(--fh9hp-bg));
    color: var(--fh9hp-txt);
    width: min(88vw, 360px);
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 48px rgba(0,0,0,.55);
    z-index: 1055; /* au-dessus du header si celui-ci a un z-index élevé */
  }

  /* Backdrop au bon niveau */
  .offcanvas-backdrop{
    z-index: 1050;
  }

  #mobileMenu .offcanvas-header{
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  #mobileMenu .btn-close{
    filter: invert(1);
    opacity: .85;
  }

  /* Liste */
  #mobileMenu .main-menu__mobile{
    padding: .25rem 0 .75rem;
  }

  #mobileMenu .menu__list{
    margin: 0;
    padding: 0;
  }

  /* Liens */
  #mobileMenu .menu__link{
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    color: var(--fh9hp-txt);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
  }

  #mobileMenu .menu__link:hover,
  #mobileMenu .menu__link:focus{
    background: rgba(255,255,255,.06);
    color: #fff;
    outline: none;
  }

  /* Actif (si le thème met une classe, on la respecte) */
  #mobileMenu .menu__link[aria-current="page"],
  #mobileMenu .menu__link.is-active,
  #mobileMenu .current > .menu__link{
    color: #fff;
  }

  /* Chevron / ouverture des sous-menus */
  #mobileMenu .main-menu__toggle-child{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: rgba(255,255,255,.75);
    border-left: 1px solid rgba(255,255,255,.06);
  }

  #mobileMenu .main-menu__toggle-child:hover{
    background: rgba(255,255,255,.06);
    color: #fff;
  }

  /* Titre des sous-menus */
  #mobileMenu .main-menu__title{
    margin: .75rem 0 .25rem;
    padding: .85rem 1rem .35rem;
    color: rgba(255,255,255,.92);
    font-weight: 700;
    letter-spacing: .02em;
  }

  /* Séparateurs visuels légers entre items */
  #mobileMenu .menu__list > li{
    border-bottom: 1px solid rgba(255,255,255,.05);
  }

  /* Évite les “trous” blancs éventuels à cause de styles thème */
  #mobileMenu *{
    background-color: transparent;
  }
}
/* === FH9 TOPBAR: alignement vertical strict (v1.2.3) === */
.fh9hp-topbar__inner{
  display: flex;
  align-items: center;
  min-height: 34px;
}

.fh9hp-topbar__left,
.fh9hp-topbar__right{
  display: flex;
  align-items: center;
}

.fh9hp-topbar__msg,
.fh9hp-topbar__link{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding-block: 0;
}

.fh9hp-topbar__sep{
  align-self: center;
  height: 14px;
}


/* === FH9 DARK FANTASY: offcanvas header (menu mobile Hummingbird) === */
@media (max-width: 767.98px){
  #mobileMenu.offcanvas{
    color: inherit;
  }

  #mobileMenu .offcanvas-header{
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(18,12,8,.98), rgba(18,12,8,.92));
    border-bottom: 1px solid rgba(215,170,80,.22);
    backdrop-filter: blur(6px);
  }

  #mobileMenu .main-menu__back-button .js-back-button{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(215,170,80,.22);
    background: rgba(0,0,0,.20);
    color: rgba(245,224,170,.92);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .85rem;
  }

  #mobileMenu .main-menu__back-button .js-back-button:hover{
    background: rgba(0,0,0,.28);
    border-color: rgba(215,170,80,.34);
    color: rgba(255,236,190,.98);
  }

  #mobileMenu .main-menu__back-button .material-icons{
    font-size: 22px;
    opacity: .95;
  }

  #mobileMenu .btn-close{
    opacity: .95;
    margin: 0;
    padding: 0;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(215,170,80,.22);
    background-color: rgba(0,0,0,.20);
    filter: invert(1); /* rend l'icône visible sur fond dark */
  }

  #mobileMenu .btn-close:hover{
    background-color: rgba(0,0,0,.28);
    border-color: rgba(215,170,80,.34);
  }

  #mobileMenu .btn-close:focus{
    box-shadow: 0 0 0 .22rem rgba(215,170,80,.22);
  }
}

/* =====================================================================
   FH9 — Tablet Large (md/lg) fixes
   - Premium styling for #mobileMenu offcanvas on wider screens (tablets)
   - Search layout: full width line under header blocks
   ===================================================================== */

:root{
  --fh9hp-menu-bg: #0b0a0d;
  --fh9hp-menu-panel: rgba(255,255,255,.04);
  --fh9hp-menu-border: rgba(255,255,255,.10);
  --fh9hp-menu-text: rgba(255,255,255,.88);
  --fh9hp-menu-muted: rgba(255,255,255,.55);
  --fh9hp-menu-accent: #caa24a;
}

/* Ensure offcanvas menu is always dark/premium (mobile + tablet + desktop) */
#mobileMenu.offcanvas,
.offcanvas#mobileMenu{
  background: var(--fh9hp-menu-bg) !important;
  color: var(--fh9hp-menu-text);
  border-right: 1px solid var(--fh9hp-menu-border);
}

#mobileMenu .offcanvas-header{
  border-bottom: 1px solid var(--fh9hp-menu-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

#mobileMenu .offcanvas-body{
  padding: 12px 10px 18px;
}

#mobileMenu a,
#mobileMenu button,
#mobileMenu .dropdown-item{
  color: var(--fh9hp-menu-text);
  text-decoration: none;
}

#mobileMenu a:hover,
#mobileMenu .dropdown-item:hover{
  color: #fff;
  background: var(--fh9hp-menu-panel);
}

#mobileMenu .material-icons,
#mobileMenu .main-menu__arrow,
#mobileMenu .main-menu__icon{
  color: var(--fh9hp-menu-muted);
}

#mobileMenu .current > a,
#mobileMenu a[aria-current="page"]{
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(202,162,74,.35);
}

/* Tablet large: offcanvas width and search layout */
@media (min-width: 768px) and (max-width: 1199.98px){

  /* Menu not fullscreen: more “tablet drawer” */
  #mobileMenu.offcanvas,
  .offcanvas#mobileMenu{
    width: min(440px, 92vw) !important;
  }

  /* Search should be a full-width row below the main header line */
  #header .header-bottom__row,
  #header .header-bottom .row{
    flex-wrap: wrap;
  }

  /* Target common Hummingbird search containers without relying on theme-only ids */
  #header .header-bottom__row .search,
  #header .header-bottom__row .search-widget,
  #header .header-bottom__row .header-search,
  #header .header-bottom__row [class*="search"]{
    flex: 0 0 100%;
    max-width: 100%;
    order: 99;
    margin-top: 10px;
  }

  #header .header-bottom__row input[type="search"],
  #header .header-bottom__row .search-widget input,
  #header .header-bottom__row .ui-autocomplete-input{
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
  }

  #header .header-bottom__row input[type="search"]::placeholder,
  #header .header-bottom__row .search-widget input::placeholder{
    color: rgba(255,255,255,.55);
  }
}

/* =====================================================================
   FH9 — EXTRA density fix (v1.2.10)
   Remove remaining ~40px gap between logo block and menu bar on PC/tablet.
   Module-only overrides (loaded last).
   ===================================================================== */

@media (min-width: 768px){
  /* Container padding is the usual source of vertical dead space */
  #header .header-bottom__container{
    padding-top: 2px !important;
    padding-bottom: 0 !important;
  }

  /* Tighten the internal layout wrapper */
  #header .fh9hp-desktopwrap{
    row-gap: 0 !important;
  }

  /* Pull the menu bar up (keep the border-top visual separator) */
  #header .fh9hp-menubar{
    margin-top: 0 !important;
    padding-top: 2px !important;
  }
}