/* KEEP: your current custom font rule */
li.cbp-hrmenu-tab > a,
div.cbp-category-link-w > a {
  font-family: 'Open Sans' !important; /* <----- change/modifie la police (font) des liens du méga menu */
  font-weight: 800 !important; /* <----- change/modifie l’épaisseur (gras) du texte (800 = très bold) */
}

/* -------------------------------------------------------
   IQIT MegaMenu FIX (Pos Ruby Layout 6)
   When sticky (.cbp-sticky), remove the boxed .container
-------------------------------------------------------- */

/* Make the sticky bar itself span full width */
#iqitmegamenu-horizontal.cbp-sticky {
  left: 0 !important; /* <----- change/modifie l’ancrage à gauche (0 = collé au bord gauche) */
  right: 0 !important; /* <----- change/modifie l’ancrage à droite (0 = collé au bord droit) */
  width: 100% !important; /* <----- change/modifie la largeur (100% = pleine largeur écran) */
}

/* THIS is the key: unbox the inner container only when sticky */
#iqitmegamenu-horizontal.cbp-sticky > .container {
  width: auto !important; /* <----- change/modifie la largeur du container interne (auto = s’adaQpte) */
  max-width: none !important; /* <----- change/modifie la largeur max (none = pas de limite) */
}

/* Optional: helps prevent tabs wrapping if space is tight */
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul {
  white-space: nowrap !important; /* <----- change/modifie le retour à la ligne (nowrap = jamais de wrap) */
}
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li {
  display: inline-block !important; /* <----- change/modifie le type d’affichage (inline-block = en ligne) */
  vertical-align: top !important; /* <----- change/modifie l’alignement vertical des items */
}

/* CENTER the menu when sticky */
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul {
  display: flex !important; /* <----- change/modifie le mode layout (flex = alignement flexible) */
  justify-content: center !important; /* <----- change/modifie le centrage horizontal (center) */
  align-items: center; /* <----- change/modifie le centrage vertical dans la barre */
}

/* Make sure items behave nicely in flex */
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li {
  float: none !important; /* <----- change/modifie le float (none = laisse flex gérer) */
}

/* =======================================================
   DESKTOP: TRUE MENU CENTERING (NO PIXEL SHOVES)
======================================================= */
@media (min-width: 768px){
  #iqitmegamenu-horizontal #cbp-hrmenu{
    display: flex !important; /* <----- change/modifie le mode layout du menu (flex) */
    justify-content: center !important; /* <----- change/modifie le centrage horizontal du menu */
  }

  #iqitmegamenu-horizontal #cbp-hrmenu > ul{
    display: flex !important; /* <----- change/modifie le layout de la liste (flex) */
    justify-content: center !important; /* <----- change/modifie le centrage des items */
    left: 0 !important; /* <----- change/modifie la position horizontale (0 = pas de décalage) */
    transform: none !important; /* <----- change/modifie toute transformation (none = pas de déplacement/scale) */
    margin: 0 auto !important; /* <----- change/modifie les marges (auto = centré) */
  }
}

/* Ensure LI items don't fight flex (old float layout) */
#iqitmegamenu-horizontal #cbp-hrmenu > ul > li{
  float: none !important; /* <----- change/modifie le float des items (none) */
}

/* =======================================================
   POS RUBY: TOP SEARCH BAR (sf-menu menu-content)
======================================================= */

/* 1) Remove the black bar background */
ul.sf-menu.menu-content {
  background: transparent !important; /* <----- change/modifie le fond (transparent = invisible) */
  background-color: transparent !important; /* <----- change/modifie la couleur de fond (fallback) */
  box-shadow: none !important; /* <----- change/modifie l’ombre (none = aucune) */
  border: none !important; /* <----- change/modifie la bordure (none = aucune) */
}

/* Some themes paint black on the LI's too */
ul.sf-menu.menu-content > li,
ul.sf-menu.menu-content > li > a {
  background: transparent !important; /* <----- change/modifie le fond des LI/liens (transparent) */
  background-color: transparent !important; /* <----- change/modifie la couleur de fond (fallback) */
}

/* 2) Make the "SEARCH" label not be a black box */
ul.sf-menu.menu-content > li:first-child > a {
  background: transparent !important; /* <----- change/modifie le fond du label SEARCH */
  color: inherit !important; /* <----- change/modifie la couleur (inherit = prend celle du parent) */
  padding: 0 12px !important; /* <----- change/modifie l’espace interne (0 haut/bas, 12px gauche/droite) */
}

/* 3) Style the input so it looks good on a transparent header */
ul.sf-menu.menu-content input#search_query_menu {
  background: rgba(255,255,255,0.15) !important; /* <----- change/modifie le fond de l’input (blanc translucide) */
  border: 2px solid rgba(0,0,0,0.25) !important; /* <----- change/modifie l’épaisseur + couleur de bordure */
  width: 400px !important; /* <----- change/modifie la largeur de l’input (desktop) */
  height: 30px !important; /* <----- change/modifie la hauteur de l’input */
  line-height: 30px !important; /* <----- change/modifie l’alignement vertical du texte (ligne) */
  border-radius: 6px !important; /* <----- change/modifie l’arrondi des coins */
  color: #000 !important; /* <----- change/modifie la couleur du texte */
  box-shadow: none !important; /* <----- change/modifie l’ombre de l’input */
}

/* Placeholder */
ul.sf-menu.menu-content input#search_query_menu::placeholder {
  color: rgba(0,0,0,0.55) !important; /* <----- change/modifie la couleur du placeholder */
}

/* CENTER the search row content */
ul.sf-menu.menu-content {
  display: flex !important; /* <----- change/modifie le layout de la rangée (flex) */
  align-items: center !important; /* <----- change/modifie l’alignement vertical des éléments */
  justify-content: center !important; /* <----- change/modifie le centrage horizontal */
}

/* Make li behave in flex */
ul.sf-menu.menu-content > li {
  float: none !important; /* <----- change/modifie le float (none) */
  display: inline-flex !important; /* <----- change/modifie l’affichage (inline-flex) */
  align-items: center !important; /* <----- change/modifie l’alignement vertical du contenu */
}

/* =======================================================
   FIX spacing between SEARCH label and input
======================================================= */
ul.sf-menu.menu-content { gap: 6px !important; } /* <----- change/modifie l’espace entre éléments (gap) */

ul.sf-menu.menu-content > li:first-child,
ul.sf-menu.menu-content > li:first-child > a {
  margin: 0 !important; /* <----- change/modifie la marge (0 = aucun espace externe) */
  padding-right: 6px !important; /* <----- change/modifie le padding droite du label */
  padding-left: 0 !important; /* <----- change/modifie le padding gauche du label */
}

ul.sf-menu.menu-content > li.sf-search {
  margin: 0 !important; /* <----- change/modifie la marge du bloc search */
  padding: 0 !important; /* <----- change/modifie le padding du bloc search */
}

ul.sf-menu.menu-content input#search_query_menu {
  margin: 0 !important; /* <----- change/modifie la marge autour de l’input */
}

/* =======================================================
   MOVE TOP SEARCH beside language (top-right)
======================================================= */
#header { position: relative !important; } /* <----- change/modifie le contexte de positionnement (relative) */

ul.sf-menu.menu-content {
  position: absolute !important; /* <----- change/modifie le positionnement (absolute) */
  top: 24px !important; /* <----- change/modifie la distance depuis le haut */
  right: -375px !important; /* <----- change/modifie le décalage depuis la droite (négatif = sort vers la droite) */
  z-index: 200 !important; /* <----- change/modifie la priorité de superposition (plus haut = au-dessus) */

  display: flex !important; /* <----- change/modifie le layout (flex) */
  align-items: center !important; /* <----- change/modifie l’alignement vertical */
  justify-content: flex-end !important; /* <----- change/modifie l’alignement horizontal (fin à droite) */
  background: transparent !important; /* <----- change/modifie le fond */
}

/* =======================================================
   DESKTOP FIX: PREVENT SEARCH BAR “DRIFT / ZOOM LOOK”
   (FIXED: removed broken nested @media)
======================================================= */
@media (min-width: 768px){

  /* Reserve space on the right for FR/EN + cart + cog (adjust this number once) */
  :root { --header-right-safe: -270px; } /* <----- change/modifie la marge de sécurité à droite (anti-chevauchement) */

  ul.sf-menu.menu-content{
    right: max(clamp(-350px, -12vw, -375px), var(--header-right-safe)) !important; /* <----- change/modifie l’ancrage à droite (clamp = limite selon largeur/zoom) */
    white-space: nowrap !important; /* <----- change/modifie le wrap (nowrap) */
    flex-wrap: nowrap !important; /* <----- change/modifie le wrap flex (nowrap) */
  }

  ul.sf-menu.menu-content input#search_query_menu{
    width: clamp(240px, 24vw, 330px) !important; /* <----- change/modifie la largeur responsive de l’input */
    max-width: 100% !important; /* <----- change/modifie la largeur max (sécurité) */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles (inclut border/padding) */
  }
}

/* Ensure the li’s don’t float and spacing stays tight */
ul.sf-menu.menu-content > li,
ul.sf-menu.menu-content > li.sf-search {
  float: none !important; /* <----- change/modifie le float (none) */
  margin: 0 !important; /* <----- change/modifie la marge (0) */
  padding: 0 !important; /* <----- change/modifie le padding (0) */
}

/* =======================================================
   CLICK FIX (ZOOM/OVERLAY): do NOT block FRANÇAIS / icons
======================================================= */
ul.sf-menu.menu-content {
  pointer-events: none !important; /* <----- change/modifie la capture des clics (none = laisse cliquer derrière) */
}
ul.sf-menu.menu-content > li:first-child > a,
ul.sf-menu.menu-content input#search_query_menu {
  pointer-events: auto !important; /* <----- change/modifie la capture des clics (auto = cliquable) */
}

/* =======================================================
   REMOVE the header magnifier (between cart and cogwheel)
======================================================= */
a.icon_top i.icon_search,
a.icon_top i.icon_search:before {
  display: none !important; /* <----- change/modifie l’affichage (none = caché) */
}
#search_block_top {
  display: none !important; /* <----- change/modifie l’affichage du bloc search top */
}

/* =======================================================
   FIX: Cogwheel dropdown should POP under the icon (not push layout)
======================================================= */
#header .header_user_info,
#header #languages-block-top,
#header #search_block_top {
  position: relative !important; /* <----- change/modifie le contexte des dropdowns (relative) */
}

#header .header_user_info .toogle_content,
#header .header_user_info .toggle_content,
#header #languages-block-top .toogle_content,
#header #languages-block-top .toggle_content {
  position: absolute !important; /* <----- change/modifie le type de position (absolute) */
  top: 100% !important; /* <----- change/modifie la position verticale (100% = juste sous l’icône) */
  right: 0 !important; /* <----- change/modifie l’ancrage à droite */
  left: auto !important; /* <----- change/modifie l’ancrage à gauche (désactivé) */
  margin-top: 8px !important; /* <----- change/modifie l’espace entre icône et dropdown */
  z-index: 999999 !important; /* <----- change/modifie la priorité de superposition du dropdown */
}

#header .header_user_info .toogle_content,
#header .header_user_info .toggle_content {
  margin-left: 0 !important; /* <----- change/modifie la marge gauche */
  margin-right: 0 !important; /* <----- change/modifie la marge droite */
}

/* Megamenu layering */
#iqitmegamenu-horizontal,
#iqitmegamenu-horizontal.cbp-sticky {
  z-index: 80000 !important; /* <----- change/modifie l’ordre d’empilement du méga menu */
}

#header,
#header .header-container,
#header .nav,
#header .row {
  overflow: visible !important; /* <----- change/modifie le débordement (visible = dropdowns visibles) */
}

/* Put header overlays above menu */
#header,
#header .nav,
#header .row,
#header .header_user_info {
  position: relative !important; /* <----- change/modifie le contexte (relative) */
  z-index: 50000 !important; /* <----- change/modifie la priorité au-dessus du menu */
}

/* Do NOT override sticky positioning; only z-index */
#iqitmegamenu-horizontal { position: relative !important; z-index: 80000 !important; } /* <----- change/modifie le stacking du menu (z-index) */
#iqitmegamenu-horizontal.cbp-sticky { z-index: 80000 !important; } /* <----- change/modifie le stacking en sticky */

/* Force toggle dropdown to top layer */
.header_user_info .toogle_content,
.header_user_info .toggle_content,
#header .toogle_content,
#header .toggle_content {
  position: absolute !important; /* <----- change/modifie le positionnement des dropdowns */
  z-index: 999999 !important; /* <----- change/modifie la priorité des dropdowns */
}

/* IMPORTANT: this was in your code — it can break sticky scripts.
   Keep it ONLY if you truly need it. (Leaving it as you had.) */
#iqitmegamenu-horizontal,
#iqitmegamenu-horizontal.cbp-sticky {
  transform: none !important; /* <----- change/modifie le transform global du menu (none = pas de déplacement/scale) */
}

/* Logo above overlays */
#header_logo,
#header_logo a {
  position: relative !important; /* <----- change/modifie le contexte du logo */
  z-index: 999998 !important; /* <----- change/modifie la priorité du logo */
  pointer-events: auto !important; /* <----- change/modifie la cliquabilité du logo */
}

/* Desktop: prevent invisible overlay stealing clicks */
@media (min-width: 768px){
  #header .block_right { pointer-events: none !important; } /* <----- change/modifie la capture de clics (désactive overlay) */
}

#header .block_right a,
#header .block_right button,
#header .block_right input,
#header .block_right select,
#header .block_right .shopping_cart,
#header .block_right .header_user_info,
#header .block_right #languages-block-top,
#header .block_right form {
  pointer-events: auto !important; /* <----- change/modifie quels éléments restent cliquables */
}

/* Make EXTRA sure magnifier stays hidden */
#header .block_right a.icon_top i.icon_search,
#header .block_right i.icon_search,
#header .block_right #search_block_top {
  display: none !important; /* <----- change/modifie l’affichage (cache la loupe) */
}

/* Nudge cogwheel icon */
#header .icon_cog::before {
  position: relative !important; /* <----- change/modifie le type de position (relative) */
  top: 4px !important; /* <----- change/modifie le décalage vertical de l’icône */
  left: 30px !important; /* <----- change/modifie le décalage horizontal de l’icône */
}
@media (max-width: 767px){
  #header .icon_cog::before{
    top: 4px !important; /* <----- change/modifie le décalage vertical (mobile) */
    left: 18px !important; /* <----- change/modifie le décalage horizontal (mobile) */
  }
}

/* Dropdown layer above page content */
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub {
  z-index: 45000 !important; /* <----- change/modifie le stacking des sous-menus */
  background: #fff !important; /* <----- change/modifie le fond du dropdown */
}
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub-inner {
  background: #fff !important; /* <----- change/modifie le fond interne du dropdown */
}

/* Keep banner blocks below dropdown */
#page .img_content,
#page .slideshow_container,
#page .cms_top {
  position: relative !important; /* <----- change/modifie le contexte (relative) */
  z-index: 1 !important; /* <----- change/modifie le stacking (en-dessous des dropdowns) */
}

/* Keep submenu open */
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub { pointer-events: auto !important; } /* <----- change/modifie la cliquabilité du sous-menu */
#iqitmegamenu-horizontal #cbp-hrmenu > ul > li:hover > .cbp-hrsub,
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub:hover {
  display: block !important; /* <----- change/modifie l’affichage au hover (ouvre) */
  visibility: visible !important; /* <----- change/modifie la visibilité (visible) */
  opacity: 1 !important; /* <----- change/modifie la transparence (1 = opaque) */
}
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub * {
  transition: none !important; /* <----- change/modifie les transitions (none = pas d’animation) */
}
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub-inner {
  background: #fff !important; /* <----- change/modifie le fond (blanc) */
  background-color: #fff !important; /* <----- change/modifie la couleur de fond (fallback) */
}

/* FIX: 3rd-level flyout gap */
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub ul ul {
  left: 100% !important; /* <----- change/modifie la position du 3e niveau (100% = à droite) */
  margin-left: -6px !important; /* <----- change/modifie l’écart entre niveaux (négatif = rapproche) */
}

/* Lightbox above everything */
.fancybox-overlay,
.fancybox-wrap,
.fancybox-opened,
#fancybox-overlay,
#fancybox-wrap,
#fancybox-outer,
.mfp-bg,
.mfp-wrap,
.pswp,
.pswp__bg,
.modal-backdrop,
.modal {
  z-index: 9999999 !important; /* <----- change/modifie la priorité des lightbox/modals (toujours au-dessus) */
}

html.fancybox-lock #header,
body.fancybox-lock #header,
html.fancybox-lock #iqitmegamenu-horizontal,
body.fancybox-lock #iqitmegamenu-horizontal,
html.fancybox-lock #iqitmegamenu-horizontal.cbp-sticky,
body.fancybox-lock #iqitmegamenu-horizontal.cbp-sticky,

body.modal-open #header,
body.modal-open #iqitmegamenu-horizontal,
body.modal-open #iqitmegamenu-horizontal.cbp-sticky,

html.mfp-ready #header,
html.mfp-ready #iqitmegamenu-horizontal,
html.mfp-ready #iqitmegamenu-horizontal.cbp-sticky,

html.pswp--open #header,
html.pswp--open #iqitmegamenu-horizontal,
html.pswp--open #iqitmegamenu-horizontal.cbp-sticky {
  z-index: 1 !important; /* <----- change/modifie le stacking du header/menu pendant une lightbox (mis en arrière) */
}

html.fancybox-lock #header,
body.fancybox-lock #header,
body.modal-open #header,
html.mfp-ready #header,
html.pswp--open #header {
  pointer-events: none !important; /* <----- change/modifie la cliquabilité du header pendant overlay (désactivée) */
}

html.fancybox-lock #iqitmegamenu-horizontal,
body.fancybox-lock #iqitmegamenu-horizontal,
body.modal-open #iqitmegamenu-horizontal,
html.mfp-ready #iqitmegamenu-horizontal,
html.pswp--open #iqitmegamenu-horizontal {
  pointer-events: none !important; /* <----- change/modifie la cliquabilité du menu pendant overlay (désactivée) */
}

/* Fancybox dim level */
.fancybox-overlay.fancybox-overlay-fixed,
.fancybox-overlay {
  background: rgba(0,0,0,0.45) !important; /* <----- change/modifie l’opacité du voile (0.45 = assez sombre) */
}
.fancybox-wrap,
.fancybox-opened {
  z-index: 10000000 !important; /* <----- change/modifie le stacking de la fenêtre fancybox */
}
.fancybox-overlay {
  z-index: 9999999 !important; /* <----- change/modifie le stacking du voile fancybox */
}

/* =======================================================
   MOBILE: layout + sticky behaviour
======================================================= */
@media (max-width: 767px){

  /* Undo desktop absolute positioning on mobile (top of page) */
  ul.sf-menu.menu-content{
    position: relative !important; /* <----- change/modifie le positionnement (mobile) */
    top: auto !important; /* <----- change/modifie l’offset haut (annulé) */
    right: auto !important; /* <----- change/modifie l’offset droite (annulé) */
    left: auto !important; /* <----- change/modifie l’offset gauche (annulé) */

    width: calc(100% - 20px) !important; /* <----- change/modifie la largeur (plein écran moins marge) */
    margin: 8px auto 10px auto !important; /* <----- change/modifie les marges (haut/auto/bas/auto) */
    padding: 0 !important; /* <----- change/modifie le padding (0) */

    display: flex !important; /* <----- change/modifie le layout (flex) */
    flex-wrap: wrap !important; /* <----- change/modifie le retour à la ligne (wrap) */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    justify-content: center !important; /* <----- change/modifie le centrage horizontal */

    pointer-events: auto !important; /* <----- change/modifie la cliquabilité (active) */
    z-index: 10 !important; /* <----- change/modifie la priorité mobile */
  }

  /* Hide label on mobile (as you had) */
  ul.sf-menu.menu-content > li:first-child{
    display: none !important; /* <----- change/modifie l’affichage du label (caché) */
  }

  /* Search takes full width on mobile */
  ul.sf-menu.menu-content > li.sf-search{
    float: none !important; /* <----- change/modifie le float (none) */
    width: 100% !important; /* <----- change/modifie la largeur (plein écran) */
    max-width: 520px !important; /* <----- change/modifie la largeur max (évite trop large) */
    display: block !important; /* <----- change/modifie l’affichage (block) */
    flex: 0 0 100% !important; /* <----- change/modifie la place dans flex (100%) */
    margin: 0 !important; /* <----- change/modifie la marge (0) */
    padding: 0 !important; /* <----- change/modifie le padding (0) */
  }
  ul.sf-menu.menu-content input#search_query_menu{
    width: 100% !important; /* <----- change/modifie la largeur de l’input (mobile) */
    max-width: none !important; /* <----- change/modifie la largeur max (aucune limite) */
    height: 36px !important; /* <----- change/modifie la hauteur (mobile) */
    line-height: 36px !important; /* <----- change/modifie l’alignement vertical du texte */
    margin: 0 !important; /* <----- change/modifie la marge (0) */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
  }

  /* Icons/Lang/Cart row */
  #header .block_right{
    display: flex !important; /* <----- change/modifie le layout de la rangée icônes */
    width: 100% !important; /* <----- change/modifie la largeur */
    flex-wrap: wrap !important; /* <----- change/modifie le wrap */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    justify-content: center !important; /* <----- change/modifie le centrage */
    gap: 14px !important; /* <----- change/modifie l’espace entre icônes */
    margin: 24px 0 0 !important; /* <----- change/modifie la marge (pousse vers le bas) */
    pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
  }

  #header .extra_language_block,
  #header #languages-block-top{
    position: relative !important; /* <----- change/modifie le contexte (relative) */
    float: none !important; /* <----- change/modifie le float (none) */
    margin: 0 !important; /* <----- change/modifie la marge (0) */
  }

  #header .extra_language_block a,
  #header #languages-block-top a{
    position: relative !important; /* <----- change/modifie le contexte (relative) */
    top: 18px !important; /* <----- change/modifie le décalage vertical */
    left: 12px !important; /* <----- change/modifie le décalage horizontal */
  }

  /* Menu trigger position on mobile */
  #iqitmegamenu-horizontal #cbp-hrmenu > ul{
    left: 0 !important; /* <----- change/modifie l’offset gauche */
    justify-content: flex-start !important; /* <----- change/modifie l’alignement (début) */
  }

  /* Sticky bar on scroll */
  #iqitmegamenu-horizontal.cbp-sticky{
    position: fixed !important; /* <----- change/modifie le type sticky (fixed) */
    top: 0 !important; /* <----- change/modifie la position en haut */
    left: 0 !important; /* <----- change/modifie l’ancrage gauche */
    right: 0 !important; /* <----- change/modifie l’ancrage droit */
    width: 100% !important; /* <----- change/modifie la largeur */
    z-index: 75000 !important; /* <----- change/modifie la priorité sticky mobile */
    background: #fff !important; /* <----- change/modifie le fond sticky */

    transform: none !important; /* <----- change/modifie le transform sticky */
    min-height: 50px !important; /* <----- change/modifie la hauteur minimale sticky */
  }

  /* Keep hamburger visible */
  #iqitmegamenu-horizontal.cbp-sticky li.cbp-hrmenu-tab,
  #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger,
  #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger-wrapper{
    position: fixed !important; /* <----- change/modifie le positionnement (fixed) */
    top: 8px !important; /* <----- change/modifie la distance du haut */
    left: 10px !important; /* <----- change/modifie la distance de gauche */
    right: auto !important; /* <----- change/modifie l’ancrage droite (désactivé) */
    z-index: 75001 !important; /* <----- change/modifie la priorité au-dessus du menu sticky */

    display: block !important; /* <----- change/modifie l’affichage */
    visibility: visible !important; /* <----- change/modifie la visibilité */
    opacity: 1 !important; /* <----- change/modifie l’opacité */
  }

  /* Small logo position */
  #header_logo{
    position: fixed !important; /* <----- change/modifie le positionnement du logo (fixed) */
    top: 6px !important; /* <----- change/modifie la position verticale */
    left: 50% !important; /* <----- change/modifie la position horizontale (50% = centre) */
    right: auto !important; /* <----- change/modifie l’ancrage droite */
    transform: translateX(-50%) !important; /* <----- change/modifie le centrage réel du logo */
    z-index: 75001 !important; /* <----- change/modifie la priorité du logo sticky */
    display: block !important; /* <----- change/modifie l’affichage */
  }

  /* When sticky, logo far right (NOTE: requires :has() support) */
  #header:has(#iqitmegamenu-horizontal.cbp-sticky) #header_logo{
    left: auto !important; /* <----- change/modifie l’ancrage gauche (désactivé) */
    right: 12px !important; /* <----- change/modifie la distance depuis la droite */
    transform: none !important; /* <----- change/modifie le transform (pas de centrage) */
  }

  #header_logo img{
    max-height: 40px !important; /* <----- change/modifie la hauteur max du logo (mobile sticky) */
    width: auto !important; /* <----- change/modifie la largeur (auto) */
  }

  /* Cog dropdown anchor */
  #header .header_user{
    position: relative !important; /* <----- change/modifie le contexte du dropdown */
  }
  #header .header_user .toogle_content,
  #header .header_user .toggle_content{
    left: auto !important; /* <----- change/modifie l’ancrage gauche */
    right: -200px !important; /* <----- change/modifie le décalage droite (pousse vers l’extérieur) */
    top: 100% !important; /* <----- change/modifie la position sous l’icône */
  }
}

/* =======================================================
   HOME visible ONLY when scrolled (sticky)
======================================================= */
#iqitmegamenu-horizontal:not(.cbp-sticky) #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13{
  display: none !important; /* <----- change/modifie l’affichage du HOME quand NON sticky (caché) */
}
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13{
  display: inline-block !important; /* <----- change/modifie l’affichage du HOME quand sticky (visible) */
}

/* =======================================================
   CATEGORY 220 banner (LIQUIDATION / CLEARANCE)
======================================================= */
@media (max-width: 767px){
  .cms_top .img_content a[href*="220-liquidation"],
  .cms_top .img_content a[href*="220-clearance"]{
    display: block !important; /* <----- change/modifie l’affichage du lien bannière (visible) */
    height: auto !important; /* <----- change/modifie la hauteur (auto) */
    overflow: visible !important; /* <----- change/modifie le débordement (visible) */
  }

  .cms_top .img_content a[href*="220-liquidation"] > img,
  .cms_top .img_content a[href*="220-clearance"] > img{
    width: 100% !important; /* <----- change/modifie la largeur de l’image (plein conteneur) */
    height: auto !important; /* <----- change/modifie la hauteur (auto) */
    max-height: none !important; /* <----- change/modifie la hauteur max (aucune limite) */
    display: block !important; /* <----- change/modifie l’affichage */
    object-fit: initial !important; /* <----- change/modifie le recadrage (initial = défaut) */
  }
}

@media (min-width: 768px){
  .cms_top .img_content a[href*="220-liquidation"],
  .cms_top .img_content a[href*="220-clearance"]{
    display: block !important; /* <----- change/modifie l’affichage */
    height: 360px !important; /* <----- change/modifie la hauteur bannière (desktop) */
    overflow: hidden !important; /* <----- change/modifie le recadrage (cache ce qui dépasse) */
  }

  .cms_top .img_content a[href*="220-liquidation"] > img,
  .cms_top .img_content a[href*="220-clearance"] > img{
    width: 100% !important; /* <----- change/modifie la largeur image */
    height: 360px !important; /* <----- change/modifie la hauteur image (match conteneur) */
    max-height: none !important; /* <----- change/modifie la hauteur max */
    display: block !important; /* <----- change/modifie l’affichage */
    object-fit: cover !important; /* <----- change/modifie le recadrage (cover = remplit en coupant) */
  }
}

/* =======================================================
   TRUE CENTER IGNORING HOME (HOME has 0 width in layout)
======================================================= */
@media (min-width: 768px){
  #iqitmegamenu-horizontal #cbp-hrmenu > ul{
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
  }

  #iqitmegamenu-horizontal #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13{
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  #iqitmegamenu-horizontal #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13 > a{
    position: absolute !important;

    /* ===== EN (par défaut) ===== */
    left: -195px !important;

    top: 50% !important;
    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;

    pointer-events: auto !important;
    z-index: 5 !important;
    white-space: nowrap !important;
  }

  /* ===== FR uniquement ===== */
  html[lang^="fr"]
  #iqitmegamenu-horizontal #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13 > a{
    left: -155px !important; /* -195px + 42px */
  }
}

/* =======================================================
   MOBILE ONLY: Search + Menu sticky stack (NO GAP)
======================================================= */
@media (max-width: 767px){

  :root{
    --sticky-search-h: 46px; /* <----- change/modifie la hauteur de la barre search sticky (mobile) */
    --sticky-menu-h: 50px; /* <----- change/modifie la hauteur du menu sticky (mobile) */
    --sticky-gap: 0px; /* <----- change/modifie l’espace entre search et menu sticky */
  }

  @supports selector(:has(*)) {

    #header:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content{
      position: fixed !important; /* <----- change/modifie le positionnement sticky (fixed) */
      top: 0 !important; /* <----- change/modifie la position en haut */
      left: 0 !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */

      width: 100vw !important; /* <----- change/modifie la largeur (plein viewport) */
      max-width: none !important; /* <----- change/modifie la largeur max */
      margin: 0 !important; /* <----- change/modifie la marge */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      height: var(--sticky-search-h) !important; /* <----- change/modifie la hauteur via variable */
      margin: 0 !important; /* <----- change/modifie la marge (répété, garde 0) */
      padding: 6px 10px !important; /* <----- change/modifie le padding interne (confort) */

      display: flex !important; /* <----- change/modifie le layout */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      background: rgba(255,255,255,0.75) !important; /* <----- change/modifie le fond translucide sticky */
      border-radius: 0 !important; /* <----- change/modifie l’arrondi */
      box-shadow: none !important; /* <----- change/modifie l’ombre */

      z-index: 99999 !important; /* <----- change/modifie la priorité (au-dessus) */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
      transform: none !important; /* <----- change/modifie le transform */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li:first-child{
      display: none !important; /* <----- change/modifie l’affichage du label en sticky */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      float: none !important; /* <----- change/modifie le float */
      width: 100% !important; /* <----- change/modifie la largeur */
      max-width: 520px !important; /* <----- change/modifie la largeur max */
      flex: 0 0 100% !important; /* <----- change/modifie la place dans flex */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      display: block !important; /* <----- change/modifie l’affichage */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content input#search_query_menu{
      width: 100% !important; /* <----- change/modifie la largeur input sticky */
      height: calc(var(--sticky-search-h) - 12px) !important; /* <----- change/modifie la hauteur (via variable) */
      line-height: calc(var(--sticky-search-h) - 12px) !important; /* <----- change/modifie l’alignement vertical */
      margin: 0 !important; /* <----- change/modifie la marge */

      background: rgba(255,255,255,0.78) !important; /* <----- change/modifie le fond (plus opaque) */
      backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou arrière-plan (effet verre) */
      -webkit-backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou (Safari) */
    }

    #iqitmegamenu-horizontal.cbp-sticky{
      position: fixed !important; /* <----- change/modifie le positionnement sticky */
      top: var(--sticky-search-h) !important; /* <----- change/modifie la position sous la search */
      left: 0 !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */
      width: 100% !important; /* <----- change/modifie la largeur */

      background: #fff !important; /* <----- change/modifie le fond */
      box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; /* <----- change/modifie l’ombre (profondeur) */

      transform: none !important; /* <----- change/modifie le transform */
      z-index: 99998 !important; /* <----- change/modifie la priorité (juste sous la search) */
    }

    #iqitmegamenu-horizontal.cbp-sticky li.cbp-hrmenu-tab,
    #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger,
    #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger-wrapper{
      position: fixed !important; /* <----- change/modifie le positionnement */
      top: calc(var(--sticky-search-h) + 8px) !important; /* <----- change/modifie la position verticale */
      z-index: 100000 !important; /* <----- change/modifie la priorité */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky) #header_logo{
      position: fixed !important; /* <----- change/modifie le positionnement du logo */
      top: calc(var(--sticky-search-h) + 6px) !important; /* <----- change/modifie la position verticale */
      z-index: 100000 !important; /* <----- change/modifie la priorité */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #page{
      padding-top: calc(var(--sticky-search-h) + var(--sticky-menu-h)) !important; /* <----- change/modifie le padding-top pour éviter que le contenu passe sous les barres */
    }
  }
}

/* ======================================================= 
   MOBILE sticky: show 3 custom links inside burger ONLY when sticky
======================================================= */
@media (max-width: 767px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .header_user_info,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .shopping_cart,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header #languages-block-top,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .extra_language_block{
      display: none !important; /* <----- change/modifie l’affichage (cache ces blocs en sticky) */
    }

    #iqitmegamenu-horizontal a[href*="/my-account"],
    #iqitmegamenu-horizontal a[href*="/order"],
    #iqitmegamenu-horizontal a[href*="controller=language"]{
      display: none !important; /* <----- change/modifie l’affichage (cache ces liens par défaut) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/my-account"],
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/order"],
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="controller=language"]{
      display: inline-flex !important; /* <----- change/modifie l’affichage (montre en sticky) */

      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      width: 44px !important; /* <----- change/modifie la largeur “bouton” */
      height: 44px !important; /* <----- change/modifie la hauteur “bouton” */

      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      border-radius: 10px !important; /* <----- change/modifie l’arrondi */
      border: 1px solid rgba(0,0,0,0.18) !important; /* <----- change/modifie la bordure (fine, gris clair) */

      background: rgba(255,255,255,0.92) !important; /* <----- change/modifie le fond */
      color: #000 !important; /* <----- change/modifie la couleur du texte */
      text-decoration: none !important; /* <----- change/modifie le soulignement (none) */

      font-weight: 800 !important; /* <----- change/modifie le gras */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
      white-space: nowrap !important; /* <----- change/modifie le wrap */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="controller=language"]{
      width: auto !important; /* <----- change/modifie la largeur (auto pour FR/EN) */
      padding: 0 12px !important; /* <----- change/modifie le padding horizontal */
      font-size: 14px !important; /* <----- change/modifie la taille du texte FR/EN */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/my-account"]{ margin-right: 12px !important; } /* <----- change/modifie l’espace à droite (séparation boutons) */

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/order"]{ margin-right: 12px !important; } /* <----- change/modifie l’espace à droite (séparation boutons) */
  }
}

/* =======================================================
   MOBILE sticky: ACTION ROW (?? / ?? / EN-FR)
   Uses the REAL injected language switcher block instead of hijacking menu items.
   IMPORTANT: This does NOT touch #iqitmegamenu-accordion items by position.
======================================================= */
@media (max-width: 767px){
  @supports selector(:has(*)) {

    /* 1) When sticky, show the action row container */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-mobile .panda-mobile-actionrow{
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 10px 0 !important;
      margin: 0 !important;
    }

    /* 2) When NOT sticky, hide the action row entirely (so your normal menu is clean) */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #iqitmegamenu-mobile .panda-mobile-actionrow{
      display: none !important;
    }

    /* 3) Base "button" look for items in the row */
    #iqitmegamenu-mobile .panda-mobile-actionrow a,
    #iqitmegamenu-mobile .panda-mobile-actionrow .panda-mobile-lang-switcher a{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 44px !important;
      height: 44px !important;

      border-radius: 10px !important;
      border: 1px solid rgba(0,0,0,0.18) !important;
      background: rgba(255,255,255,0.92) !important;

      text-decoration: none !important;

      position: relative !important;
      overflow: hidden !important;

      padding: 0 !important;
      margin: 0 !important;

      box-shadow: none !important;
      background-image: none !important;

      /* hide any real text inside (we paint via ::before) */
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
    }

    /* 4) Overlay label/icon */
    #iqitmegamenu-mobile .panda-mobile-actionrow a::before,
    #iqitmegamenu-mobile .panda-mobile-actionrow .panda-mobile-lang-switcher a::before{
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #000 !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      pointer-events: none !important;
    }

    /* 5) Settings + Cart icons (you can change these anytime) */
    #iqitmegamenu-mobile .panda-mobile-actionrow a.panda-action-settings::before{
      content: "👤" !important;
      font-size: 20px !important;
    }
    #iqitmegamenu-mobile .panda-mobile-actionrow a.panda-action-cart::before{
      content: "🛒" !important;
      font-size: 20px !important;
    }

    /* 6) Language label (real switcher link underneath) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-mobile .panda-mobile-actionrow .panda-mobile-lang-switcher a::before{
      content: "FR" !important;
      font-size: 14px !important;
      letter-spacing: 0.5px !important;
    }
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-mobile .panda-mobile-actionrow .panda-mobile-lang-switcher a::before{
      content: "EN" !important;
      font-size: 14px !important;
      letter-spacing: 0.5px !important;
    }

/* 7) FIX: show only the other language link, and make it cover the whole button */
#iqitmegamenu-mobile .panda-mobile-lang-switcher{
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
}

/* Hide the title */
#iqitmegamenu-mobile .panda-mobile-lang-switcher .title_top{
  display: none !important;
}

/* Keep UL alive */
#iqitmegamenu-mobile .panda-mobile-lang-switcher ul#first-languages{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Hide current language row */
#iqitmegamenu-mobile .panda-mobile-lang-switcher ul#first-languages > li.selected{
  display: none !important;
}

/* Show the other language row */
#iqitmegamenu-mobile .panda-mobile-lang-switcher ul#first-languages > li:not(.selected){
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* IMPORTANT: target the REAL language link (blocklanguages uses hreflang + rel=alternate) */
#iqitmegamenu-mobile .panda-mobile-lang-switcher a[hreflang],
#iqitmegamenu-mobile .panda-mobile-lang-switcher a[rel~="alternate"]{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;

  /* clickable */
  z-index: 50 !important;
  pointer-events: auto !important;

  /* hide real text (your FR/EN label is drawn by ::before elsewhere) */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
}
  }
}

/* =======================================================
   MOBILE: hide the first 2 menu entries after the icon row
   (removes COMPTE + PANIER duplicates, keeps icon buttons)
======================================================= */
@media (max-width: 767px){

  /* Hide the 1st item AFTER the action row */
  #iqitmegamenu-accordion > li.panda-mobile-actionrow-li + li{
    display: none !important;
  }

  /* Hide the 2nd item AFTER the action row */
  #iqitmegamenu-accordion > li.panda-mobile-actionrow-li + li + li{
    display: none !important;
  }

  /* Safety: never hide the icon row itself */
  #iqitmegamenu-accordion > li.panda-mobile-actionrow-li{
    display: list-item !important;
  }
}


/* ========================================================= 
   PRESTASHOP 1.6 – SUBCATEGORIES = TITLE ABOVE LINE + TEXT NAV ROW
========================================================= */

body#category #subcategories .subcategory-image,
body#category #subcategories .subcategory-image *,
body#category #subcategories ul li img,
body#category #subcategories ul li .img,
body#category #subcategories ul li .img *,
body#category #subcategories ul li a img,
body#category #subcategories ul li a img{
  display: none !important; /* <----- change/modifie l’affichage des images (les cache) */
}

body#category #subcategories ul{
  list-style: none !important; /* <----- change/modifie les puces (none) */
  margin: 16px 0 0 0 !important; /* <----- change/modifie la marge au-dessus */
  padding: 0 !important; /* <----- change/modifie le padding */

  display: flex !important; /* <----- change/modifie le layout (flex) */
  flex-wrap: nowrap !important; /* <----- change/modifie le wrap */
  justify-content: center !important; /* <----- change/modifie le centrage */
  gap: 26px !important; /* <----- change/modifie l’espace entre sous-catégories */
  align-items: center !important; /* <----- change/modifie l’alignement vertical */

  border: 0 !important; /* <----- change/modifie la bordure */
  background: transparent !important; /* <----- change/modifie le fond */
}

body#category #subcategories ul li{
  float: none !important; /* <----- change/modifie le float */
  width: auto !important; /* <----- change/modifie la largeur */
  height: auto !important; /* <----- change/modifie la hauteur */

  flex: 0 0 auto !important; /* <----- change/modifie la place dans flex */
  text-align: center !important; /* <----- change/modifie l’alignement du texte */

  margin: 0 !important; /* <----- change/modifie la marge */
  padding: 0 !important; /* <----- change/modifie le padding */

  border: 0 !important; /* <----- change/modifie la bordure */
  background: transparent !important; /* <----- change/modifie le fond */
  box-shadow: none !important; /* <----- change/modifie l’ombre */
}

body#category #subcategories ul li a,
body#category #subcategories ul li .subcategory-name{
  display: inline-block !important; /* <----- change/modifie l’affichage du texte */
  font-size: 13px !important; /* <----- change/modifie la taille du texte */
  font-weight: 800 !important; /* <----- change/modifie le gras */
  color: #000 !important; /* <----- change/modifie la couleur */
  text-decoration: none !important; /* <----- change/modifie le soulignement */
  padding: 2px 4px !important; /* <----- change/modifie le padding autour du texte */
  white-space: nowrap !important; /* <----- change/modifie le wrap */
}

@media (max-width: 991px){
  body#category #subcategories ul{
    flex-wrap: wrap !important; /* <----- change/modifie le wrap (tablettes) */
    justify-content: center !important; /* <----- change/modifie le centrage */
    gap: 18px !important; /* <----- change/modifie l’espace (tablettes) */
  }

  body#category #subcategories ul li{
    flex: 0 0 auto !important; /* <----- change/modifie la place dans flex */
  }
}

/* =========================================================
   CATEGORY PAGE: reduce space between main menu and the line
========================================================= */
body#category #columns{
  padding-top: 0 !important; /* <----- change/modifie l’espace au-dessus du contenu */
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
}

body#category .breadcrumb{
  margin-bottom: 10px !important; /* <----- change/modifie l’espace sous le breadcrumb */
  padding-bottom: 0 !important; /* <----- change/modifie le padding bas */
}

body#category #subcategories{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

body#category #subcategories > h3,
body#category #subcategories .page-subheading{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

/* =========================================================
   MOBILE ONLY – Subcategories: centered + even on ALL mobiles
========================================================= */
@media (max-width: 767px){

  body#category #subcategories{
    width: 100% !important; /* <----- change/modifie la largeur */
    margin-left: auto !important; /* <----- change/modifie le centrage */
    margin-right: auto !important; /* <----- change/modifie le centrage */
  }

  body#category #subcategories ul::before,
  body#category #subcategories ul::after{
    content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
    display: none !important; /* <----- change/modifie l’affichage (supprimé) */
  }

  body#category #subcategories ul > li:empty{
    display: none !important; /* <----- change/modifie l’affichage des items vides (cachés) */
  }

  body#category #subcategories ul{
    list-style: none !important; /* <----- change/modifie les puces */

    width: 100% !important; /* <----- change/modifie la largeur */
    max-width: 100% !important; /* <----- change/modifie la largeur max */
    margin: 12px auto 0 auto !important; /* <----- change/modifie la marge */
    padding: 0 12px !important; /* <----- change/modifie le padding horizontal */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

    display: grid !important; /* <----- change/modifie le layout (grid) */
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important; /* <----- change/modifie la taille mini des colonnes (70px) */

    justify-content: center !important; /* <----- change/modifie l’alignement global */
    justify-items: center !important; /* <----- change/modifie l’alignement des items */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */

    grid-auto-flow: row dense !important; /* <----- change/modifie le placement auto des items */

    column-gap: clamp(10px, 3vw, 18px) !important; /* <----- change/modifie l’écart horizontal (responsive) */
    row-gap: 0px !important; /* <----- change/modifie l’écart vertical */

    border: 0 !important; /* <----- change/modifie la bordure */
    background: transparent !important; /* <----- change/modifie le fond */
  }

  body#category #subcategories ul li{
    float: none !important; /* <----- change/modifie le float */
    clear: none !important; /* <----- change/modifie le clear */

    width: auto !important; /* <----- change/modifie la largeur */
    margin: 0 !important; /* <----- change/modifie la marge */
    padding: 0 !important; /* <----- change/modifie le padding */

    text-align: center !important; /* <----- change/modifie l’alignement texte */
    border: 0 !important; /* <----- change/modifie la bordure */
    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
  }

  body#category #subcategories ul li a,
  body#category #subcategories ul li .subcategory-name{
    display: inline-block !important; /* <----- change/modifie l’affichage */

    font-size: 12.5px !important; /* <----- change/modifie la taille du texte */
    font-weight: 800 !important; /* <----- change/modifie le gras */
    color: #000 !important; /* <----- change/modifie la couleur */
    text-decoration: none !important; /* <----- change/modifie le soulignement */

    padding: 2px 2px !important; /* <----- change/modifie le padding */
    letter-spacing: 0.3px !important; /* <----- change/modifie l’espacement des lettres */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
  }
}

/* =========================================================
   DESKTOP ONLY – Subcategories FOLLOW the IQIT sticky (TIGHT + NO TITLE)
========================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{ --iqit-sticky-h: 45px; } /* <----- change/modifie la hauteur du menu sticky (pour placer subcats dessous) */

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories{
      position: fixed !important; /* <----- change/modifie le positionnement (fixe sous le menu) */
      top: var(--iqit-sticky-h) !important; /* <----- change/modifie la position sous le sticky (via variable) */
      left: 0 !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */
      width: 100% !important; /* <----- change/modifie la largeur */

      z-index: 39999 !important; /* <----- change/modifie la priorité */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      background: rgba(255,255,255,0.92) !important; /* <----- change/modifie le fond translucide */
      backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou */
      -webkit-backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou (Safari) */

      border: 0 !important; /* <----- change/modifie la bordure */
      box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; /* <----- change/modifie l’ombre */
      transform: none !important; /* <----- change/modifie le transform */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories > h3,
    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories .page-subheading{
      display: none !important; /* <----- change/modifie l’affichage du titre (caché) */
      height: 0 !important; /* <----- change/modifie la hauteur */
      line-height: 0 !important; /* <----- change/modifie la hauteur de ligne */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      border: 0 !important; /* <----- change/modifie la bordure */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul{
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 6px 14px !important; /* <----- change/modifie le padding interne */
      display: flex !important; /* <----- change/modifie le layout */
      justify-content: center !important; /* <----- change/modifie le centrage */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      flex-wrap: nowrap !important; /* <----- change/modifie le wrap */
      gap: 26px !important; /* <----- change/modifie l’espace entre liens */

      background: transparent !important; /* <----- change/modifie le fond */
      border: 0 !important; /* <----- change/modifie la bordure */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul li{
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
    }
    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul li a,
    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul li .subcategory-name{
      padding: 0 4px !important; /* <----- change/modifie le padding horizontal */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #columns{
      padding-top: 80px !important; /* <----- change/modifie l’espace au-dessus du contenu (compense barres fixes) */
    }

    body#category:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #columns{
      padding-top: 0 !important; /* <----- change/modifie l’espace au-dessus (normal) */
    }
  }
}

/* =========================================================
   CATEGORY – Remove "Subcategories" title + phantom spacing
========================================================= */
body#category #subcategories .subcategory-heading,
body#category #subcategories > p.subcategory-heading,
body#category #subcategories > h3,
body#category #subcategories .page-subheading{
  display: none !important; /* <----- change/modifie l’affichage (cache titres) */
  margin: 0 !important; /* <----- change/modifie la marge */
  padding: 0 !important; /* <----- change/modifie le padding */
  height: 0 !important; /* <----- change/modifie la hauteur */
}

body#category #subcategories{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

body#category #subcategories ul{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

body#category #subcategories::before,
body#category #subcategories::after,
body#category #subcategories ul::before,
body#category #subcategories ul::after{
  content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
  display: none !important; /* <----- change/modifie l’affichage (supprimé) */
}

/* IQIT MegaMenu – remove root category title inside dropdown */
#iqitmegamenu-horizontal .cbp-hrsub .cbp-column-title,
#iqitmegamenu-horizontal .cbp-hrsub h4,
#iqitmegamenu-horizontal .cbp-hrsub .block-title {
  display: none !important; /* <----- change/modifie l’affichage des titres dans le dropdown (cachés) */
  height: 0 !important; /* <----- change/modifie la hauteur */
  margin: 0 !important; /* <----- change/modifie la marge */
  padding: 0 !important; /* <----- change/modifie le padding */
}

/* =======================================================
   DESKTOP ONLY: top-of-page divider under main menu (NON-sticky)
======================================================= */
@media (min-width: 768px){

  :root{
    --menu-line-w: 1220px; /* <----- change/modifie la largeur max de la ligne sous le menu */
    --menu-line-thickness: 0.5px; /* <----- change/modifie l’épaisseur de la ligne */
    --menu-line-color: rgba(0,0,0,0.15); /* <----- change/modifie la couleur (et opacité) de la ligne */
    --menu-line-inset: 30px; /* <----- change/modifie la marge latérale (ligne moins large que l’écran) */
  }

  #iqitmegamenu-horizontal:not(.cbp-sticky){
    position: relative !important; /* <----- change/modifie le contexte pour ::after */
  }

  #iqitmegamenu-horizontal:not(.cbp-sticky)::after{
    content: "" !important; /* <----- change/modifie le contenu pseudo-élément (ligne) */
    position: absolute !important; /* <----- change/modifie le positionnement de la ligne */
    left: 50% !important; /* <----- change/modifie l’ancrage horizontal (centre) */
    transform: translateX(-50%) !important; /* <----- change/modifie le centrage réel */
    bottom: 0 !important; /* <----- change/modifie la position verticale (bas) */

    width: min(var(--menu-line-w), calc(100% - var(--menu-line-inset))) !important; /* <----- change/modifie la largeur de la ligne */
    height: var(--menu-line-thickness) !important; /* <----- change/modifie l’épaisseur de la ligne */
    background: var(--menu-line-color) !important; /* <----- change/modifie la couleur de la ligne */

    pointer-events: none !important; /* <----- change/modifie la capture des clics (désactivée) */
  }

  #iqitmegamenu-horizontal.cbp-sticky::after{
    content: none !important; /* <----- change/modifie l’affichage de la ligne en sticky (désactivée) */
  }

  #iqitmegamenu-horizontal:not(.cbp-sticky) .container,
  #iqitmegamenu-horizontal:not(.cbp-sticky) .container-fluid{
    border-bottom: none !important; /* <----- change/modifie la bordure sous container (supprimée) */
  }
}

.breadcrumb,
.breadcrumb a{
  display: block !important; /* <----- change/modifie l’affichage (force visible) */
  visibility: visible !important; /* <----- change/modifie la visibilité */
  opacity: 1 !important; /* <----- change/modifie l’opacité */
  pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
}

/* =======================================================
   PS 1.6 — "nb items per page" (DESKTOP ONLY)
======================================================= */
@media (min-width: 768px){

  .content_sortPagiBar .nbrItemPage{
    margin-left: -600px !important; /* <----- change/modifie le décalage horizontal du bloc (gros shift à gauche) */
  }

  .content_sortPagiBar .nbrItemPage .selector1{
    display: inline-flex !important; /* <----- change/modifie l’affichage */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
    gap: 8px !important; /* <----- change/modifie l’espace entre éléments */

    position: relative !important; /* <----- change/modifie le contexte */
    overflow: visible !important; /* <----- change/modifie le débordement */
    background: transparent !important; /* <----- change/modifie le fond */
  }

  .content_sortPagiBar .nbrItemPage label{
    display: none !important; /* <----- change/modifie l’affichage du label (caché) */
  }

  .content_sortPagiBar .nbrItemPage select{
    margin: 0 !important; /* <----- change/modifie la marge */
    padding: 0 !important; /* <----- change/modifie le padding */
    height: 24px !important; /* <----- change/modifie la hauteur du select */
    vertical-align: middle !important; /* <----- change/modifie l’alignement vertical */
    background: transparent !important; /* <----- change/modifie le fond */
  }

  .content_sortPagiBar .nbrItemPage .selector1 > span{
    display: block !important; /* <----- change/modifie l’affichage */
    height: 24px !important; /* <----- change/modifie la hauteur */
    line-height: 24px !important; /* <----- change/modifie l’alignement vertical */
    padding-right: 20px !important; /* <----- change/modifie l’espace pour la flèche */
    text-align: left !important; /* <----- change/modifie l’alignement du texte */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
    text-indent: 0px !important; /* <----- change/modifie l’indentation */
    min-width: 48px !important; /* <----- change/modifie la largeur mini */
    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
    border-radius: 0 !important; /* <----- change/modifie l’arrondi */
  }

  .content_sortPagiBar .nbrItemPage .selector1:before,
  .content_sortPagiBar .nbrItemPage .selector1:after,
  .content_sortPagiBar .nbrItemPage .selector1 > span:before,
  .content_sortPagiBar .nbrItemPage .selector1 > span:after,
  .content_sortPagiBar .nbrItemPage .selector1 i,
  .content_sortPagiBar .nbrItemPage .selector1 b{
    background: transparent !important; /* <----- change/modifie le fond des décorations */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
  }

  .content_sortPagiBar .nbrItemPage > span{
    display: inline-block !important; /* <----- change/modifie l’affichage */
    margin-left: 6px !important; /* <----- change/modifie l’espace à gauche */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
  }

  .content_sortPagiBar .nbrItemPage br{
    display: none !important; /* <----- change/modifie l’affichage des retours ligne (cachés) */
  }

}

/* =======================================================
   PS 1.6 — TRI + "NB ITEMS PER PAGE" (MOBILE ONLY)
======================================================= */
@media (max-width: 767px){

  .content_sortPagiBar .sortPagiBar{
    display: flex !important; /* <----- change/modifie le layout (flex) */
    flex-direction: column !important; /* <----- change/modifie l’orientation (colonne) */
    align-items: center !important; /* <----- change/modifie le centrage */
    justify-content: center !important; /* <----- change/modifie le centrage */
    gap: 10px !important; /* <----- change/modifie l’espace entre blocs */
    width: 100% !important; /* <----- change/modifie la largeur */
    text-align: center !important; /* <----- change/modifie l’alignement texte */
  }

  .content_sortPagiBar #productsSortForm{
    width: auto !important; /* <----- change/modifie la largeur */
    max-width: 90vw !important; /* <----- change/modifie la largeur max (évite overflow) */
    display: flex !important; /* <----- change/modifie le layout */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar #productsSortForm .selector1{
    width: 100% !important; /* <----- change/modifie la largeur */
    display: inline-flex !important; /* <----- change/modifie l’affichage */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar #productsSortForm select{
    width: 100% !important; /* <----- change/modifie la largeur */
    max-width: 90vw !important; /* <----- change/modifie la largeur max */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
  }

  .content_sortPagiBar .nbrItemPage{
    margin-left: 0 !important; /* <----- change/modifie la marge gauche */
    width: auto !important; /* <----- change/modifie la largeur */
    max-width: 90vw !important; /* <----- change/modifie la largeur max */
    display: flex !important; /* <----- change/modifie le layout */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar .nbrItemPage .selector1{
    display: inline-flex !important; /* <----- change/modifie l’affichage */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
    gap: 8px !important; /* <----- change/modifie l’espace */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar .nbrItemPage label{
    display: none !important; /* <----- change/modifie l’affichage du label */
  }

  .content_sortPagiBar .nbrItemPage br{
    display: none !important; /* <----- change/modifie l’affichage des retours ligne */
  }

  .content_sortPagiBar .nbrItemPage select{
    margin: 0 !important; /* <----- change/modifie la marge */
    padding: 0 !important; /* <----- change/modifie le padding */
    height: 24px !important; /* <----- change/modifie la hauteur */
    vertical-align: middle !important; /* <----- change/modifie l’alignement vertical */
  }

  .content_sortPagiBar .nbrItemPage .selector1 > span{
    display: block !important; /* <----- change/modifie l’affichage */
    height: 24px !important; /* <----- change/modifie la hauteur */
    line-height: 24px !important; /* <----- change/modifie l’alignement vertical */
    padding-right: 20px !important; /* <----- change/modifie l’espace pour la flèche */
    text-align: left !important; /* <----- change/modifie l’alignement texte */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
    text-indent: 0px !important; /* <----- change/modifie l’indentation */

    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
    border-radius: 0 !important; /* <----- change/modifie l’arrondi */
  }

  .content_sortPagiBar .nbrItemPage .selector1:before,
  .content_sortPagiBar .nbrItemPage .selector1:after,
  .content_sortPagiBar .nbrItemPage .selector1 > span:before,
  .content_sortPagiBar .nbrItemPage .selector1 > span:after{
    background: transparent !important; /* <----- change/modifie le fond décoratif */
    box-shadow: none !important; /* <----- change/modifie l’ombre décorative */
  }

  .content_sortPagiBar .nbrItemPage > span{
    display: inline-block !important; /* <----- change/modifie l’affichage */
    margin-left: 6px !important; /* <----- change/modifie l’espace à gauche */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
  }
}

/* =======================================================
   MOBILE — Hamburger menu (déplacement horizontal + vertical)
======================================================= */
@media (max-width: 767px){

  #iqitmegamenu-horizontal #iqitmegamenu-shower{
    position: relative !important; /* <----- change/modifie le contexte */
    left: -20px !important; /* <----- change/modifie le décalage horizontal du hamburger */
    top: 0px !important; /* <----- change/modifie le décalage vertical du hamburger */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower .iqitmegamenu-icon{
    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
    border-radius: 0 !important; /* <----- change/modifie l’arrondi */
    width: 36px !important; /* <----- change/modifie la largeur du bouton */
    height: 36px !important; /* <----- change/modifie la hauteur du bouton */
    position: relative !important; /* <----- change/modifie le contexte pour ::before */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower .iqitmegamenu-icon i{
    opacity: 0 !important; /* <----- change/modifie l’opacité (cache l’icône originale) */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower .iqitmegamenu-icon::before{
    content: "" !important; /* <----- change/modifie le contenu (les 3 barres) */
    position: absolute !important; /* <----- change/modifie le positionnement */
    left: 8px !important; /* <----- change/modifie la marge interne gauche */
    right: 8px !important; /* <----- change/modifie la marge interne droite */
    top: 10px !important; /* <----- change/modifie la position verticale des barres */
    height: 2px !important; /* <----- change/modifie l’épaisseur des barres */
    background: #000 !important; /* <----- change/modifie la couleur des barres */
    box-shadow: 0 6px 0 #000, 0 12px 0 #000 !important; /* <----- change/modifie l’écart entre les 3 barres */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower span{
    margin-left: 6px !important; /* <----- change/modifie l’espace entre icône et texte */
    font-weight: 800; /* <----- change/modifie le gras du texte */
  }
}


/* =======================================================
   ✅ UNIFORMITÉ GRANDS ÉCRANS (TV / 2K / 4K)
   - limite le “gonflement” sans casser ton responsive
   - ne touche pas mobile
   - ne change pas tes fonctions
======================================================= */

/* 1) Empêche le layout de s'étirer trop large */
@media (min-width: 1400px){
  #page, #wrapper, .columns-container{
    max-width: 1400px !important;   /* <----- change/modifie la largeur max du site sur très grands écrans */
    margin-left: auto !important; /* <----- change/modifie le centrage */
    margin-right: auto !important; /* <----- change/modifie le centrage */
  }
}

/* 2) Empêche les grosses bannières d'être gigantesques */
@media (min-width: 1200px){
  .cms_top .img_content a[href*="220-liquidation"],
  .cms_top .img_content a[href*="220-clearance"]{
    height: 240px !important;       /* <----- change/modifie la hauteur bannière (grands écrans) */
  }

  .cms_top .img_content a[href*="220-liquidation"] > img,
  .cms_top .img_content a[href*="220-clearance"] > img{
    height: 240px !important; /* <----- change/modifie la hauteur image (match conteneur) */
  }
}

/* 3) Rend le menu/ligne plus cohérents quand le site est centré */
@media (min-width: 1400px){
  :root{
    --menu-line-w: 1220px;          /* <----- change/modifie la largeur max de la ligne sous menu (grands écrans) */
    --menu-line-inset: 30px; /* <----- change/modifie les marges latérales de la ligne (grands écrans) */
  }
}


/* =======================================================
   FINAL OVERRIDE — LOGO SIZE = "AVANT TON BLOCK" + TV SAFE
   Objectif:
   - Même taille qu’avant (ta 2e photo) sur PC / écrans normaux
   - Sur TV, le logo ne grossit PAS plus que le reste
======================================================= */

@media (min-width: 768px){

  /* Le wrapper ne doit JAMAIS scaler */
  #header_logo,
  #header_logo a{
    transform: none !important; /* <----- change/modifie le scaling/translation du wrapper logo (désactivé) */
  }

  /* ✅ Taille desktop "comme avant" (ajustée) */
  #header_logo img{
    width: auto !important; /* <----- change/modifie la largeur du logo (auto) */
    height: auto !important; /* <----- change/modifie la hauteur du logo (auto) */

    /* 👇 AVANT: ton rendu correspond beaucoup plus à ~90px qu’à 60px */
    max-height: 140px !important; /* <----- change/modifie la hauteur max du logo (desktop normal) */

    max-width: 100% !important; /* <----- change/modifie la largeur max (sécurité) */
  }

  /* ✅ Même règle en sticky (aucune variation) */
  #iqitmegamenu-horizontal.cbp-sticky ~ #header #header_logo img,
  #iqitmegamenu-horizontal.cbp-sticky #header_logo img{
    max-height: 90px !important; /* <----- change/modifie la hauteur max du logo quand sticky */
  }
}

/* MOBILE: on laisse ton comportement mobile intact */
@media (max-width: 767px){
  #header_logo img{
    max-height: 40px !important; /* <----- change/modifie la hauteur max du logo (mobile) */
    width: auto !important; /* <----- change/modifie la largeur */
    height: auto !important; /* <----- change/modifie la hauteur */
  }
}

/* =======================================================
   DESKTOP — Sticky search collée au HOME (ZERO overlay)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --home-left-x: -570px; /* <----- change/modifie le décalage du HOME depuis le centre (repère) */
      --home-gap: 2px; /* <----- change/modifie l’espace entre HOME et search sticky */
      --sticky-search-w: 160px; /* <----- change/modifie la largeur du search sticky (desktop) */
      --sticky-h: 45px; /* <----- change/modifie la hauteur du header sticky (desktop) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content{
      position: fixed !important; /* <----- change/modifie le positionnement (fixe au viewport) */
      top: 0 !important; /* <----- change/modifie la position verticale (tout en haut) */

      left: calc(50% + var(--home-left-x) - var(--home-gap) - var(--sticky-search-w)) !important; /* <----- change/modifie la position horizontale (calculée depuis le centre) */
      right: auto !important; /* <----- change/modifie l’ancrage droite */

      height: var(--sticky-h) !important; /* <----- change/modifie la hauteur via variable */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      width: auto !important; /* <----- change/modifie la largeur */
      max-width: none !important; /* <----- change/modifie la largeur max */

      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      justify-content: flex-start !important; /* <----- change/modifie l’alignement horizontal */

      background: transparent !important; /* <----- change/modifie le fond */
      border: none !important; /* <----- change/modifie la bordure */
      box-shadow: none !important; /* <----- change/modifie l’ombre */

      z-index: 80000 !important; /* <----- change/modifie la priorité sticky desktop */
      pointer-events: none !important; /* <----- change/modifie la capture des clics (désactivée sur le wrapper) */

      white-space: nowrap !important; /* <----- change/modifie le wrap */
      overflow: visible !important; /* <----- change/modifie le débordement */
      transform: none !important; /* <----- change/modifie le transform */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content::after{
      content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
      display: none !important; /* <----- change/modifie l’affichage (supprimé) */
      pointer-events: none !important; /* <----- change/modifie la capture des clics */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li:first-child{
      display: none !important; /* <----- change/modifie l’affichage du label en sticky */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      float: none !important; /* <----- change/modifie le float */
      width: auto !important; /* <----- change/modifie la largeur */
      max-width: none !important; /* <----- change/modifie la largeur max */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      pointer-events: auto !important; /* <----- change/modifie la cliquabilité du bloc search */
    }

    /* ✅ IMPORTANT: on NE cache PAS le <p> (sinon l’input disparaît)
       On le transforme en conteneur "shrink" qui n’intercepte rien */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p{
      display: inline-flex !important; /* <----- change/modifie l’affichage (garde l’input visible) */
      width: auto !important; /* <----- change/modifie la largeur */
      max-width: none !important; /* <----- change/modifie la largeur max */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      height: auto !important; /* <----- change/modifie la hauteur */

      pointer-events: none !important; /* <----- change/modifie la capture des clics (désactivée sur <p>) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p::after{
      content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
      display: none !important; /* <----- change/modifie l’affichage (supprimé) */
      pointer-events: none !important; /* <----- change/modifie la capture des clics */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search form{
      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      width: auto !important; /* <----- change/modifie la largeur */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content input#search_query_menu{
      width: var(--sticky-search-w) !important; /* <----- change/modifie la largeur via variable */
      max-width: var(--sticky-search-w) !important; /* <----- change/modifie la largeur max via variable */

      height: 30px !important; /* <----- change/modifie la hauteur de l’input sticky */
      line-height: 30px !important; /* <----- change/modifie l’alignement vertical du texte */

      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
      margin: 0 !important; /* <----- change/modifie la marge */

      background: rgba(255,255,255,0.78) !important; /* <----- change/modifie le fond (effet verre) */
      border: 2px solid rgba(0,0,0,0.25) !important; /* <----- change/modifie l’épaisseur + couleur bordure */
      border-radius: 6px !important; /* <----- change/modifie l’arrondi */
      box-shadow: none !important; /* <----- change/modifie l’ombre */

      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
    }
  }
}

/* ======================================================= 
   DESKTOP — Sticky COGWHEEL (CLAMP anti-fuite au zoom)
   - ne change PAS le centrage du menu (fixed hors du flux)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* Repère: centre (50%) + offset */
      --sticky-cog-x: 635px; /* <----- change/modifie la position X du cog (depuis le centre) */
      --sticky-cog-top: -4px; /* <----- change/modifie la position Y du cog (peut monter/descendre) */
      --sticky-cog-hit: 44px; /* <----- change/modifie la zone cliquable (taille du bouton) */

      /* ✅ Micro-move ultra précis (transform, stable au zoom) */
      --sticky-cog-offset-x: -50px;   /* <----- change/modifie micro déplacement X du cog (transform) */
      --sticky-cog-offset-y: 0px;   /* <----- change/modifie micro déplacement Y du cog (transform) */

      /* ✅ Sécurité bord droit (empêche la fuite à 175/200%) */
      --sticky-right-pad: 10px; /* <----- change/modifie la marge sécurité au bord droit */

      /* Dropdown */
      --sticky-cog-drop-y: 5px; /* <----- change/modifie l’écart vertical entre cog et dropdown */
      --sticky-cog-drop-minw: 280px; /* <----- change/modifie la largeur min du dropdown */
      --sticky-cog-drop-maxw: 280px; /* <----- change/modifie la largeur max du dropdown */
      --sticky-cog-drop-pad: 12px 16px; /* <----- change/modifie le padding interne du dropdown */

      /* ✅ Micro-move dropdown */
      --sticky-cog-drop-offset-x: -250px; /* <----- change/modifie micro déplacement X du dropdown */
      --sticky-cog-drop-offset-y: 0px; /* <----- change/modifie micro déplacement Y du dropdown */
    }

    /* 1) Empêche les wrappers de voler les clics */
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .header_user{
      pointer-events: none !important; /* <----- change/modifie la capture des clics du wrapper (désactivée) */
    }

    /* 2) Lien cog fixed + clamp */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top{
      position: fixed !important; /* <----- change/modifie le positionnement (fixe au viewport) */
      top: var(--sticky-cog-top) !important; /* <----- change/modifie la position verticale via variable */

      /* ✅ Clamp: ne dépasse jamais le bord droit */
      left: clamp(
        0px,
        calc(50% + var(--sticky-cog-x)),
        calc(100vw - var(--sticky-cog-hit) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (clamp anti-débordement) */

      right: auto !important; /* <----- change/modifie l’ancrage droite */

      width: var(--sticky-cog-hit) !important; /* <----- change/modifie la largeur du bouton */
      height: var(--sticky-cog-hit) !important; /* <----- change/modifie la hauteur du bouton */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      opacity: 1 !important; /* <----- change/modifie l’opacité */
      visibility: visible !important; /* <----- change/modifie la visibilité */

      z-index: 80010 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      background: transparent !important; /* <----- change/modifie le fond */

      /* ✅ Micro-move stable au zoom */
      transform: translate(var(--sticky-cog-offset-x), var(--sticky-cog-offset-y)) !important; /* <----- change/modifie micro placement (transform) */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur (transform) */
    }

    /* 3) Icône visible */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top i.icon_cog,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top i.icon_cog::before{
      display: inline-block !important; /* <----- change/modifie l’affichage de l’icône */
      visibility: visible !important; /* <----- change/modifie la visibilité */
      opacity: 1 !important; /* <----- change/modifie l’opacité */
    }

    /* 4) Dropdown cog (clamp aussi) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toogle_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toggle_content{
      position: fixed !important; /* <----- change/modifie le positionnement du dropdown (fixed) */

      top: calc(var(--sticky-cog-top) + var(--sticky-cog-hit) + var(--sticky-cog-drop-y)) !important; /* <----- change/modifie la position sous le cog */

      /* ✅ Clamp pour que le dropdown reste dans l’écran */
      left: clamp(
        0px,
        calc(50% + var(--sticky-cog-x)),
        calc(100vw - var(--sticky-cog-drop-maxw) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (anti-débordement) */

      min-width: var(--sticky-cog-drop-minw) !important; /* <----- change/modifie la largeur min */
      max-width: var(--sticky-cog-drop-maxw) !important; /* <----- change/modifie la largeur max */
      padding: var(--sticky-cog-drop-pad) !important; /* <----- change/modifie le padding */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      z-index: 999999 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      /* centre-ish + micro-move */
      transform: translate(
        calc(-40% + var(--sticky-cog-drop-offset-x)),
        var(--sticky-cog-drop-offset-y)
      ) !important; /* <----- change/modifie micro placement du dropdown (transform) */

      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur (transform) */
    }
  }
}

/* ======================================================= 
   DESKTOP — Sticky CART (CLAMP anti-fuite au zoom)
   - placé à droite du COG
   - ne change PAS le centrage du menu
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ==== COG (référence) ==== */
      --sticky-cog-x: 635px; /* <----- change/modifie repère X du cog */
      --sticky-cog-top: -4px; /* <----- change/modifie repère Y du cog */
      --sticky-cog-hit: 44px; /* <----- change/modifie taille zone clic du cog */

      /* ==== CART ==== */
      --sticky-cart-gap: 4px; /* <----- change/modifie l’espace entre cog et panier */
      --sticky-cart-x: calc(var(--sticky-cog-x) + var(--sticky-cog-hit) + var(--sticky-cart-gap)); /* <----- change/modifie la position X du panier (calculée) */
      --sticky-cart-top: var(--sticky-cog-top); /* <----- change/modifie la position Y du panier (alignée au cog) */
      --sticky-cart-hit: var(--sticky-cog-hit); /* <----- change/modifie la taille zone clic du panier */

      /* ✅ Micro-move stable au zoom */
      --sticky-cart-offset-x: 10px; /* <----- change/modifie micro déplacement X du panier */
      --sticky-cart-offset-y: 2px; /* <----- change/modifie micro déplacement Y du panier */

      /* ✅ Sécurité bord droit */
      --sticky-right-pad: 10px; /* <----- change/modifie la marge sécurité bord droit */

      /* Dropdown cart */
      --sticky-cart-drop-y: 5px; /* <----- change/modifie l’écart vertical dropdown panier */
      --sticky-cart-drop-minw: 320px; /* <----- change/modifie la largeur min dropdown panier */
      --sticky-cart-drop-maxw: 360px; /* <----- change/modifie la largeur max dropdown panier */
      --sticky-cart-drop-pad: 12px 16px; /* <----- change/modifie le padding dropdown panier */

      /* ✅ Micro-move dropdown */
      --sticky-cart-drop-offset-x: 0px; /* <----- change/modifie micro déplacement X dropdown panier */
      --sticky-cart-drop-offset-y: 0px; /* <----- change/modifie micro déplacement Y dropdown panier */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .shopping_cart{
      pointer-events: none !important; /* <----- change/modifie la capture des clics du wrapper (désactivée) */
    }

    /* Bouton cart fixed + clamp */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart a:first-child{
      position: fixed !important; /* <----- change/modifie le positionnement (fixed) */

      top: var(--sticky-cart-top) !important; /* <----- change/modifie la position Y du panier */

      left: clamp(
        0px,
        calc(50% + var(--sticky-cart-x)),
        calc(100vw - var(--sticky-cart-hit) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (clamp anti-débordement) */

      right: auto !important; /* <----- change/modifie l’ancrage droite */

      width: var(--sticky-cart-hit) !important; /* <----- change/modifie la largeur zone clic */
      height: var(--sticky-cart-hit) !important; /* <----- change/modifie la hauteur zone clic */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      opacity: 1 !important; /* <----- change/modifie l’opacité */
      visibility: visible !important; /* <----- change/modifie la visibilité */

      z-index: 80011 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      background: transparent !important; /* <----- change/modifie le fond */

      transform: translate(var(--sticky-cart-offset-x), var(--sticky-cart-offset-y)) !important; /* <----- change/modifie micro placement du panier */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart i,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart i::before{
      display: inline-block !important; /* <----- change/modifie l’affichage de l’icône panier */
      visibility: visible !important; /* <----- change/modifie la visibilité */
      opacity: 1 !important; /* <----- change/modifie l’opacité */
    }

    /* Dropdown cart (clamp) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .toogle_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .toggle_content{
      position: fixed !important; /* <----- change/modifie le positionnement dropdown panier */

      top: calc(var(--sticky-cart-top) + var(--sticky-cart-hit) + var(--sticky-cart-drop-y)) !important; /* <----- change/modifie la position sous l’icône */

      left: clamp(
        0px,
        calc(50% + var(--sticky-cart-x)),
        calc(100vw - var(--sticky-cart-drop-maxw) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (anti-débordement) */

      min-width: var(--sticky-cart-drop-minw) !important; /* <----- change/modifie la largeur min */
      max-width: var(--sticky-cart-drop-maxw) !important; /* <----- change/modifie la largeur max */
      padding: var(--sticky-cart-drop-pad) !important; /* <----- change/modifie le padding */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      z-index: 999999 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      transform: translate(
        calc(-60% + var(--sticky-cart-drop-offset-x)),
        var(--sticky-cart-drop-offset-y)
      ) !important; /* <----- change/modifie micro placement du dropdown panier */

      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */
    }
  }
}
/* =======================================================
   DESKTOP — STOP “SLIDE INTO PLACE” when sticky
   (kills theme transitions/animations only in sticky state)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top::after,

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a::after,

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user{
      transition: none !important; /* <----- change/modifie les transitions (désactivées) */
      animation: none !important; /* <----- change/modifie les animations (désactivées) */
    }

    /* Extra safety: if the theme uses transform transitions */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a{
      transition-property: none !important; /* <----- change/modifie les propriétés animées (aucune) */
    }
  }
}
/* =======================================================
   DESKTOP — COG: NO drift when sticky turns OFF
   (reset to normal layout when NOT sticky)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    /* When NOT sticky: restore theme/default positioning */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user a.icon_top{
      position: static !important;     /* <----- change/modifie le positionnement (revient dans le flux) */
      top: auto !important; /* <----- change/modifie l’offset top (annulé) */
      left: auto !important; /* <----- change/modifie l’offset left (annulé) */
      right: auto !important; /* <----- change/modifie l’offset right (annulé) */
      bottom: auto !important; /* <----- change/modifie l’offset bottom (annulé) */
      transform: none !important;      /* <----- change/modifie le transform (annulé) */
      will-change: auto !important; /* <----- change/modifie l’optimisation navigateur (auto) */
    }

    /* Also reset the dropdown anchor so it doesn’t “snap” weird */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toogle_content,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toggle_content{
      position: absolute !important;   /* <----- change/modifie le positionnement normal du dropdown */
      top: 100% !important; /* <----- change/modifie la position sous l’icône */
      left: auto !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */
      transform: none !important; /* <----- change/modifie le transform (annulé) */
      will-change: auto !important; /* <----- change/modifie l’optimisation navigateur */
    }

    /* Kill motion both ways (sticky ON and OFF) */
    #header .header_user a.icon_top,
    #header .header_user a.icon_top * ,
    #header .header_user a.icon_top::before,
    #header .header_user a.icon_top::after{
      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — CART NON-STICKY: micro-move (pixel perfect)
   - bouge le cart quand le sticky n’est PAS actif
   - ne casse pas ton sticky (qui est dans body:has(...cbp-sticky))
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ✅ Réglages NON-sticky (tout en haut) */
      --cart-top-offset-x: 57px;   /* <----- change/modifie le micro déplacement X du panier (non-sticky) */
      --cart-top-offset-y: 0px;   /* <----- change/modifie le micro déplacement Y du panier (non-sticky) */
    }

    /* ✅ Non-sticky uniquement */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart > a,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart a:first-child{
      transform: translate(var(--cart-top-offset-x), var(--cart-top-offset-y)) !important; /* <----- change/modifie la position du panier (transform) */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */

      /* ✅ stop "slide" si le thème anime */
      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }

    /* Backup: si ton thème bouge plutôt le container */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart{
      transform: translate(var(--cart-top-offset-x), var(--cart-top-offset-y)) !important; /* <----- change/modifie la position du conteneur panier */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */

      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — COG NON-STICKY: micro-move (pixel perfect)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ✅ Réglages cog NON-sticky (tout en haut) */
      --cog-top-offset-x: -100px;   /* <----- change/modifie le micro déplacement X du cog (non-sticky) */
      --cog-top-offset-y: 0px;   /* <----- change/modifie le micro déplacement Y du cog (non-sticky) */
    }

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user a.icon_top{
      transform: translate(var(--cog-top-offset-x), var(--cog-top-offset-y)) !important; /* <----- change/modifie la position du cog (transform) */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */

      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — COG DROPDOWN NON-STICKY: micro-move
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ✅ Réglages dropdown cog NON-sticky */
      --cog-drop-top-offset-x: 0px;  /* <----- change/modifie le micro déplacement X du dropdown cog (non-sticky) */
      --cog-drop-top-offset-y: 10px;  /* <----- change/modifie le micro déplacement Y du dropdown cog (non-sticky) */
    }

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toogle_content,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toggle_content{
      transform: translate(
        var(--cog-drop-top-offset-x),
        var(--cog-drop-top-offset-y)
      ) !important; /* <----- change/modifie la position du dropdown cog (transform) */

      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */
      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — Sticky COG DROPDOWN (NO drift on zoom)
   - locks dropdown to the *viewport*, not to shifting containers
   - uses clamp() + fixed + transform micro-offset
   - kills transitions/animations in sticky state (prevents "slide")
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ---- Anchor = same reference as your sticky cog icon ---- */
      --sticky-cog-x: 635px;      /* <----- change/modifie repère X du cog sticky */
      --sticky-cog-top: -4px;     /* <----- change/modifie repère Y du cog sticky */
      --sticky-cog-hit: 44px;     /* <----- change/modifie taille zone clic du cog sticky */

      /* ---- Screen safety ---- */
      --sticky-right-pad: 10px; /* <----- change/modifie la marge sécurité bord droit */

      /* ---- Dropdown sizing ---- */
      --sticky-cog-drop-y: 5px; /* <----- change/modifie l’écart vertical dropdown */
      --sticky-cog-drop-minw: 280px; /* <----- change/modifie largeur min dropdown */
      --sticky-cog-drop-maxw: 280px; /* <----- change/modifie largeur max dropdown */
      --sticky-cog-drop-pad: 12px 16px; /* <----- change/modifie padding dropdown */

      /* ---- Micro-manage dropdown position (stable on zoom) ---- */
      --sticky-cog-drop-offset-x: -380px; /* <----- change/modifie micro déplacement X dropdown */
      --sticky-cog-drop-offset-y: 0px;    /* <----- change/modifie micro déplacement Y dropdown */
    }

    /* Make sure the dropdown is never "relative to a drifting parent" */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user{
      position: static !important;      /* <----- change/modifie le positionnement du parent (évite ancrage chelou) */
      transform: none !important; /* <----- change/modifie le transform parent */
      will-change: auto !important; /* <----- change/modifie l’optimisation navigateur */
    }

    /* LOCK dropdown to viewport with clamp */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toogle_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toggle_content{
      position: fixed !important; /* <----- change/modifie le positionnement (fixed) */

      /* Always sits right under the cog icon */
      top: calc(var(--sticky-cog-top) + var(--sticky-cog-hit) + var(--sticky-cog-drop-y)) !important; /* <----- change/modifie la position sous l’icône */

      /* Clamp keeps it inside the screen at any zoom level */
      left: clamp(
        0px,
        calc(50% + var(--sticky-cog-x)),
        calc(100vw - var(--sticky-cog-drop-maxw) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (anti-débordement) */

      right: auto !important; /* <----- change/modifie l’ancrage droite */

      min-width: var(--sticky-cog-drop-minw) !important; /* <----- change/modifie largeur min */
      max-width: var(--sticky-cog-drop-maxw) !important; /* <----- change/modifie largeur max */
      padding: var(--sticky-cog-drop-pad) !important; /* <----- change/modifie padding */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      z-index: 999999 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      /* Micro move ONLY via transform (does not drift with zoom) */
      transform: translate(
        calc(30% + var(--sticky-cog-drop-offset-x)),
        var(--sticky-cog-drop-offset-y)
      ) !important; /* <----- change/modifie micro placement (transform) */

      will-change: transform !important; /* <----- change/modifie optimisation navigateur */

      /* Prevent "slide into place" */
      transition: none !important; /* <----- change/modifie transitions */
      animation: none !important; /* <----- change/modifie animations */
    }

    /* Kill transitions on children too (some themes animate inner parts) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toogle_content *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toggle_content *{
      transition: none !important; /* <----- change/modifie transitions internes */
      animation: none !important; /* <----- change/modifie animations internes */
    }
  }
}

/* =======================================================
   BACK TO TOP — ▲▲ noires uniques (desktop + mobile)
======================================================= */

a.back-top-button.hidden-xs{
  position: fixed !important; /* <----- change/modifie le positionnement du bouton (fixed) */
  left: 18px !important; /* <----- change/modifie la distance du bord gauche */
  bottom: 18px !important; /* <----- change/modifie la distance du bas */

  width: 42px !important; /* <----- change/modifie la largeur du bouton */
  height: 42px !important; /* <----- change/modifie la hauteur du bouton */

  display: inline-flex !important; /* <----- change/modifie l’affichage */
  align-items: center !important; /* <----- change/modifie le centrage vertical */
  justify-content: center !important; /* <----- change/modifie le centrage horizontal */

  border: 2px solid #000 !important; /* <----- change/modifie l’épaisseur + couleur de bordure */
  border-radius: 10px !important; /* <----- change/modifie l’arrondi */

  background: linear-gradient(
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important; /* <----- change/modifie le dégradé du fond */

  box-shadow: none !important; /* <----- change/modifie l’ombre */

  z-index: 9999999 !important; /* <----- change/modifie la priorité (toujours devant) */
  opacity: 1 !important; /* <----- change/modifie l’opacité */
  visibility: visible !important; /* <----- change/modifie la visibilité */

  transition: none !important; /* <----- change/modifie transitions */
  animation: none !important; /* <----- change/modifie animations */
  filter: none !important; /* <----- change/modifie filtres */

  transform: translateZ(0) !important; /* <----- change/modifie l’accélération GPU */
  backface-visibility: hidden !important; /* <----- change/modifie l’affichage 3D */
  will-change: auto !important; /* <----- change/modifie l’optimisation navigateur */
}

a.back-top-button.hidden-xs.hidden,
a.back-top-button.hidden-xs.is-hidden,
a.back-top-button.hidden-xs.back-top-hidden{
  opacity: 1 !important; /* <----- change/modifie l’opacité même si “hidden” */
  visibility: visible !important; /* <----- change/modifie la visibilité même si “hidden” */
  transition: none !important; /* <----- change/modifie transitions */
  animation: none !important; /* <----- change/modifie animations */
}

a.back-top-button.hidden-xs i,
a.back-top-button.hidden-xs svg,
a.back-top-button.hidden-xs img,
a.back-top-button.hidden-xs::after{
  display: none !important; /* <----- change/modifie l’affichage (purge les icônes du thème) */
  content: none !important; /* <----- change/modifie le contenu pseudo-élément */
  background: none !important; /* <----- change/modifie le fond */
}

a.back-top-button.hidden-xs::before{
  content: "❮❮" !important; /* <----- change/modifie le symbole affiché */
  display: inline-block !important; /* <----- change/modifie l’affichage */
  transform: rotate(90deg) !important; /* <----- change/modifie l’orientation (pointe vers le haut) */

  font-size: 20px !important; /* <----- change/modifie la taille du symbole */
  font-weight: 900 !important; /* <----- change/modifie l’épaisseur */
  letter-spacing: -2px !important; /* <----- change/modifie l’espacement des chevrons */
  color: #000 !important; /* <----- change/modifie la couleur */
  line-height: 4 !important; /* <----- change/modifie la hauteur de ligne */

  opacity: 1 !important; /* <----- change/modifie l’opacité */
  visibility: visible !important; /* <----- change/modifie la visibilité */

  transition: none !important; /* <----- change/modifie transitions */
  animation: none !important; /* <----- change/modifie animations */
}

/* Hover desktop */
a.back-top-button.hidden-xs:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important; /* <----- change/modifie le dégradé au survol */
}

/* =======================================================
   MOBILE — version petite, bas gauche
======================================================= */
@media (max-width: 767px){

  a.back-top-button.hidden-xs{
    display: inline-flex !important; /* <----- change/modifie l’affichage (force visible) */

    width: 34px !important; /* <----- change/modifie la largeur (mobile) */
    height: 34px !important; /* <----- change/modifie la hauteur (mobile) */

    left: 10px !important; /* <----- change/modifie la distance gauche (mobile) */
    bottom: 10px !important; /* <----- change/modifie la distance bas (mobile) */

    border-radius: 8px !important; /* <----- change/modifie l’arrondi (mobile) */

    z-index: 9999999 !important; /* <----- change/modifie la priorité (mobile) */

    opacity: 1 !important; /* <----- change/modifie l’opacité (mobile) */
    visibility: visible !important; /* <----- change/modifie la visibilité (mobile) */

    transition: none !important; /* <----- change/modifie transitions (mobile) */
    animation: none !important; /* <----- change/modifie animations (mobile) */
  }

  a.back-top-button.hidden-xs::before{
    font-size: 11px !important; /* <----- change/modifie la taille du symbole (mobile) */
    letter-spacing: -1.5px !important; /* <----- change/modifie l’espacement (mobile) */

    transition: none !important; /* <----- change/modifie transitions */
    animation: none !important; /* <----- change/modifie animations */
  }
}
/* =======================================================
   ENLARGE / QUICK VIEW — même look que "Back to top"
   - même gradient + bordure + radius
   - garde l’icône "expand" actuelle (flèches opposées)
======================================================= */

/* Le bouton carré en haut à droite (desktop + mobile) */
a.quick-view{
  width: 42px !important;                 /* taille bouton (desktop) */
  height: 42px !important;                /* taille bouton (desktop) */

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid #000 !important;      /* même bordure que back-to-top */
  border-radius: 10px !important;         /* même forme */
  box-shadow: none !important;

  background: linear-gradient(            /* même gradient */
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important;

  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;            /* enlève fade / anim du thème */
  animation: none !important;
}

/* Hover (desktop) — même hover que back-to-top */
a.quick-view:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important;
}

/* L’icône (garde le "expand" actuel, on force juste la couleur) */
a.quick-view i,
a.quick-view i::before{
  color: #000 !important;                 /* icône noire */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cas spécifique que tu vois dans l’inspecteur: i.arrow_expand:before */
a.quick-view i.arrow_expand::before{
  color: #000 !important;                 /* garde les flèches, juste noir */
}

/* Mobile — même scaling que ton back-to-top mobile */
@media (max-width: 767px){
  a.quick-view{
    width: 34px !important;               /* taille bouton (mobile) */
    height: 34px !important;              /* taille bouton (mobile) */
    border-radius: 8px !important;        /* même radius mobile */
  }
}
/* =======================================================
   QUICK VIEW — enlever le carré noir derrière le bouton
   (thème: div.btn_container / div.btn-container)
======================================================= */

/* 1) Le wrapper qui met le carré noir */
.product-container .btn_container,
.product-container .btn-container{
  background: transparent !important;   /* <-- enlève le carré noir */
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 10px !important;       /* <-- coins arrondis (même look que doré) */
  overflow: visible !important;         /* (ou hidden si tu veux clipper) */
}

/* 2) Si le thème colore le lien lui-même en noir */
.product-container a.quick-view{
  background-color: transparent !important; /* sécurité */
}

/* 3) Optionnel: si un pseudo-élément fait un fond noir */
.product-container .btn_container::before,
.product-container .btn_container::after,
.product-container .btn-container::before,
.product-container .btn-container::after{
  background: transparent !important;
  box-shadow: none !important;
}
/* =======================================================
   ADD TO CART — même doré que les autres boutons
   (NE CHANGE RIEN d’autre que le background)
======================================================= */

a.exclusive.ajax_add_to_cart_button.btn.btn-default{
  /* même dégradé doré, même sens */
  background: linear-gradient(
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important;

  background-color: transparent !important; /* sécurité */
}

/* Hover — même logique que tes boutons dorés */
a.exclusive.ajax_add_to_cart_button.btn.btn-default:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important;
}

/* Active / focus — aucune autre modif */
a.exclusive.ajax_add_to_cart_button.btn.btn-default:active,
a.exclusive.ajax_add_to_cart_button.btn.btn-default:focus{
  background: linear-gradient(
    180deg,
    #f7e29a 0%,
    #f2c45e 18%,
    #e7a93a 45%,
    #c97c1c 72%,
    #a85f10 100%
  ) !important;
}
/* =======================================================
   LANG (FR/EN) — même bouton doré (ton thème: .extra_language_block)
======================================================= */

/* Le wrapper (au cas où il peint un fond) */
#header .extra_language_block{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Le bouton (le <a>) */
#header .extra_language_block > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid #000 !important;
  border-radius: 10px !important;

  background: linear-gradient(
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important;

  box-shadow: none !important;

  color: #000 !important;
  text-decoration: none !important;

  transition: none !important;
  animation: none !important;

  /* garde tes dimensions actuelles (on ne force pas width/height) */
}

/* Hover */
#header .extra_language_block > a:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important;
}

/* Mobile: même arrondi que tes petits boutons */
@media (max-width: 767px){
  #header .extra_language_block > a{
    border-radius: 8px !important;
  }
}
/* =======================================================
   420PANDA — GOLD THEME for ALL standard buttons site-wide
   Covers: a.btn, .btn-default, .button, .exclusive, inputs
   + My Account "Back to home" etc.
======================================================= */

:root{
  --panda-gold-1:#F6D37A;
  --panda-gold-2:#E2A73C;
  --panda-gold-3:#C47B14;
  --panda-border:#000;
  --panda-radius:10px;
}

/* 1) Base: target MOST Prestashop 1.6 buttons */
a.btn,
button.btn,
input.btn,
a.btn.btn-default,
button.btn.btn-default,
input.btn.btn-default,
a.button,
button.button,
input.button,
a.exclusive,
button.exclusive,
input.exclusive,
a.exclusive_large,
button.exclusive_large,
input.exclusive_large,
a.button-small,
button.button-small,
input.button-small,
a.button-medium,
button.button-medium,
input.button-medium{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
  text-shadow: none !important;

  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* 2) Keep icons/text inside black as well */
a.btn *,
a.button *,
a.exclusive *,
a.exclusive_large *{
  color:#000 !important;
}

/* 3) Hover/Focus/Active states (no theme “fade to grey”) */
a.btn:hover, a.btn:focus, a.btn:active,
button.btn:hover, button.btn:focus, button.btn:active,
input.btn:hover, input.btn:focus, input.btn:active,
a.button:hover, a.button:focus, a.button:active,
a.exclusive:hover, a.exclusive:focus, a.exclusive:active,
a.exclusive_large:hover, a.exclusive_large:focus, a.exclusive_large:active{
  background: linear-gradient(180deg,
    var(--panda-gold-2) 0%,
    var(--panda-gold-1) 45%,
    var(--panda-gold-3) 100%) !important;

  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4) Disabled */
a.btn.disabled, a.btn[disabled],
button.btn:disabled,
input.btn:disabled,
a.button.disabled, a.button[disabled],
button.button:disabled,
input.button:disabled{
  filter: grayscale(20%) !important;
  opacity: .75 !important;
  cursor: not-allowed !important;
}

/* 5) SPECIFIC: My Account "Back to home" button (your screenshot) */
#center_column a.btn.btn-default.button.button-small{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;
  border: 2px solid #000 !important;
  border-radius: var(--panda-radius) !important;
  color:#000 !important;
  box-shadow:none !important;
  }

/* =======================================================
   420PANDA — QUANTITY INPUTS: SAME SHAPE/BORDER AS BUTTONS
   - same radius + black border
   - NO gold gradient
   - stays readable & neutral
   - removes the 2nd grey border/focus ring that disappears on hover
======================================================= */

:root{
  /* fallback au cas où tes variables n’existent pas ici */
  --panda-border: #000;
  --panda-radius: 10px;
}

/* Quantity inputs (ex: .exclusive.multi_product_quantity) */
input[type="number"],
input.multi_product_quantity,
.exclusive.multi_product_quantity,
.product_list input[type="number"],
.product_list input.multi_product_quantity{
  background: #fff !important;                 /* neutre */
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;                /* un peu “button-like” */
  text-align: center !important;

  /* ---- remove all “second borders” / bootstrap inset / focus rings ---- */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: textfield !important;
  background-clip: padding-box !important;

  transition: none !important;

  padding: 6px 10px !important;
  min-width: 54px !important;
  height: 42px !important;                    /* proche de ton bouton */
  line-height: 1 !important;
}

/* Keep it clean on hover/focus (still not gold) */
input[type="number"]:hover,
input[type="number"]:focus,
input.multi_product_quantity:hover,
input.multi_product_quantity:focus,
.exclusive.multi_product_quantity:hover,
.exclusive.multi_product_quantity:focus,
.product_list input[type="number"]:hover,
.product_list input[type="number"]:focus,
.product_list input.multi_product_quantity:hover,
.product_list input.multi_product_quantity:focus{
  background: #fff !important;
  border-color: #000 !important;

  /* kill any browser/BS focus styling */
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Chrome / Safari focus ring (sometimes applied separately) */
input[type="number"]::-webkit-focus-ring-color{
  color: transparent !important;
}

/* Firefox inner focus */
input[type="number"]::-moz-focus-inner{
  border: 0 !important;
}

/* Bootstrap / PrestaShop sometimes adds this */
input[type="number"].form-control,
input.multi_product_quantity.form-control,
.exclusive.multi_product_quantity.form-control{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Optional: make the little spinner arrows less ugly (varies by browser) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  opacity: 1 !important;
 }

/* =======================================================
   420PANDA — CHECKOUT CONFIRM BUTTON (cashondelivery)
   Cible UNIQUEMENT: le bouton <a class="cash"> dans le checkout
   - applique le thème or
   - enlève tout hover/2e bordure/ombre
======================================================= */

:root{
  --panda-gold-1: #F6D37A;
  --panda-gold-2: #E2A73C;
  --panda-gold-3: #C47B14;

  --panda-border: #000;
  --panda-radius: 10px;
}

/* Le bouton confirmé "cash" (checkout) */
#order-opc .payment_module a.cash,
#order .payment_module a.cash{
  display: block !important;
  width: 100% !important;

  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: none !important;

  /* garde une belle hauteur/click area */
  padding: 14px 18px !important;
}

/* Enlève le style interne du thème si le module met un "fond" ou bordure via span/em */
#order-opc .payment_module a.cash *,
#order .payment_module a.cash *{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Pas de "2e bordure" / glow / hover qui change */
#order-opc .payment_module a.cash:hover,
#order-opc .payment_module a.cash:focus,
#order .payment_module a.cash:hover,
#order .payment_module a.cash:focus{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
 }

/* =======================================================
   420PANDA — CART +/- ONLY (desktop + mobile)
   - UNIQUEMENT les boutons + et - du panier
   - même ligne (côte à côte)
   - thème or
   - SUPPRESSION TOTALE du carré blanc (fond + bordure)
======================================================= */

:root{
  --panda-gold-1: #F6D37A;
  --panda-gold-2: #E2A73C;
  --panda-gold-3: #C47B14;
  --panda-border: #000;
  --panda-radius: 10px;
}

/* 1) Conteneur → force + et - sur la même ligne */
#order-opc .cart_quantity_button,
#order .cart_quantity_button{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* 2) Boutons + et - */
#order-opc a.cart_quantity_down,
#order-opc a.cart_quantity_up,
#order a.cart_quantity_down,
#order a.cart_quantity_up{
  display: inline-flex !important;
  float: none !important;

  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* 3) SPAN INTERNE → suppression ABSOLUE du carré blanc */
#order-opc a.cart_quantity_down span,
#order-opc a.cart_quantity_up span,
#order a.cart_quantity_down span,
#order a.cart_quantity_up span{
  background: transparent !important;   /* fond */
  border: 0 !important;                 /* bordure */
  outline: 0 !important;                /* focus fantôme */
  box-shadow: none !important;

  color: #000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* 4) Hover / focus : zéro apparition parasite */
#order-opc a.cart_quantity_down:hover,
#order-opc a.cart_quantity_up:hover,
#order-opc a.cart_quantity_down:focus,
#order-opc a.cart_quantity_up:focus,
#order a.cart_quantity_down:hover,
#order a.cart_quantity_up:hover,
#order a.cart_quantity_down:focus,
#order a.cart_quantity_up:focus{
  background-clip: padding-box !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* 5) Sécurité ultime : pseudo-éléments */
#order-opc a.cart_quantity_down::before,
#order-opc a.cart_quantity_up::before,
#order-opc a.cart_quantity_down::after,
#order-opc a.cart_quantity_up::after,
#order a.cart_quantity_down::before,
#order a.cart_quantity_up::before,
#order a.cart_quantity_down::after,
#order a.cart_quantity_up::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
 }

/* =======================================================
   420PANDA — CART +/- HARD CENTER (desktop + mobile)
   - force un centrage parfait même si le thème casse le span
   - ne change pas tes couleurs (juste placement)
======================================================= */

/* 1) Le conteneur: - et + sur la même ligne */
body#order-opc td.cart_quantity .cart_quantity_button,
body#order td.cart_quantity .cart_quantity_button{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cartpm-gap, 6px) !important;
  white-space: nowrap !important;
}

/* 2) Le bouton (= le carré) devient “boîte” de centrage absolu */
body#order-opc td.cart_quantity a.cart_quantity_down,
body#order-opc td.cart_quantity a.cart_quantity_up,
body#order td.cart_quantity a.cart_quantity_down,
body#order td.cart_quantity a.cart_quantity_up{
  position: relative !important;
  display: inline-block !important; /* plus stable que flex ici */
  float: none !important;

  width: var(--cartpm-btn, 26px) !important;
  height: var(--cartpm-btn, 26px) !important;
  min-width: var(--cartpm-btn, 26px) !important;
  min-height: var(--cartpm-btn, 26px) !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* 3) Centrage ABSOLU du span (souvent sprite background) */
body#order-opc td.cart_quantity a.cart_quantity_down > span,
body#order-opc td.cart_quantity a.cart_quantity_up > span,
body#order td.cart_quantity a.cart_quantity_down > span,
body#order td.cart_quantity a.cart_quantity_up > span{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  display: block !important;
  float: none !important;

  width: var(--cartpm-icon, 14px) !important;
  height: var(--cartpm-icon, 14px) !important;

  margin: 0 !important;
  padding: 0 !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;

  line-height: 0 !important;
}

/* 4) Fallback si le thème utilise un <i> / :before au lieu du span */
body#order-opc td.cart_quantity a.cart_quantity_down i,
body#order-opc td.cart_quantity a.cart_quantity_up i,
body#order td.cart_quantity a.cart_quantity_down i,
body#order td.cart_quantity a.cart_quantity_up i{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: var(--cartpm-icon, 14px) !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
}

body#order-opc td.cart_quantity a.cart_quantity_down i:before,
body#order-opc td.cart_quantity a.cart_quantity_up i:before,
body#order td.cart_quantity a.cart_quantity_down i:before,
body#order td.cart_quantity a.cart_quantity_up i:before{
  font-size: var(--cartpm-icon, 14px) !important;
  line-height: 1 !important;
 }

/* =======================================================
   420PANDA — CART: PERFECT CENTERING ONLY
   Objectif UNIQUE:
   1) MOBILE: le groupe (- +) parfaitement centré SOUS la boîte quantité
   2) DESKTOP: la boîte quantité parfaitement centrée DANS sa cellule
   (Aucun changement de couleur / taille / thème ici)
======================================================= */

/* --- Cible la cellule Quantity (desktop + mobile) --- */
body#order-opc td.cart_quantity.text-center,
body#order td.cart_quantity.text-center{
  text-align: center !important;
  vertical-align: middle !important;
}

/* --- 1) CENTRER LA BOÎTE QUANTITÉ DANS LA CELLULE (DESKTOP + MOBILE) --- */
/* (empêche les float/align bizarres du thème) */
body#order-opc td.cart_quantity.text-center input.cart_quantity_input,
body#order-opc td.cart_quantity.text-center input[name^="quantity_"],
body#order td.cart_quantity.text-center input.cart_quantity_input,
body#order td.cart_quantity.text-center input[name^="quantity_"]{
  float: none !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- 2) CENTRER LE GROUPE DES BOUTONS (- +) SOUS LA BOÃŽTE (MOBILE + DESKTOP) --- */
/* On centre le conteneur dans toute la largeur de la cellule */
body#order-opc td.cart_quantity.text-center .cart_quantity_button,
body#order td.cart_quantity.text-center .cart_quantity_button{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;   /* centre horizontalement */
  align-items: center !important;       /* centre verticalement */
  flex-wrap: nowrap !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* On neutralise les floats des liens (- +) qui cassent l’alignement */
body#order-opc td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_down,
body#order-opc td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_up,
body#order td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_down,
body#order td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_up{
  float: none !important;
}

/* Le petit <span> interne ne doit PAS “pousser” le centrage */
body#order-opc td.cart_quantity.text-center .cart_quantity_button a span,
body#order td.cart_quantity.text-center .cart_quantity_button a span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
 }

/* =======================================================
   420PANDA — GLOBAL: rien ne sort du viewport (cart summary)
   - Desktop + mobile
   - Scroll interne UNIQUEMENT si ça overflow
======================================================= */

body#order-opc #order-detail-content.table-responsive,
body#order     #order-detail-content.table-responsive{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;                 /* ✅ sécurité universelle */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body#order-opc #cart_summary,
body#order     #cart_summary{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}

/* Empêche certains éléments de forcer un overflow débile */
body#order-opc #cart_summary img,
body#order     #cart_summary img{
  max-width: 100% !important;
  height: auto !important;
}

/* Optionnel: évite les mots/valeurs qui cassent tout */
body#order-opc #cart_summary th,
body#order-opc #cart_summary td,
body#order     #cart_summary th,
body#order     #cart_summary td{
  word-break: normal !important;
}

/* =======================================================
   420PANDA — INPUTS / SELECTS / CHECKBOX / UNIFORM (NO SIZE/NO POSITION)
   Objectif:
   - AUCUN changement de taille (height/width/min-width/padding/line-height)
   - AUCUN changement de position (transform/translate/margins/left/right/top)
   - On garde seulement:
     • fond blanc
     • bordure noire + radius panda
     • suppression des 2e bordures / focus rings / inset shadows
     • selects restent cliquables + flèche visible (desktop + mobile)
======================================================= */

:root{
  --panda-border: #000;
  --panda-radius: 10px;

  /* Flèche (desktop) — purement visuelle */
  --panda-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* =======================================================
   QUANTITY INPUTS (Prestashop 1.6)
======================================================= */
input[type="number"],
input.multi_product_quantity,
.exclusive.multi_product_quantity,
.product_list input[type="number"],
.product_list input.multi_product_quantity,
#quantity_wanted,
.cart_quantity_input,
#cart_summary input[type="number"],
#cart_summary input.cart_quantity_input{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;
  text-align: center !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;

  transition: none !important;
}

input[type="number"]:hover,
input[type="number"]:focus,
input.multi_product_quantity:hover,
input.multi_product_quantity:focus,
.exclusive.multi_product_quantity:hover,
.exclusive.multi_product_quantity:focus,
.product_list input[type="number"]:hover,
.product_list input[type="number"]:focus,
.product_list input.multi_product_quantity:hover,
.product_list input.multi_product_quantity:focus,
#quantity_wanted:hover,
#quantity_wanted:focus,
.cart_quantity_input:hover,
.cart_quantity_input:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="number"]::-webkit-focus-ring-color{ color: transparent !important; }
input[type="number"]::-moz-focus-inner{ border: 0 !important; }

input[type="number"].form-control,
input.multi_product_quantity.form-control,
.exclusive.multi_product_quantity.form-control,
#quantity_wanted.form-control,
.cart_quantity_input.form-control{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  opacity: 1 !important;
}

/* =======================================================
   FORMS — TEXT INPUTS + TEXTAREA
======================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;
  text-align: left !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;

  transition: none !important;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="tel"]:hover,
input[type="tel"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
textarea:hover,
textarea:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="text"]::-webkit-focus-ring-color,
input[type="email"]::-webkit-focus-ring-color,
input[type="password"]::-webkit-focus-ring-color,
input[type="tel"]::-webkit-focus-ring-color,
input[type="search"]::-webkit-focus-ring-color,
input[type="url"]::-webkit-focus-ring-color,
input[type="number"]::-webkit-focus-ring-color,
textarea::-webkit-focus-ring-color{
  color: transparent !important;
}

input[type="text"]::-moz-focus-inner,
input[type="email"]::-moz-focus-inner,
input[type="password"]::-moz-focus-inner,
input[type="tel"]::-moz-focus-inner,
input[type="search"]::-moz-focus-inner,
input[type="url"]::-moz-focus-inner,
input[type="number"]::-moz-focus-inner{
  border: 0 !important;
}

input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="tel"].form-control,
input[type="search"].form-control,
input[type="url"].form-control,
input[type="number"].form-control,
textarea.form-control{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* =======================================================
   SELECTS (native)
   - garde click OK
   - FIX desktop: ajoute une flèche en background-image (si thème supprime la native)
======================================================= */
select,
select.form-control{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;
  text-align: left !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  -webkit-appearance: menulist !important;
  appearance: menulist !important;

  background-clip: padding-box !important;
  transition: none !important;
}

select:hover,
select:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

select::-ms-expand{
  display: block !important;
}

/* ✅ Desktop: flèche visible même si le thème “tue” la flèche native */
@media (min-width: 768px){
  select,
  select.form-control{
    background-image: var(--panda-arrow-svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
  }
}

/* =======================================================
   CHECKBOX
======================================================= */
input[type="checkbox"]{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: 4px !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  background-clip: padding-box !important;
  transition: none !important;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="checkbox"]:checked{
  background: #fff !important;
  border-color: #000 !important;
  box-shadow: inset 0 0 0 3px #000 !important;
}
/* ======================================================= 
   UNIFORM SELECT (Prestashop 1.6) — DESKTOP ARROW FIX (CLICK-SAFE)
   - style seulement
   - FIX: garde le select Uniform en overlay (zone cliquable)
   - flèche visible sur desktop sans bloquer les clics
======================================================= */
div.selector,
div.selector#uniform-days,
div.selector#uniform-months,
div.selector#uniform-years{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  background-clip: padding-box !important;
  transition: none !important;

  position: relative !important;     /* <----- nécessaire pour :after + overlay select */
  overflow: visible !important;      /* <----- empêche le “clip” de la flèche */
}

/* Le texte affiché par Uniform ne doit JAMAIS bloquer le click */
div.selector span{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;

  color: #000 !important;
  font-weight: 700 !important;

  pointer-events: none !important;   /* ✅ <----- CRUCIAL: laisse passer le click vers le select overlay */
}

/* ✅ Le vrai fix: select Uniform = overlay cliquable pleine taille */
div.selector select{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  /* Uniform s’attend à ça: un select transparent au-dessus */
  position: absolute !important;     /* ✅ <----- remet la logique Uniform */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  opacity: 0 !important;             /* ✅ <----- garde l’apparence “custom” */
  cursor: pointer !important;
  z-index: 5 !important;             /* ✅ <----- au-dessus du span */
}

/* ✅ Flèche Uniform (desktop) — overlay visuel seulement */
@media (min-width: 768px){
  div.selector:after{
    content: "" !important;
    background-image: var(--panda-arrow-svg) !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;

    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 14px !important;
    height: 14px !important;

    pointer-events: none !important; /* ✅ <----- ne bloque jamais le click */
    z-index: 6 !important;           /* juste au-dessus du select transparent */
  }
}

div.selector:hover,
div.selector:focus,
div.selector:focus-within{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}


/* =======================================================
   420PANDA — FILE INPUT THEME (Uniform + natif)
   - Applique le même thème (bordure noire + radius + fond blanc)
   - NE MODIFIE PAS la taille ni la position (pas de width/height/transform)
   - FIX desktop: force l'affichage du bouton "Choose file" (Uniform span.action)
   - Couvre:
     1) Uniform uploader: #uniform-xxx + span.filename + span.action
     2) File input natif (fallback)
======================================================= */

:root{
  --panda-border: #000;
  --panda-radius: 10px;

  /* Réserve visuelle (desktop) pour éviter que "filename" écrase le bouton.
     Ne change pas la taille du bloc, seulement le comportement de débordement. */
  --panda-file-action-reserve: 150px; /* ajuste si texte FR plus long */
}

/* =======================================================
   1) UNIFORM (PrestaShop 1.6) — wrapper file uploader
   Ex: <div id="uniform-fileUpload" class="uploader">...</div>
======================================================= */
div.uploader,
div.uploader#uniform-fileUpload,
div[id^="uniform-"].uploader{
  background: #fff !important;
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;

  /* IMPORTANT: pas de width/height/padding/transform ici */
}

/* Zone "filename" (texte "No file selected") */
div.uploader span.filename{
  background: transparent !important;
  border: none !important;

  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;

  /* FIX desktop: éviter que filename prenne 100% et cache le bouton */
  display: inline-block !important;
  max-width: calc(100% - var(--panda-file-action-reserve)) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Bouton "Choose file" (Uniform -> span.action) */
div.uploader span.action{
  background: #fff !important; /* neutre (pas de gold) */
  border-left: 2px solid var(--panda-border) !important; /* séparation propre */
  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;

  /* FIX desktop: certains thèmes le cachent */
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hover/focus: propre, pas de glow */
div.uploader:hover,
div.uploader:focus,
div.uploader:focus-within{
  border-color: #000 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* Le vrai input file (invisible chez Uniform) — on évite les effets visuels */
div.uploader input[type="file"]{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* =======================================================
   2) FILE INPUT NATIF (fallback si Uniform n’est pas utilisé)
   (On le stylise au minimum sans casser la taille)
======================================================= */
input[type="file"]{
  background: #fff !important;
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;
}

/* Bouton natif (Chrome/Edge) — sans toucher dimensions */
input[type="file"]::-webkit-file-upload-button{
  background: #fff !important;
  border: none !important;
  border-right: 2px solid var(--panda-border) !important;
  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}
input[type="file"]::file-selector-button{
  background: #fff !important;
  border: none !important;
  border-right: 2px solid var(--panda-border) !important;
  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  outline: none !important;
}
/* =======================================================
   DESKTOP — FR ONLY: micro drift LEFT for sticky search bar
   - FR: décale un peu à gauche
   - EN: revient exactement comme avant
   - CSS-only, no conflict: on ne touche qu’à --home-left-x
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --fr-search-drift-x: -35px; /* <----- change/modifie: plus négatif = plus à gauche */
    }

    /* FR uniquement (EN = body.lang_en dans ton code) */
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky){
      --home-left-x: calc(-520px + var(--fr-search-drift-x)) !important; /* <----- change/modifie: ancre search un peu plus à gauche en FR */
    }

    /* EN: reset parfait (ton repère original) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --home-left-x: -505px !important; /* <----- change/modifie: remet EXACT la position anglaise */
    }
  }
}
/* =======================================================
   DESKTOP — FR ONLY: micro drift RIGHT for sticky COG + CART
   - FR: décale un peu vers la droite
   - EN: revient exactement comme avant
   - CSS-only, no conflict: on ne touche qu’aux offsets X (micro-move)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --fr-cog-drift-x: 42px;  /* <----- change/modifie: plus grand = plus à droite (COG) */
      --fr-cart-drift-x: 30px; /* <----- change/modifie: plus grand = plus à droite (CART) */
    }

    /* FR uniquement (EN = body.lang_en dans ton code) */
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-cog-offset-x: calc(-160px + var(--fr-cog-drift-x)) !important;   /* <----- change/modifie: décale COG en FR */
      --sticky-cart-offset-x: calc(-130px + var(--fr-cart-drift-x)) !important; /* <----- change/modifie: décale CART en FR */
    }

    /* EN: reset parfait (tes valeurs “avant”) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-cog-offset-x: -160px !important; /* <----- change/modifie: remet EXACT la position anglaise (COG) */
      --sticky-cart-offset-x: -140Px !important; /* <----- change/modifie: remet EXACT la position anglaise (CART) */
    }
  }
}
/* =======================================================
   420PANDA — DESKTOP ONLY — STICKY MAIN MENU: tighter spacing
   Objectif:
   - réduire l’espace ENTRE les catégories (liens du menu principal)
   - UNIQUEMENT en sticky desktop
   - NO conflict: scope max = #iqitmegamenu-horizontal.cbp-sticky
======================================================= */
@media (min-width: 768px){

  :root{
    /* ✅ Réglage principal (le plus fiable): padding des liens */
    --sticky-cat-pad-x: 8px;      /* <----- diminue/augmente l'espace entre catégories */
    --sticky-cat-pad-y: 0px;      /* <----- laisse 0 pour éviter de changer la hauteur */

    /* ✅ Optionnel (si ton UL est flex): micro gap entre <li> */
    --sticky-cat-gap: 0px;        /* <----- mets 0-8px si ton thème ajoute un gap */
  }

  /* 1) Si le menu est en flex, le gap peut créer du spacing */
  #iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul{
    column-gap: var(--sticky-cat-gap) !important; /* <----- réduit l'écart entre items (si applicable) */
  }

  /* 2) Réduit l'espace via le padding horizontal des liens (méthode la plus stable) */
  #iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li > a{
    padding-left: var(--sticky-cat-pad-x) !important;  /* <----- espace à gauche du texte */
    padding-right: var(--sticky-cat-pad-x) !important; /* <----- espace à droite du texte */
    padding-top: var(--sticky-cat-pad-y) !important;   /* <----- évite de changer la hauteur */
    padding-bottom: var(--sticky-cat-pad-y) !important;
  }

  /* 3) Sécurité: certains thèmes mettent des marges sur <li> */
  #iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li{
    margin-left: 0 !important;  /* <----- neutralise marges externes */
    margin-right: 0 !important;
  }
}

/* ======================================================= 
   DESKTOP — Sticky search: s’étire vers la DROITE au clic (CSS-only)
   - largeur fermée différente EN / FR
   - largeur ouverte identique
   - ancrage gauche LOCK (collé au HOME)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ===== LARGEUR FERMÉE ===== */
      --sticky-search-w-en: 127px;   /* <----- largeur fermée EN */
      --sticky-search-w-fr: 92px;    /* <----- largeur fermée FR */

      /* ===== LARGEUR OUVERTE ===== */
      --sticky-search-w-open: 2000px;                /* <----- largeur ouverte */
      --sticky-search-w-open-max: min(60vw, 640px); /* <----- limite responsive */

      /* ===== animation ===== */
      --sticky-search-expand-ms: 120ms;
    }

    /* ===== Applique la largeur fermée selon la langue ===== */

    /* EN */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-search-w: var(--sticky-search-w-en);
    }

    /* FR */
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-search-w: var(--sticky-search-w-fr);
    }

    /* 1) IMPORTANT: le wrapper ne doit pas couper l’extension */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search form{
      overflow: visible !important;
    }

    /* 2) ÉTAT FERMÉ (EN ou FR selon la langue) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content input#search_query_menu{
      width: var(--sticky-search-w) !important;
      max-width: var(--sticky-search-w) !important;
      transform-origin: left center !important;
      transition: width var(--sticky-search-expand-ms) ease,
                  max-width var(--sticky-search-expand-ms) ease !important;
    }

    /* 3) ÉTAT OUVERT (focus / pleine largeur) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:focus-within
    input#search_query_menu{
      width: clamp(
        var(--sticky-search-w),
        var(--sticky-search-w-open),
        var(--sticky-search-w-open-max)
      ) !important;
      max-width: clamp(
        var(--sticky-search-w),
        var(--sticky-search-w-open),
        var(--sticky-search-w-open-max)
      ) !important;

      background: #fff !important; /* <----- ✅ enlève la transparence UNIQUEMENT quand la search est ouverte */
    }

    /* 4) Overlap au-dessus des catégories */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      position: relative !important;
      z-index: 80050 !important;
    }
  }
}
/* =======================================================
   DESKTOP — Sticky search: texte "Search/Recherche" EN OVERLAY dans l'input
   - CSS-only (pas de HTML/JS)
   - n'occupe AUCUNE place (pas de shift de layout)
   - ne bloque jamais le clic (pointer-events:none)
   - disparaît au clic/focus (= quand la search s'ouvre/s'étire)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* Réglages du label overlay */
      --sticky-search-label-en: "Search";        /* <----- texte EN */
      --sticky-search-label-fr: "Recherche";     /* <----- texte FR */

      --sticky-search-label-x: 12px;             /* <----- position X du label dans l'input */
      --sticky-search-label-fs: 13px;            /* <----- taille du texte */
      --sticky-search-label-op: 0.62;            /* <----- opacité du label */
      --sticky-search-label-pad: 74px;           /* <----- padding-left ajouté à l'input (fermée) */
      /* NOTE: augmente si "Recherche" touche ton texte saisi, diminue si tu veux plus tight */
    }

    /* 1) Le conteneur sert d’ancre pour l’overlay */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      position: relative !important; /* <----- ancre le ::before */
    }

    /* 2) Le label overlay (au-dessus de l’input, MAIS ne capture aucun clic) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search::before{
      content: var(--sticky-search-label-en) !important; /* <----- texte EN */
    }
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search::before{
      content: var(--sticky-search-label-fr) !important; /* <----- texte FR */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search::before{
      position: absolute !important;
      left: var(--sticky-search-label-x) !important;  /* <----- X du label */
      top: 50% !important;
      transform: translateY(-50%) !important;

      font-size: var(--sticky-search-label-fs) !important; /* <----- taille */
      font-weight: 800 !important;
      color: rgba(0,0,0,var(--sticky-search-label-op)) !important; /* <----- opacité */
      line-height: 1 !important;

      pointer-events: none !important; /* <----- ✅ ne bloque jamais le clic */
      z-index: 2 !important;           /* <----- au-dessus de l’input */

      white-space: nowrap !important;
      max-width: calc(100% - 18px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;

      /* mini anti-jitter */
      will-change: opacity, transform !important;
    }

    /* 3) Quand la search est FERMÉE: on réserve de la place pour le label (sinon il obstrue) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:not(:focus-within)
    input#search_query_menu{
      padding-left: var(--sticky-search-label-pad) !important; /* <----- ✅ réserve place au label */
    }

    /* 4) Quand la search est OUVERTE (clic/focus): label disparaît + padding revient normal */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:focus-within::before{
      opacity: 0 !important; /* <----- ✅ disparaît au clic */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:focus-within
    input#search_query_menu{
      padding-left: 12px !important; /* <----- padding normal quand on tape */
    }
  }
}
/* =======================================================
   DESKTOP — STICKY LANG (FR/EN) collé À DROITE du CART
   - FR: drift horizontal UNIQUEMENT (+42px)
   - FR: dimensions + scale DÉDIÉES CONSERVÉES
   - AUCUN déplacement vertical spécifique FR
   - actif UNIQUEMENT quand sticky
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ==== RÉFÉRENCE CART ==== */
      --sticky-cog-x: 635px;
      --sticky-cog-hit: 44px;
      --sticky-cart-gap: 2px;
      --sticky-cart-x: calc(var(--sticky-cog-x) + var(--sticky-cog-hit) + var(--sticky-cart-gap));
      --sticky-cart-top: -4px;
      --sticky-cart-hit: 44px;

      /* ==== LANG — BASE (EN) ==== */
      --sticky-lang-gap: 6px;
      --sticky-lang-x: calc(var(--sticky-cart-x) + var(--sticky-cart-hit) + var(--sticky-lang-gap));
      --sticky-lang-top: var(--sticky-cart-top);

      /* Dimensions EN */
      --sticky-lang-hit-w: 86px;
      --sticky-lang-hit-h: 38px;
      --sticky-lang-pad-x: 12px;

      /* Scale EN */
      --sticky-lang-scale: 0.92;

      /* Micro-ajustement GLOBAL (s’applique aux deux langues) */
      --sticky-lang-offset-x: -130px;
      --sticky-lang-offset-y: 6px;

      /* Sécurité écran */
      --sticky-right-pad: 10px;

      /* =========================
         FR — DIMENSIONS + SCALE
         (PAS DE Y / PAS DE TOP FR)
      ========================== */
      --sticky-lang-fr-drift-x: 42px;  /* ✅ drift horizontal FR uniquement */

      --sticky-lang-fr-hit-w: 42px;    /* width FR */
      --sticky-lang-fr-hit-h: 38px;    /* height FR */
      --sticky-lang-fr-pad-x: 12px;    /* padding FR */

      --sticky-lang-fr-scale: 0.92;    /* scale FR (conservé) */
    }

    /* Wrapper ne vole pas les clics */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .extra_language_block{
      pointer-events: none !important;
    }

    /* =========================
       BASE (EN + autres langues)
    ========================== */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .extra_language_block > a{
      position: fixed !important;
      top: var(--sticky-lang-top) !important;

      left: clamp(
        0px,
        calc(50% + var(--sticky-lang-x)),
        calc(100vw - var(--sticky-lang-hit-w) - var(--sticky-right-pad))
      ) !important;

      right: auto !important;

      width: var(--sticky-lang-hit-w) !important;
      height: var(--sticky-lang-hit-h) !important;

      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;

      padding: 0 var(--sticky-lang-pad-x) !important;
      white-space: nowrap !important;

      z-index: 80012 !important;
      pointer-events: auto !important;

      transform:
        translate(var(--sticky-lang-offset-x), var(--sticky-lang-offset-y))
        scale(var(--sticky-lang-scale)) !important;

      transform-origin: center center !important;
      will-change: transform !important;

      transition: none !important;
      animation: none !important;
    }

    /* =========================
       FR UNIQUEMENT
       - drift horizontal +42px
       - dimensions + scale FR
       - AUCUN mouvement vertical ajouté
    ========================== */
    html[lang^="fr"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .extra_language_block > a{
      width: var(--sticky-lang-fr-hit-w) !important;
      height: var(--sticky-lang-fr-hit-h) !important;
      padding-left: var(--sticky-lang-fr-pad-x) !important;
      padding-right: var(--sticky-lang-fr-pad-x) !important;

      transform:
        translate(
          calc(var(--sticky-lang-offset-x) + var(--sticky-lang-fr-drift-x)),
          var(--sticky-lang-offset-y)
        )
        scale(var(--sticky-lang-fr-scale)) !important;
    }

  }
}
/* =======================================================
   DESKTOP — STICKY LANG: texte centré VRAIMENT (overlay)
   - FR = "Francais"
   - EN = "Eng"
   - NE TOUCHE PAS à la position (fixed/left/top/transform)
======================================================= */

/* 1) Cache seulement le texte HTML existant (sans toucher position) */
body:has(#iqitmegamenu-horizontal.cbp-sticky)
#header .extra_language_block > a{
  color: transparent !important;    /* cache le texte d'origine */
  text-shadow: none !important;
  overflow: hidden !important;      /* sécurise l’overlay */
}

/* 2) Texte injecté centré dans 100% du bouton */
body:has(#iqitmegamenu-horizontal.cbp-sticky)
#header .extra_language_block > a::after{
  content: "Francais";                   /* EN par défaut */
  position: absolute !important;
  inset: 0 !important;              /* plein bouton */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;

  pointer-events: none !important;  /* ne bloque pas le clic */
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) FR uniquement */
html[lang^="fr"]
body:has(#iqitmegamenu-horizontal.cbp-sticky)
#header .extra_language_block > a::after{
  content: "ENG";
}
/* =======================================================
   DESKTOP — STICKY HOME: FR ONLY drift +42px (NO CONFLICT)
   - N'altère PAS --home-left-x (donc ne bouge pas la search)
   - Utilise "translate" (n'écrase pas transform existant)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) and (translate: 1px){

    :root{
      --home-fr-drift-x: 42px; /* <----- change/modifie: drift FR */
    }

    /* ✅ FR uniquement + sticky */
    html[lang^="fr"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    :is(
      #header a.home,
      #header a#home,
      #header a.icon_home,
      #header a.icon-home,
      #header .sf-menu li.home > a,
      #header .sf-menu li.sf-home > a,
      #header ul.sf-menu.menu-content li.home > a,
      #header ul.sf-menu.menu-content li.sf-home > a
    ){
      translate: var(--home-fr-drift-x) 0 !important; /* ✅ drift horizontal ONLY */
    }

    /* ✅ EN (reset safe) */
    html[lang^="en"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    :is(
      #header a.home,
      #header a#home,
      #header a.icon_home,
      #header a.icon-home,
      #header .sf-menu li.home > a,
      #header .sf-menu li.sf-home > a,
      #header ul.sf-menu.menu-content li.home > a,
      #header ul.sf-menu.menu-content li.sf-home > a
    ){
      translate: 0 0 !important;
    }
  }
}
/* =======================================================
   420PANDA — PRODUCT PAGE (+ / -) GOLD THEME
   Objectif:
   - Applique le même doré que tes boutons
   - Couvre la page produit + listes produits
   - Ne touche PAS au positionnement global du bloc quantité
======================================================= */

:root{
  --panda-gold-1:#F6D37A;
  --panda-gold-2:#E2A73C;
  --panda-gold-3:#C47B14;
  --panda-border:#000;
  --panda-radius:10px;

  /* Ajuste seulement si tu veux */
  --panda-qty-btn-size: 26px; /* <----- taille des carrés + / - */
}

/* Boutons +/- sur page produit (et souvent aussi en liste) */
a.product_quantity_up,
a.product_quantity_down,
.product_list a.product_quantity_up,
.product_list a.product_quantity_down{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;

  width: var(--panda-qty-btn-size) !important;   /* <----- optionnel: taille */
  height: var(--panda-qty-btn-size) !important;  /* <----- optionnel: taille */
  line-height: var(--panda-qty-btn-size) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Le span interne (souvent responsable du “bouton blanc”) */
a.product_quantity_up span,
a.product_quantity_down span,
.product_list a.product_quantity_up span,
.product_list a.product_quantity_down span{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #000 !important;
  opacity: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Hover/focus: ne redevient pas gris/blanc */
a.product_quantity_up:hover,
a.product_quantity_down:hover,
a.product_quantity_up:focus,
a.product_quantity_down:focus{
  background: linear-gradient(180deg,
    var(--panda-gold-2) 0%,
    var(--panda-gold-1) 45%,
    var(--panda-gold-3) 100%) !important;

  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* =======================================================
   420PANDA — FIX PLA "AJOUTEZ AU PANIER" (DIV pla_popup)
   D’après ton inspector:
   <div class="pla_matrix_dropdown_block pla_popup"> ... </div>
   => Ce n’est PAS un <a> ni un <button>, donc on cible le DIV.
======================================================= */

:root{
  --panda-pla-g1:#fff2b6;
  --panda-pla-g2:#f4b43a;
  --panda-pla-g3:#b86a12;
  --panda-pla-border:#000;
  --panda-pla-radius:10px;

  --panda-pla-h1:#fff6c9;
  --panda-pla-h2:#f7bf4a;
  --panda-pla-h3:#c87514;
}

/* 1) Le “bouton” PLA est un DIV: on le recolore directement */
.pla_matrix_dropdown_block.pla_popup{
  background-image: linear-gradient(180deg,var(--panda-pla-g1) 0%,var(--panda-pla-g2) 45%,var(--panda-pla-g3) 100%) !important;
  background-color: transparent !important;

  border: 2px solid var(--panda-pla-border) !important;
  border-radius: var(--panda-pla-radius) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;

  color: #000 !important;

  /* souvent le bleu vient d’un “skin” qui force le style via transition */
  transition: none !important;
}

/* 2) Force le texte à rester noir (au cas où spans internes) */
.pla_matrix_dropdown_block.pla_popup,
.pla_matrix_dropdown_block.pla_popup *{
  color:#000 !important;
  text-shadow:none !important;
}

/* 3) Hover/focus “comme un bouton” */
.pla_matrix_dropdown_block.pla_popup:hover,
.pla_matrix_dropdown_block.pla_popup:focus,
.pla_matrix_dropdown_block.pla_popup:active{
  background-image: linear-gradient(180deg,var(--panda-pla-h1) 0%,var(--panda-pla-h2) 45%,var(--panda-pla-h3) 100%) !important;
  background-color: transparent !important;

  border-color:#000 !important;
  outline:none !important;
  box-shadow:none !important;
}

/* 4) Si le bleu est dessiné par un pseudo-élément (rare mais possible) */
.pla_matrix_dropdown_block.pla_popup::before,
.pla_matrix_dropdown_block.pla_popup::after{
  background: transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* =======================================================   
   420PANDA — CART "FILLED" ICON (CSS-only) — ROBUST (NO ANCHOR CHANGE)
   Fix:
   - FORCE default icon by default (empty state)
   - Switch to filled ONLY when real items exist (dl.products dt)
======================================================= */

@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --panda-filledcart-img: url("https://420panda.ca/img/cms/ezgif-com-animated-gif-maker (1).gif");
      --panda-emptycart-img: url("https://420panda.ca/img/cms/emptycart.png"); /* ✅ NEW */
      --panda-cart-img-size: 3.20em;
      --panda-cart-img-sticky-size: 3.20em;
    }

    /* =======================================================
       0) DEFAULT (EMPTY): force EMPTY cart image
    ======================================================= */
    #header .shopping_cart img#imagedupanier{
      content: var(--panda-emptycart-img) !important; /* ✅ changed line */
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       1) FILLED condition (RELIABLE): real items exist
       PS1.6 dropdown uses: dl.products dt = 1 row per product
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      content: var(--panda-filledcart-img) !important;
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       2) Sticky size override (ONLY size)
    ======================================================= */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      width: var(--panda-cart-img-sticky-size) !important;
      height: var(--panda-cart-img-sticky-size) !important;
    }

    /* =======================================================
       3) Hide qty text ONLY when filled (optional)
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_quantity,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt_s{
      display: none !important;
    }

  }
}

/* =======================================================   
   420PANDA — CART "FILLED" ICON (CSS-only) — ROBUST (NO ANCHOR CHANGE)
   MOBILE CLONE (same logic, same selectors, just mobile media query)
======================================================= */

@media (max-width: 767px){
  @supports selector(:has(*)) {

    :root{
      --panda-filledcart-img: url("https://420panda.ca/img/cms/ezgif-com-animated-gif-maker (1).gif");
      --panda-emptycart-img: url("https://420panda.ca/img/cms/emptycart.png"); /* ✅ NEW */
      --panda-cart-img-size: 3.20em;
      --panda-cart-img-sticky-size: 3.20em;
    }

    /* =======================================================
       0) DEFAULT (EMPTY): force EMPTY cart image
    ======================================================= */
    #header .shopping_cart img#imagedupanier{
      content: var(--panda-emptycart-img) !important; /* ✅ changed line */
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       1) FILLED condition (RELIABLE): real items exist
       PS1.6 dropdown uses: dl.products dt = 1 row per product
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      content: var(--panda-filledcart-img) !important;
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       2) Sticky size override (ONLY size)
    ======================================================= */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      width: var(--panda-cart-img-sticky-size) !important;
      height: var(--panda-cart-img-sticky-size) !important;
    }

    /* =======================================================
       3) Hide qty text ONLY when filled (optional)
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_quantity,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt_s{
      display: none !important;
    }

  }
}

/* =======================================================
   420PANDA — DESKTOP TOP (NON-STICKY) — X AXIS ONLY (+ PROTECT GAP RIGHT)
   Objectif:
   - Ne PAS changer la largeur par défaut de la search
   - Autoriser une réduction automatique UNIQUEMENT si l’espace manque (zoom)
   - Garder le gap de protection entre search et langue
   - Sticky = 0 impact garanti
======================================================= */

@media (min-width: 768px){

  :root{
    /* ===== POSITION DES ICÔNES ===== */
    --top-lang-x: -30px;  /* 🌐 FR / EN (texte) */
    --top-cog-x:  -5px;    /* ⚙️ Cogwheel */
    --top-cart-x: 40px;   /* 🛒 Panier */
    
    /* ===== PROTECTION ANTI-OVERLAP (ZOOM SEULEMENT) ===== */
    --top-protect-gap: 8px;      /* espace visuel search ↔ langue */
    --top-protect-right: 40px;  /* couloir réservé langue + icônes */
    --top-search-min: 10px;     /* largeur MIN seulement en cas de contrainte */
  }

  /* =======================================================
     0) DÉBLOQUER LES CONTENEURS (sans forcer de largeur)
     -> permet à la search de garder sa taille native
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #block_top_menu ul.sf-menu > li.sf-search form#searchbox > p{
    width: auto !important;
    max-width: none !important;
  }

  /* =======================================================
     1) COULOIR DE PROTECTION (ne change rien tant qu’il y a de la place)
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #block_top_menu ul.sf-menu > li.sf-search{
    max-width: calc(100vw - var(--top-protect-right)) !important;
    padding-inline-end: var(--top-protect-gap) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* =======================================================
     2) INPUT SEARCH — RÉDUCTION UNIQUEMENT SI NÉCESSAIRE
     ❗ aucune largeur par défaut ici
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header input#search_query_menu{
    min-width: var(--top-search-min) !important; /* agit seulement en contrainte */
    max-width: 90% !important;                  /* ne dépasse jamais son conteneur */
    box-sizing: border-box !important;
  }

  /* =======================================================
     🌐 LANGUE FR / EN
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .extra_language_block > a{
    transform: translateX(var(--top-lang-x)) !important;
  }

  /* =======================================================
     ⚙️ COGWHEEL
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .header_user_info,
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .header_user_info > a{
    transform: translateX(var(--top-cog-x)) !important;
  }

  /* =======================================================
     🛒 PANIER
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .shopping_cart,
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .shopping_cart > a{
    transform: translateX(var(--top-cart-x)) !important;
  }
}

/* =======================================================
   DESKTOP — SEARCH INPUT
   - Largeur dynamique selon zoom / espace réel
   - CSS ONLY
   - Aucun impact sticky / position
======================================================= */

@media (min-width: 768px){
  #header input#search_query_menu{
    width: clamp(
      10px,   /* largeur minimale (zoom élevé) */
      10vw,    /* largeur dynamique (réagit au zoom) */
      300px    /* largeur normale max (100% zoom) */
    );
  }
}
@media (min-width: 768px){

/* ======================================================= 
   420PANDA — DESKTOP — CART DROPDOWN (CSS-only, STABLE)
   Fix:
   - Toujours au-dessus du menu (stacking context safe)
   - Ne disparaît pas en allant dans le dropdown (pont invisible + gap=0)
   - COMMANDER = vrai gold (utilise tes variables panda)
   + BRUTE FORCE: footer toujours en bas + largeur 100% sans coupe
   + ✅ FIX: scroll actif quand beaucoup d’items (flex + min-height:0 + overflow-y)
   + ✅ FIX ITEMS: image bien collée / plus d’overlap / X remove visible
======================================================= */

@media (min-width: 768px){

  :root{
    /* ===== Panda gold (reprend ton thème) ===== */
    --panda-gold-1:#F6D37A;
    --panda-gold-2:#E2A73C;
    --panda-gold-3:#C47B14;
    --panda-border:#000;
    --panda-radius:10px;

    /* ===== Dropdown behavior ===== */
    --panda-cartdrop-z: 2147483647; /* topmost */
    --panda-cartdrop-gap: 0px;      /* IMPORTANT: 0 = pas de trou */
    --panda-cartdrop-bridge: 70px;  /* pont invisible plus grand = traverse facile */

    /* ===== Layout sizing ===== */
    --panda-cartdrop-w: 360px;
    --panda-cartdrop-maxh: 72vh;
    --panda-cartdrop-pad: 14px;
    --panda-cartdrop-gap-y: 10px;

    --panda-cartdrop-img: 44px;
    --panda-cart-gap: 12px;
    --panda-cartdrop-font: 13px;

    /* ✅ AJOUT: taille zone X remove (juste visuel) */
    --panda-cartdrop-x: 26px;

    /* =======================================================
       ✅ AJOUT — DÉPLACEMENT PIXEL (COMMANDER)
    ======================================================= */
    --panda-cmd-wrap-x: 17%;
    --panda-cmd-wrap-y: 0px;
    --panda-cmd-btn-x:  0px;
    --panda-cmd-btn-y:  0px;
  }

  /* Base anchor */
  #header .shopping_cart{
    position: relative;
    z-index: var(--panda-cartdrop-z) !important;
  }

  /* Dropdown container (base) */
  #header .shopping_cart .cart_block{
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + var(--panda-cartdrop-gap)) !important;
    z-index: var(--panda-cartdrop-z) !important;

    width: var(--panda-cartdrop-w) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--panda-cartdrop-maxh) !important;

    background: #fff !important;
    border: 2px solid var(--panda-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: var(--panda-cartdrop-font) !important;

    pointer-events: auto !important;

    /* ✅ layout flex (pour footer bottom + scroll) */
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* open */
  #header .shopping_cart:hover .cart_block,
  #header .shopping_cart .cart_block:hover{
    display: flex !important;
    flex-direction: column !important;
  }

  /* PONT INVISIBLE */
  #header .shopping_cart .cart_block::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(-1 * var(--panda-cartdrop-bridge)) !important;
    height: var(--panda-cartdrop-bridge) !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  #header .shopping_cart .cart_block *{
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  #header,
  #header .header-container,
  #header .header_container,
  #header .clearfix,
  #header .block_right{
    overflow: visible !important;
  }

  /* block_content */
  #header .shopping_cart .cart_block .block_content{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;

    min-height: 0 !important;
  }

  /* zone produits scroll */
  #header .shopping_cart .cart_block .cart_block_list{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding: var(--panda-cartdrop-pad) !important;
    padding-bottom: var(--panda-cartdrop-pad) !important;
    width: 100% !important;
  }

  /* fallback */
  #header .shopping_cart .cart_block #cart_block_list{
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  /* séparateurs */
  #header .shopping_cart .cart_block .products dt,
  #header .shopping_cart .cart_block .products dd{
    border-bottom: 1px solid #e5e5e5 !important;
  }

  /* =======================================================
     ✅ FIX ITEMS (Prestashop 1.6 markup):
     dt contient: a.cart-images + div.cart-info + span.remove_link
     -> grid 3 colonnes (img | infos | X)
     -> plus d’overlap, X toujours visible
  ======================================================= */
  #header .shopping_cart .cart_block #cart_block_list dt,
  #header .shopping_cart .cart_block #cart_block_list dt.item,
  #header .shopping_cart .cart_block #cart_block_list dt.first_item,
  #header .shopping_cart .cart_block #cart_block_list dt.last_item{
    display: grid !important;
    grid-template-columns: var(--panda-cartdrop-img) 1fr var(--panda-cartdrop-x) !important;
    column-gap: var(--panda-cart-gap) !important;
    align-items: start !important;

    padding: 10px 0 !important;  /* évite que tout se colle / overlap */
    margin: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  /* image = colonne 1 (SANS margin-left négatif = stop overlap) */
  #header .shopping_cart .cart_block #cart_block_list dt > a.cart-images,
  #header .shopping_cart .cart_block #cart_block_list dt.item > a.cart-images,
  #header .shopping_cart .cart_block #cart_block_list dt.first_item > a.cart-images,
  #header .shopping_cart .cart_block #cart_block_list dt.last_item > a.cart-images{
    grid-column: 1 !important;
    display: block !important;
    width: var(--panda-cartdrop-img) !important;
    height: var(--panda-cartdrop-img) !important;
    overflow: hidden !important;
    margin: 0 !important;
    justify-self: start !important;
  }

  #header .shopping_cart .cart_block #cart_block_list dt > a.cart-images img,
  #header .shopping_cart .cart_block #cart_block_list dt.item > a.cart-images img,
  #header .shopping_cart .cart_block #cart_block_list dt.first_item > a.cart-images img,
  #header .shopping_cart .cart_block #cart_block_list dt.last_item > a.cart-images img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* infos = colonne 2, shrink OK */
  #header .shopping_cart .cart_block #cart_block_list dt .cart-info{
    grid-column: 2 !important;
    min-width: 0 !important;          /* IMPORTANT: empêche les chevauchements */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* X remove = colonne 3 (toujours visible) */
  #header .shopping_cart .cart_block #cart_block_list dt span.remove_link,
  #header .shopping_cart .cart_block #cart_block_list dt .remove_link{
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    width: var(--panda-cartdrop-x) !important;
    height: var(--panda-cartdrop-x) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* lien remove (ajax_cart_block_remove_link) */
  #header .shopping_cart .cart_block #cart_block_list dt a.ajax_cart_block_remove_link,
  #header .shopping_cart .cart_block #cart_block_list dt a.cart_block_remove_link{
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;

    color: #000 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-size: 22px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* dd neutre */
  #header .shopping_cart .cart_block #cart_block_list dd{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PRICES */
  #header .shopping_cart .cart_block .cart-prices{
    padding: 0 var(--panda-cartdrop-pad) !important;
    margin: var(--panda-cartdrop-gap-y) 0 0 !important;
    width: 100% !important;
  }
  #header .shopping_cart .cart_block .cart-prices,
  #header .shopping_cart .cart_block .cart-prices *{
    text-align: left !important;
  }

  /* +/- GOLD */
  #header .shopping_cart .cart_block .cart_quantity_up,
  #header .shopping_cart .cart_block .cart_quantity_down{
    background: linear-gradient(180deg,
      var(--panda-gold-1) 0%,
      var(--panda-gold-2) 55%,
      var(--panda-gold-3) 100%) !important;

    border: 2px solid var(--panda-border) !important;
    border-radius: 10px !important;
    color: #000 !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #header .shopping_cart .cart_block .cart_quantity_up:hover,
  #header .shopping_cart .cart_block .cart_quantity_down:hover{
    background: linear-gradient(180deg,
      var(--panda-gold-2) 0%,
      var(--panda-gold-1) 45%,
      var(--panda-gold-3) 100%) !important;
  }

  /* footer bouton */
  #header .shopping_cart .cart_block p.cart-buttons,
  #header .shopping_cart .cart_block .cart-buttons{
    margin: 0 !important;
    margin-top: auto !important;
    padding: var(--panda-cartdrop-pad) !important;
    width: 75% !important;

    background: #fff !important;
    text-align: center !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    overflow: visible !important;
    clear: both !important;

    position: relative !important;
    transform: translate(var(--panda-cmd-wrap-x), var(--panda-cmd-wrap-y)) !important;
  }

  /* COMMANDER */
  #header .shopping_cart .cart_block .cart-buttons a,
  #header .shopping_cart .cart_block p.cart-buttons > a,
  #header .shopping_cart .cart_block p.cart-buttons > a#button_order_cart,
  #header .shopping_cart .cart_block .cart-buttons > a#button_order_cart{
    float: none !important;
    display: block !important;
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;

    background: linear-gradient(180deg,
      var(--panda-gold-1) 0%,
      var(--panda-gold-2) 55%,
      var(--panda-gold-3) 100%) !important;

    border: 2px solid var(--panda-border) !important;
    border-radius: var(--panda-radius) !important;

    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    padding: 14px 18px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    text-align: center !important;

    position: relative !important;
    transform: translate(var(--panda-cmd-btn-x), var(--panda-cmd-btn-y)) !important;
  }

  #header .shopping_cart .cart_block .cart-buttons a span,
  #header .shopping_cart .cart_block .cart-buttons a em,
  #header .shopping_cart .cart_block p.cart-buttons > a#button_order_cart span,
  #header .shopping_cart .cart_block p.cart-buttons > a#button_order_cart em{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
  }

  #header .shopping_cart .cart_block .cart-buttons a:hover{
    background: linear-gradient(180deg,
      var(--panda-gold-2) 0%,
      var(--panda-gold-1) 45%,
      var(--panda-gold-3) 100%) !important;
  }
}

/* =======================================================
   420PANDA — MOVE CART THUMBS (pixel X/Y) — POS_RUBY6 / PS 1.6.1.18
   ...
======================================================= */

@media (min-width: 768px){
  :root{
    --panda-cart-thumb-x: -60px;
    --panda-cart-thumb-y: 0px;
  }

  #header .shopping_cart_header .shopping_cart
  .cart_block .cart_block_list dl.products > dt > a.cart-images > img{
    transform: translate3d(var(--panda-cart-thumb-x), var(--panda-cart-thumb-y), 0) !important;
    will-change: transform !important;
  }

  #header .shopping_cart
  .cart_block .cart_block_list dl.products > dt > a.cart-images > img{
    transform: translate3d(var(--panda-cart-thumb-x), var(--panda-cart-thumb-y), 0) !important;
    will-change: transform !important;
  }
}

/* ======================================================= 
   420PANDA — CART DROPDOWN (STICKY ONLY)
   ...
======================================================= */

@media (min-width: 768px){
  @supports selector(:has(*)) {
    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-cartdrop-w: 360px;
      --panda-cartdrop-top: 17px;
      --panda-cartdrop-x: -200px;
      --panda-cartdrop-z: 999999;
      --panda-cartdrop-maxh: 72vh;
      --panda-cartdrop-bridge: 55px;
      --panda-cartdrop-gap: 0px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart{
      position: fixed !important;
      z-index: var(--panda-cartdrop-z) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart .cart_block.toogle_content.exclusive{
      display: flex !important;
      flex-direction: column !important;

      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;

      position: absolute !important;
      top: var(--panda-cartdrop-top) !important;
      right: calc(0px + var(--panda-cartdrop-x)) !important;
      left: auto !important;

      width: var(--panda-cartdrop-w) !important;
      max-width: calc(100vw - 20px) !important;

      z-index: var(--panda-cartdrop-z) !important;
      transition: opacity .12s linear, visibility .12s linear !important;

      border-radius: 14px !important;
      overflow: hidden !important;
      max-height: var(--panda-cartdrop-maxh) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .block_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_list,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dt,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dd,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .remove_link,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-prices,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-buttons{
      transform: none !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive::before{
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: calc(-1 * var(--panda-cartdrop-bridge)) !important;
      height: var(--panda-cartdrop-bridge) !important;
      background: transparent !important;
      pointer-events: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .block_content{
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      flex: 1 1 auto !important;
      overflow: hidden !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_list{
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .block_content{
      position: relative !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products{
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dt{
      display: block !important;
      clear: both !important;
      padding: 10px 12px !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images{
      display: block !important;
      float: left !important;
      width: 80px !important;
      height: 80px !important;
      margin: 0 50px 0 0 !important;
      position: relative !important;
    }
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images img{
      display: block !important;
      width: 80px !important;
      height: 80px !important;
      object-fit: contain !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info{
      display: block !important;
      overflow: hidden !important;
      position: relative !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .remove_link{
      display: block !important;
      float: right !important;
      margin-left: 10px !important;
      position: relative !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:hover .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:focus-within .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart .cart_block.toogle_content.exclusive:hover{
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart::after{
      content: "" !important;
      position: absolute !important;
      right: 0px !important;
      top: 100% !important;
      width: 120px !important;
      height: calc(100px + var(--panda-cartdrop-gap)) !important;
      background: transparent !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_container,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header{
      position: relative !important;
      z-index: var(--panda-cartdrop-z) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .remove_link,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.ajax_cart_block_remove_link{
      display: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-prices{
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_shipping_cost,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_tax_cost,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_vouchers{
      display: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_total,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .ajax_cart_total,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive #cart_block_total{
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info .product-atributes,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info .quantity-formated{
      display: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dd{
      display: block !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-cart-img-shift: -65px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images{
      margin-right: calc(50px + var(--panda-cart-img-shift)) !important;
      margin-left: 0 !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-cart-img-x: 50px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images{
      margin-left: var(--panda-cart-img-x) !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    #header .shopping_cart > a{
      display: inline-flex !important;
      align-items: center !important;
      line-height: 0 !important;
    }

    #header .shopping_cart img#imagedupanier{
      display: block !important;
      vertical-align: middle !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --cart-top-empty-x:   -48px;
      --cart-top-empty-y:   -2px;

      --cart-top-filled-x:  -45px;
      --cart-top-filled-y:  -2px;

      --cart-sticky-empty-x:  3px;
      --cart-sticky-empty-y:  0px;

      --cart-sticky-filled-x: 3px;
      --cart-sticky-filled-y: 0px;
    }

    html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart img#imagedupanier{
      transform: translate3d(
        var(--cart-top-empty-x),
        var(--cart-top-empty-y),
        0
      ) !important;
    }

    html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier{
      transform: translate3d(
        var(--cart-top-filled-x),
        var(--cart-top-filled-y),
        0
      ) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart img#imagedupanier{
      transform: translate3d(
        var(--cart-sticky-empty-x),
        var(--cart-sticky-empty-y),
        0
      ) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier{
      transform: translate3d(
        var(--cart-sticky-filled-x),
        var(--cart-sticky-filled-y),
        0
      ) !important;
    }
  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .ajax_cart_quantity:empty,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .ajax_cart_quantity:not(:empty){
      display: none !important;
    }
  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:not(:hover):not(:focus-within)
    .cart_block.toogle_content.exclusive{
      pointer-events: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:not(:hover):not(:focus-within)
    .cart_block.toogle_content.exclusive *{
      pointer-events: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:hover
    .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:focus-within
    .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive:hover{
      pointer-events: auto !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:hover
    .cart_block.toogle_content.exclusive *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:focus-within
    .cart_block.toogle_content.exclusive *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive:hover *{
      pointer-events: auto !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)){

    /* ===== BASE (default) ===== */
    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-bridge-h: 23px;
      --panda-bridge-w: 40px;
      --panda-bridge-x: -55px; /* EN default */
    }

    /* ===== EN ONLY ===== */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-bridge-x: -90px;
    }

    /* ===== FR ONLY ===== */
    html[lang^="fr"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-bridge-x: -50px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart{
      position: fixed !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart::after{
      content:"" !important;
      position:absolute !important;
      top:100% !important;
      left: var(--panda-bridge-x) !important;
      width: var(--panda-bridge-w) !important;
      height: var(--panda-bridge-h) !important;
      background: transparent !important;
      outline: transparent !important;
      pointer-events:auto !important;
      z-index: 2147483647 !important;
    }

  }
}

@media (min-width:768px){
  #header .shopping_cart .ajax_cart_quantity,
  #header .shopping_cart .ajax_cart_product_txt,
  #header .shopping_cart .ajax_cart_product_txt_s{
    display:none !important;
  }

  #header .shopping_cart > a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width: 52px !important;
  }
}

} /* ✅ end desktop-only wrapper */

/* Anti-flicker for sticky cart during AJAX refresh */
@media (min-width: 768px){
  #header .shopping_cart_header .shopping_cart,
  #header .shopping_cart_header .shopping_cart *{
    visibility: visible !important;
  }

  /* If theme uses opacity animations / fades */
  #header .shopping_cart_header .shopping_cart{
    opacity: 1 !important;
    transition: none !important;
  }

  /* REPAIR — force Back-to-Top visible/clickable on desktop */
  .back-top,
  a.back-top-button{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: fixed !important;
    left: 20px !important;
    bottom: 20px !important;

    z-index: 2147483646 !important;
    pointer-events: auto !important;
  }
}
@media (min-width: 768px){

  /* When sticky is active, absolutely forbid movement animations */
  body:has(#iqitmegamenu-horizontal.cbp-sticky)
  #header .shopping_cart_header .shopping_cart{
    position: fixed !important;
    left: auto !important;
    bottom: auto !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    z-index: 999999 !important;
    will-change: auto !important;
  }
}
/* ==========================================================
   PRESTASHOP 1.6
   AddToCartAnimation – FIXED MESSAGE POSITION (REAL FIX)
   Correct element: .succesFixedMessageClass
========================================================== */

@media (min-width: 0px){

  body > .succesFixedMessageClass{
    /* FORCE viewport anchoring */
    position: fixed !important;

    /* === POSITION CONTROLS === */
    top: 80px !important;        /* ↓ LOWER (increase = lower) */
    right: 24px !important;      /* ← move left from right edge */
    left: auto !important;
    bottom: auto !important;

    /* OVERRIDE MODULE INLINE + JS */
    transform: none !important;
    transition: none !important;
    animation: none !important;

    /* VISIBILITY SAFETY */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    /* STACKING */
    z-index: 999999 !important;

    /* SIZE CONTROL */
    max-width: 520px;
    width: auto;

    box-sizing: border-box;
  }

  /* Inner alert: keep it passive */
  body > .succesFixedMessageClass
  > .succesFixedMessageWindowClass.alert{
    position: relative !important;
    margin: 0 !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
/* ==========================================================
   PS 1.6 — AddToCartAnimation fixed message — FORCE position
   Works even if element is not body direct child
========================================================== */

@media (min-width: 0px){

  /* target both spellings (some modules use both) */
  html body .succesFixedMessageClass,
  html body .successFixedMessageClass{
    position: fixed !important;

    /* === YOUR POSITION CONTROLS === */
    top: 60px !important;      /* move DOWN */
    right: 24px !important;    /* move LEFT from the right edge */
    left: auto !important;
    bottom: auto !important;

    /* if JS tries to push it somewhere */
    margin: 0 !important;
    transform: translate3d(0,0,0) !important;

    z-index: 2147483647 !important; /* always on top */
    width: auto !important;
    max-width: 520px !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body .succesFixedMessageClass .succesFixedMessageWindowClass,
  html body .successFixedMessageClass .successFixedMessageWindowClass{
    margin: 0 !important;
    transform: none !important;
  }
}
/* ==========================================================
   420PANDA — AddToCart MESSAGE
   Exact Add-To-Cart button style + transparency
========================================================== */

@media (min-width: 0px){

  /* OUTER WRAPPER (acts like button frame) */
  html body .succesFixedMessageClass,
  html body .successFixedMessageClass{
    /* Use same gold gradient logic as buttons */
    background: linear-gradient(
      to bottom,
      rgba(255, 215, 120, 0.92) 0%,
      rgba(240, 184, 58, 0.92) 45%,
      rgba(217, 154, 33, 0.92) 100%
    ) !important;

    border: 1px solid rgba(123, 82, 15, 0.9) !important;
    border-radius: 8px !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      0 4px 10px rgba(0,0,0,.35) !important;

    padding: 4px !important;
    backdrop-filter: saturate(120%);
  }

  /* INNER BAR (actual message = button face) */
  html body .succesFixedMessageWindowClass.alert,
  html body .successFixedMessageWindowClass.alert{
    background: linear-gradient(
      to bottom,
      rgba(255, 223, 140, 0.88) 0%,
      rgba(242, 186, 60, 0.88) 50%,
      rgba(214, 148, 26, 0.88) 100%
    ) !important;

    border: 1px solid rgba(155, 107, 22, 0.85) !important;
    border-radius: 6px !important;

    color: #2b1a00 !important;
    font-weight: bold !important;
    font-size: 14px !important;

    text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;

    padding: 10px 38px 10px 14px !important;
    line-height: 1.3 !important;
  }

  /* TEXT + LINK (same as button text) */
  html body .succesFixedMessageWindowClass.alert span,
  html body .successFixedMessageWindowClass.alert span,
  html body .succesFixedMessageWindowClass.alert a,
  html body .successFixedMessageWindowClass.alert a{
    color: #2b1a00 !important;
    font-weight: bold !important;
    text-decoration: none !important;
  }

  /* CLOSE BUTTON — styled like button highlight */
  html body .succesFixedMessageWindowClass.alert .close,
  html body .successFixedMessageWindowClass.alert .close{
    position: absolute;
    top: 6px;
    right: 10px;

    color: #2b1a00 !important;
    opacity: .85 !important;

    font-size: 18px !important;
    font-weight: bold !important;

    text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
  }

  html body .succesFixedMessageWindowClass.alert .close:hover,
  html body .successFixedMessageWindowClass.alert .close:hover{
    opacity: 1 !important;
    color: #000 !important;
  }
}
/* =======================================================
   420PANDA — MOBILE ONLY — PRECISION NUDGES (COG + CART)
   - Works for empty + filled cart (same element)
   - Separate micro-adjust for EN vs FR
======================================================= */

@media (max-width: 767px){

  /* ===== Default (EN) micro positions ===== */
  html{
    --panda-mob-cart-x: -10px;
    --panda-mob-cart-y: 0px;
  }

  /* ===== FR micro positions ===== */
  html[lang^="fr"]{
    --panda-mob-cart-x: -10px;
    --panda-mob-cart-y: 0px;
  }


  /* CART (empty + filled): nudge the whole cart block without breaking layout */
  #header .shopping_cart_header .shopping_cart{
    position: relative !important;
    transform: translate3d(var(--panda-mob-cart-x), var(--panda-mob-cart-y), 0) !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================ 
   420PANDA — DESKTOP FILTER MENU CONTROL PANEL (CSS-only)
   - Designed for #left_column + Layered Navigation (blocklayered)
   - Every aesthetic/positioning piece is adjustable via variables
   - Keeps CENTER layout full width (acts like filters don’t exist)
   - Adds FULL control for the title background behind “FILTERS ACTIFS”
   - Removes the tiny inner scrollbars (only the rail scrolls)
   - Adds CSS-only collapse on “zoom” (viewport gets narrow)
============================================================ */

/* DESKTOP ONLY */
@media (min-width: 992px){

  /* ============================================================
     1) MASTER KNOBS (change these first)
     ------------------------------------------------------------
     Increase value => more / bigger / further right/down
     Decrease value => less / smaller / further left/up
  ============================================================ */
  #left_column{
    /* ==== RAIL POSITION & SIZE ==== */
    --filters-w: 240px;           /* ↑ wider rail / ↓ narrower rail */
    --filters-top: 185px;         /* ↑ pushes rail DOWN / ↓ moves it UP */
    --filters-height: 190px;      /* unused knob, kept for reference */
    --filters-left: 0px;          /* ↑ pushes rail RIGHT / ↓ moves it LEFT (negative goes off-screen) */
    --filters-bottom-pad: 150px;  /* ↑ more padding at bottom INSIDE rail */
    --filters-top-pad: 10px;      /* padding interne en haut du rail */
    --filters-bottom-gap: 100px;  /* ↑ more space above bottom / ↓ less */

    /* ==== RAIL INNER SPACING ==== */
    --filters-rail-pad-x: 12px;   /* ↑ more left/right padding inside rail */
    --filters-rail-pad-y: 4px;    /* ↑ more top/bottom padding inside rail */
    --filters-rail-gap: 0px;      /* ↑ more spacing BETWEEN filter sections */

    /* ==== RAIL LOOK (background/border/shadow) ==== */
    --filters-rail-bg: none;              /* rail background (ex: #fff) */
    --filters-rail-border-w: 0px;         /* ↑ thicker border */
    --filters-rail-border-color: #e6e6e6;
    --filters-rail-radius: 0px;           /* ↑ rounder rail corners */
    --filters-rail-shadow: none;          /* ex: 0 6px 22px rgba(0,0,0,.15) */

    /* ==== HEADER / SECTION TITLE (CATÉGORIES, DISPONIBILITÉ, FILTERS ACTIFS…) ==== */
    --filters-title-font-size: 12px;      /* ↑ bigger titles */
    --filters-title-font-weight: 800;     /* ↑ bolder titles */
    --filters-title-color: #111;
    --filters-title-letter: 0.4px;        /* ↑ more letter spacing */
    --filters-title-transform: uppercase; /* uppercase / none */
    --filters-title-margin-b: 0px;        /* ↑ more space UNDER title */

    /* ✅ NEW: TITLE BACKGROUND (behind “FILTERS ACTIFS” text) */
    --filters-title-bg: #FFFFFF00;        /* ex: #f2f2f2 or gradient */
    --filters-title-pad-x: 8px;           /* ↑ background extends more left/right */
    --filters-title-pad-y: 6px;           /* ↑ background extends more top/bottom */
    --filters-title-radius: 0px;          /* ↑ rounds the title background */

    /* ✅ NEW: TITLE ALIGN + HEIGHT FEEL */
    --filters-title-align: left;          /* left / center / right */
    --filters-title-lineh: 1.2;           /* ↑ taller title line spacing */

    /* ==== ACTIVE FILTERS BAR (FILTRES ACTIFS) ==== */
    --filters-active-bg: transparent;     /* background color of gray bar */
    --filters-active-border: transparent; /* bottom/outline border */
    --filters-active-radius: 0px;         /* rounded corners */
    --filters-active-pad-x: 10px;         /* left/right padding */
    --filters-active-pad-y: 6px;          /* top/bottom padding */
    --filters-active-margin-b: 10px;      /* space below the bar */

    /* ==== EACH FILTER "CARD" / SECTION WRAPPER ==== */
    --filters-card-bg: transparent;       /* background behind each filter group */
    --filters-card-border-w: 0px;
    --filters-card-border-color: #eee;
    --filters-card-radius: 0px;
    --filters-card-pad-x: 0px;            /* ↑ more inner padding left/right */
    --filters-card-pad-y: 0px;            /* ↑ more inner padding top/bottom */
    --filters-card-shadow: none;

    /* ✅ NEW: SPACE BETWEEN EACH FILTER GROUP (more reliable than margin guesses) */
    --filters-section-gap: 10px;          /* ↑ more vertical space between groups */

    /* ==== DIVIDERS / LINES ==== */
    --filters-divider-w: 0px;             /* 0px = no divider, 1px = thin line, 2px = thicker */
    --filters-divider-color: #e9e9e9;
    --filters-divider-gap: 0px;           /* ↑ more space around divider */

    /* ==== DROPDOWN / SELECT LOOK (Aucun filtre pills) ==== */
    --filters-select-h: 28px;             /* ↑ taller dropdown */
    --filters-select-font: 11px;          /* ↑ larger text */
    --filters-select-radius: 999px;       /* ↑ more round (999px = pill) */
    --filters-select-border-w: 1px;
    --filters-select-border: #111;
    --filters-select-bg: #fff;
    --filters-select-color: #111;
    --filters-select-pad-x: 12px;         /* ↑ more inner left/right space */
    --filters-select-shadow: none;

    /* ✅ NEW: SELECT ARROW (some themes hide/replace it) */
    --filters-select-arrow-color: #111;   /* only affects some browsers/themes */

    /* ==== LABELS ABOVE SELECTS (Catégories, Disponibilité, etc.) ==== */
    --filters-label-font: 13px;           /* ↑ label size */
    --filters-label-weight: 800;          /* ↑ label boldness */
    --filters-label-color: #111;
    --filters-label-margin-b: 0px;        /* ↑ space between label and dropdown */

    /* ✅ NEW: CHECKBOX / COUNT / LINK STYLE (when filters are lists) */
    --filters-item-font: 12px;            /* ↑ list item size */
    --filters-item-color: #111;           /* list text */
    --filters-item-lineh: 1.25;           /* ↑ more vertical breathing room */
    --filters-item-gap-y: 6px;            /* ↑ spacing between each option */

    /* ✅ NEW: INDENTATION (checkbox lists) */
    --filters-item-indent: 0px;           /* ↑ pushes list items right */
    --filters-item-hitpad-y: 2px;         /* ↑ makes click area taller */
    --filters-item-hitpad-x: 0px;         /* ↑ makes click area wider */

    /* ==== MICRO SCROLLBAR KILL SWITCH ==== */
    --filters-kill-inner-scroll: 1;       /* 1 = remove tiny scrollbars inside filters */

    /* ============================================================
       2) COLLAPSE (zoom / narrow viewport) toggle controls
       NOTE: CSS cannot detect browser zoom directly.
       Zoom usually MAKES the viewport effectively narrower,
       so we collapse based on max-width.
    ============================================================ */
    --filters-collapse-at: 220px;        /* ↑ collapses later / ↓ collapses sooner */

    /* Toggle button ( + ) position */
    --filters-btn-left: 12px;             /* ↑ moves button right */
    --filters-btn-top: var(--filters-top);/* ↑ moves button down */
    --filters-btn-size: 40px;             /* ↑ bigger button */
    --filters-btn-radius: 8px;            /* ↑ rounder */
    --filters-btn-font: 22px;             /* ↑ bigger plus sign */

    /* Toggle button “gold” look */
    --filters-btn-bg1: #f6d37a;           /* top gradient */
    --filters-btn-bg2: #d59a2a;           /* bottom gradient */
    --filters-btn-border: #000;
    --filters-btn-border-w: 2px;
    --filters-btn-shadow: 0 2px 0 rgba(0,0,0,.35);
    --filters-btn-color: #000;

    /* ✅ NEW: OPEN PANEL LOOK (when + is opened) */
    --filters-open-overlay: transparent;  /* optional: rgba(0,0,0,.25) if you add overlay later */
  }


  /* ============================================================
     3) CORE LAYOUT BEHAVIOR (do not touch unless needed)
  ============================================================ */

  /* Fixed rail (standalone desktop mode) */
  #left_column{
    position: fixed !important;
    left: var(--filters-left) !important;
    top: var(--filters-top) !important;

    width: var(--filters-w) !important;
    max-width: var(--filters-w) !important;

    height: calc(100vh - var(--filters-top) - var(--filters-bottom-gap)) !important;
    bottom: var(--filters-bottom-gap) !important; /* optional but helps “pin” the gap */

    /* ONLY scroll here (overridden later when inside #panda-layered-panel) */
    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 60000 !important; /* below header (50000), above content */
    margin: 0 !important;
    transform: none !important;

    /* Rail look */
    background: var(--filters-rail-bg) !important;
    border: var(--filters-rail-border-w) solid var(--filters-rail-border-color) !important;
    border-radius: var(--filters-rail-radius) !important;
    box-shadow: var(--filters-rail-shadow) !important;

    /* Rail inner padding */
    padding: var(--filters-rail-pad-y) var(--filters-rail-pad-x) !important;
    padding-bottom: calc(var(--filters-rail-pad-y) + var(--filters-bottom-pad)) !important;
    padding-top: calc(var(--filters-rail-pad-y) + var(--filters-top-pad)) !important;
  }

  /* ============================================================
     ✅ ADDITION — MOVE THE FILTER RAIL SCROLLBAR TO THE LEFT EDGE
  ============================================================ */

  /* Scrollbar goes LEFT */
  #left_column{
    direction: rtl !important;
  }

  /* Content stays normal */
  #left_column #layered_block_left,
  #left_column .blocklayered{
    direction: ltr !important;
  }

  /* Safety: keep readable alignment */
  #left_column .layered_subtitle,
  #left_column .layered_subtitle_heading,
  #left_column .layered_subtitle span,
  #left_column .title_block,
  #left_column .block .title_block,
  #left_column #layered_block_left .title_block,
  #left_column label,
  #left_column #layered_block_left li,
  #left_column #layered_block_left li a{
    text-align: left !important;
  }

  /* Fill rail */
  #left_column #layered_block_left,
  #left_column .blocklayered{
    width: 100% !important;
    margin: 0 !important;
  }

  /* Keep center content FULL width (layout acts like filters don’t exist) */
  #center_column{
    margin-left: 0 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #columns .row > #center_column,
  #columns .row > .center_column{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent clipping around the rail */
  .columns-container,
  #columns,
  .container{
    overflow: visible !important;
  }


  /* ============================================================
     4) FILTER MENU AESTHETICS (titles, labels, items, selects)
  ============================================================ */

  /* Reliable spacing between filter GROUPS */
  #left_column #layered_block_left .layered_filter,
  #left_column #layered_block_left .layered-filter,
  #left_column #layered_block_left .block,
  #left_column #layered_block_left .layered_filter_ul,
  #left_column #layered_block_left .layered-filter-ul{
    margin-bottom: var(--filters-section-gap) !important;
  }

  /* Each filter “card” / wrapper (common nodes) */
  #left_column .layered_filter,
  #left_column .layered-filter,
  #left_column .layered_filter_ul,
  #left_column .layered-filter-ul{
    background: var(--filters-card-bg) !important;
    border: var(--filters-card-border-w) solid var(--filters-card-border-color) !important;
    border-radius: var(--filters-card-radius) !important;
    box-shadow: var(--filters-card-shadow) !important;
    padding: var(--filters-card-pad-y) var(--filters-card-pad-x) !important;
  }

  /* Section titles */
  #left_column .layered_subtitle,
  #left_column .layered_subtitle_heading,
  #left_column .layered_subtitle span,
  #left_column .title_block,
  #left_column .block .title_block,
  #left_column #layered_block_left .title_block{
    font-size: var(--filters-title-font-size) !important;
    font-weight: var(--filters-title-font-weight) !important;
    color: var(--filters-title-color) !important;
    letter-spacing: var(--filters-title-letter) !important;
    text-transform: var(--filters-title-transform) !important;
    line-height: var(--filters-title-lineh) !important;
    text-align: var(--filters-title-align) !important;

    background: var(--filters-title-bg) !important;
    padding: var(--filters-title-pad-y) var(--filters-title-pad-x) !important;
    border-radius: var(--filters-title-radius) !important;

    margin: 0 0 var(--filters-title-margin-b) 0 !important;
  }

  /* Labels (some themes use labels inside filters) */
  #left_column label,
  #left_column .layered_filter label,
  #left_column .layered-filter label{
    font-size: var(--filters-label-font) !important;
    font-weight: var(--filters-label-weight) !important;
    color: var(--filters-label-color) !important;
    margin-bottom: var(--filters-label-margin-b) !important;
  }

  /* List items (checkbox lists / links / counts) */
  #left_column #layered_block_left li,
  #left_column #layered_block_left li a,
  #left_column #layered_block_left .layered_filter label{
    font-size: var(--filters-item-font) !important;
    color: var(--filters-item-color) !important;
    line-height: var(--filters-item-lineh) !important;
  }

  /* Make each option easier to click + control spacing */
  #left_column #layered_block_left li{
    margin: 0 0 var(--filters-item-gap-y) 0 !important;
    padding: var(--filters-item-hitpad-y) var(--filters-item-hitpad-x) !important;
    padding-left: calc(var(--filters-item-indent) + var(--filters-item-hitpad-x)) !important;
  }

  /* Divider lines (optional) */
  #left_column hr{
    border: none !important;
    border-top: var(--filters-divider-w) solid var(--filters-divider-color) !important;
    margin: var(--filters-divider-gap) 0 !important;
  }

  /* Dropdown/select */
  #left_column select,
  #left_column .layered_filter select,
  #left_column .layered-filter select{
    height: var(--filters-select-h) !important;
    line-height: calc(var(--filters-select-h) - 2px) !important;

    font-size: var(--filters-select-font) !important;
    color: var(--filters-select-color) !important;

    background: var(--filters-select-bg) !important;
    border: var(--filters-select-border-w) solid var(--filters-select-border) !important;
    border-radius: var(--filters-select-radius) !important;

    padding-left: var(--filters-select-pad-x) !important;
    padding-right: var(--filters-select-pad-x) !important;

    box-shadow: var(--filters-select-shadow) !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  /* Dropdown arrow color hint */
  #left_column select{
    accent-color: var(--filters-select-arrow-color);
  }

} /* end desktop media (main block) */


/* ============================================================
   ACTIVE FILTERS BAR (FILTRES ACTIFS :)
============================================================ */

#left_column #enabled_filters{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;

  /* élargissement visuel du conteneur */
  margin-left: -6px !important;
  margin-right: -6px !important;
  padding-left: calc(var(--filters-active-pad-x) + 6px) !important;
  padding-right: calc(var(--filters-active-pad-x) + 6px) !important;

  background: rgba(255,255,255,1) !important;
  background-clip: padding-box !important;

  border: 1px solid var(--filters-active-border) !important;
  border-radius: var(--filters-active-radius) !important;

  padding-top: var(--filters-active-pad-y) !important;
  padding-bottom: var(--filters-active-pad-y) !important;
  margin-bottom: var(--filters-active-margin-b) !important;
}

/* Allow sticky inside filters rail */
#left_column #layered_block_left,
#left_column #layered_block_left .block_content,
#left_column #layered_form,
#layered_form{
  overflow: visible !important;
}

/* Text inside the bar */
#left_column #enabled_filters,
#left_column #enabled_filters *{
  font-size: var(--filters-title-font-size) !important;
  font-weight: var(--filters-title-font-weight) !important;
  color: var(--filters-title-color) !important;
  text-transform: var(--filters-title-transform) !important;
}

/* ============================================================
   DESKTOP — élargir le fond blanc + fade bottom
   (n’altère pas la position des selects)
============================================================ */
@media (min-width: 992px){

  /* Ajuste juste cette valeur */
  #left_column{
    --filters-bg-pad: 12px;     /* élargit le fond blanc à gauche/droite */
    --filters-fade-h: 10px;     /* hauteur du fade en bas */
  }

  /* Fond blanc un peu plus large que le contenu */
  #left_column #layered_block_left,
  #left_column .blocklayered,
  #left_column #layered_block_left .block_content{
    background: #fff !important;

    padding-left: var(--filters-bg-pad) !important;
    padding-right: var(--filters-bg-pad) !important;

    margin-left: calc(-1 * var(--filters-bg-pad)) !important;
    margin-right: calc(-1 * var(--filters-bg-pad)) !important;

    padding-bottom: calc(var(--filters-fade-h) + 6px) !important;
  }
}


/* ============================================================
   5) REMOVE MICRO SCROLLBARS INSIDE EACH FILTER
============================================================ */

#layered_block_left ul,
#layered_block_left ul[id^="ul_layered_"],
#layered_block_left .layered_filter_ul,
#layered_block_left .layered-filter-ul{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

#layered_block_left .layered_filter,
#layered_block_left .layered-filter,
#layered_block_left .layered_filter_content,
#layered_block_left .layered-filter-content,
#layered_block_left .content{
  overflow: visible !important;
  max-height: none !important;
}


/* ============================================================
   MOBILE/TABLET — NORMAL BEHAVIOR
============================================================ */
@media (max-width: 991px){

  #left_column{
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #center_column{ margin-left: 0 !important; }
}


/* ============================================================
   MOBILE — FIX STICKY FILTERS UNDER STICKY MENU (CSS-only)
============================================================ */
@media (max-width: 991px){

  #left_column{
    --mStickyHeaderH: 109px;
    --mBottomGap: 14px;
    --mRailSidePad: 0px;
    --mRailPadX: 0px;
    --mRailPadY: 6px;
    --mRailRadius: 0px;

    --mRailMaxH: calc(100vh - var(--mStickyHeaderH) - 80px);

    --mRailBg: transparent;
    --mRailBorderW: 0px;
    --mRailBorderC: transparent;
    --mRailShadow: none;
    --mRailBackdrop: none;

    --mRailBg_stuck: rgba(255,255,255,0.96);
    --mRailBorderW_stuck: 1px;
    --mRailBorderC_stuck: transparent;
    --mRailShadow_stuck: 1px 2px 10px rgba(0,0,0,0.06);
    --mRailBackdrop_stuck: none;
    --mStickyHeaderH: 107px;
    --mRailMinH: 50px;
    --mRailPadY_stuck: 12px;
    --mRailLineH: 1.4;
    --mRailBottomBorder: 1px;
    --mRailBottomBorderColor: rgba(0,0,0,0.06);

    --mFontBase: 12px;
    --mFontColor: #111;
    --mFontWeight: 700;

    --mTitleFont: 12px;
    --mTitleWeight: 800;
    --mTitleColor: #111;
    --mTitleLetter: 0.4px;
    --mTitleTransform: uppercase;
    --mTitleAlign: left;
    --mTitleLineH: 1.2;

    --mTitleBg: transparent;
    --mTitlePadX: 28px;
    --mTitlePadY: 6px;
    --mTitleRadius: 0px;
    --mTitleMarginB: 0px;

    --mActiveBg: transparent;
    --mActiveBorder: transparent;
    --mActiveRadius: 0px;
    --mActivePadX: 10px;
    --mActivePadY: 6px;
    --mActiveMarginB: 10px;

    --mItemFont: 12px;
    --mItemColor: #111;
    --mItemLineH: 1.25;
    --mItemGapY: 6px;
    --mItemIndent: 0px;
    --mItemHitPadY: 2px;
    --mItemHitPadX: 0px;

    --mSelectH: 32px;
    --mSelectFont: 12px;
    --mSelectRadius: 999px;
    --mSelectBorderW: 1px;
    --mSelectBorderC: #111;
    --mSelectBg: #fff;
    --mSelectColor: #111;
    --mSelectPadX: 12px;
  }

  html, body,
  #page, #columns, .columns-container,
  #columns .container, #columns .row{
    overflow: visible !important;
  }

  #left_column{
    float: none !important;
    clear: both !important;

    left: var(--mRailSidePad) !important;
    right: var(--mRailSidePad) !important;
    width: calc(100% - (var(--mRailSidePad) * 2)) !important;
    max-width: 100% !important;

    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(-1 * (100vw - 100%)/2) !important;
    margin-right: calc(-1 * (100vw - 100%)/2) !important;

    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--mStickyHeaderH) !important;
    z-index: 39000 !important;

    max-height: var(--mRailMaxH) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: var(--mRailBg) !important;
    border: var(--mRailBorderW) solid var(--mRailBorderC) !important;
    border-radius: var(--mRailRadius) !important;
    box-shadow: var(--mRailShadow) !important;
    -webkit-backdrop-filter: var(--mRailBackdrop) !important;
    backdrop-filter: var(--mRailBackdrop) !important;

    padding: var(--mRailPadY) var(--mRailPadX) !important;
  }

  #left_column,
  #left_column *{
    font-size: var(--mFontBase) !important;
    color: var(--mFontColor) !important;
    font-weight: var(--mFontWeight) !important;
  }

  #left_column #layered_block_left,
  #left_column .blocklayered{
    width: 100% !important;
    margin: 0 !important;
  }

  #left_column .layered_subtitle,
  #left_column .layered_subtitle_heading,
  #left_column .layered_subtitle span,
  #left_column .title_block,
  #left_column .block .title_block,
  #left_column #layered_block_left .title_block{
    font-size: var(--mTitleFont) !important;
    font-weight: var(--mTitleWeight) !important;
    color: var(--mTitleColor) !important;
    letter-spacing: var(--mTitleLetter) !important;
    text-transform: var(--mTitleTransform) !important;
    line-height: var(--mTitleLineH) !important;
    text-align: var(--mTitleAlign) !important;

    background: var(--mTitleBg) !important;
    padding: var(--mTitlePadY) var(--mTitlePadX) !important;
    border-radius: var(--mTitleRadius) !important;
    margin: 0 0 var(--mTitleMarginB) 0 !important;
  }

  #left_column #enabled_filters{
    background: var(--mActiveBg) !important;
    border: 1px solid var(--mActiveBorder) !important;
    border-radius: var(--mActiveRadius) !important;
    padding: var(--mActivePadY) var(--mActivePadX) !important;
    margin-bottom: var(--mActiveMarginB) !important;
  }

  #left_column #layered_block_left li,
  #left_column #layered_block_left li a,
  #left_column #layered_block_left .layered_filter label{
    font-size: var(--mItemFont) !important;
    color: var(--mItemColor) !important;
    line-height: var(--mItemLineH) !important;
    font-weight: 700 !important;
  }
  #left_column #layered_block_left li{
    margin: 0 0 var(--mItemGapY) 0 !important;
    padding: var(--mItemHitPadY) var(--mItemHitPadX) !important;
    padding-left: calc(var(--mItemIndent) + var(--mItemHitPadX)) !important;
  }

  #left_column select,
  #left_column .layered_filter select,
  #left_column .layered-filter select{
    height: var(--mSelectH) !important;
    line-height: calc(var(--mSelectH) - 2px) !important;
    font-size: var(--mSelectFont) !important;

    background: var(--mSelectBg) !important;
    color: var(--mSelectColor) !important;

    border: var(--mSelectBorderW) solid var(--mSelectBorderC) !important;
    border-radius: var(--mSelectRadius) !important;

    padding-left: var(--mSelectPadX) !important;
    padding-right: var(--mSelectPadX) !important;

    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  #layered_block_left ul,
  #layered_block_left ul[id^="ul_layered_"],
  #layered_block_left .layered_filter_ul,
  #layered_block_left .layered-filter-ul{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  @supports selector(:has(*)) {

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #left_column{
      background: var(--mRailBg) !important;
      border: var(--mRailBorderW) solid var(--mRailBorderC) !important;
      box-shadow: var(--mRailShadow) !important;
      -webkit-backdrop-filter: var(--mRailBackdrop) !important;
      backdrop-filter: var(--mRailBackdrop) !important;

      min-height: 0 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #left_column{
      background: var(--mRailBg_stuck) !important;

      min-height: var(--mRailMinH) !important;
      padding-top: var(--mRailPadY_stuck) !important;
      padding-bottom: var(--mRailPadY_stuck) !important;

      border: 0 !important;
      border-bottom: var(--mRailBottomBorder) solid var(--mRailBottomBorderColor) !important;

      box-shadow: var(--mRailShadow_stuck) !important;
      -webkit-backdrop-filter: var(--mRailBackdrop_stuck) !important;
      backdrop-filter: var(--mRailBackdrop_stuck) !important;
    }
  }
}

/* FIX overlay taps */
@media (max-width: 991px){

  #layered_block_left{ position: relative !important; }

  #layered_block_left > p.title_block{
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
  }

  #layered_block_left #layered_ajax_loader,
  #layered_block_left .layered_ajax_loader{
    pointer-events: none !important;
  }
}

/* ============================================================
   MOBILE — KILL THE BIG BLACK DIVIDER LINE
============================================================ */
@media (max-width: 991px){

  #left_column #layered_block_left,
  #left_column .blocklayered,
  #left_column .block{
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: var !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-image: none !important;
  }

  #left_column .title_block,
  #left_column .block .title_block,
  #left_column #layered_block_left .title_block,
  #left_column .layered_subtitle,
  #left_column .layered_subtitle_heading{
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  #left_column hr{ display:none !important; }

  #left_column .block:before,
  #left_column .block:after,
  #left_column .title_block:before,
  #left_column .title_block:after,
  #left_column #layered_block_left:before,
  #left_column #layered_block_left:after{
    content:none !important;
    display:none !important;
  }
}

/* ============================================================
   DESKTOP — FILTER SCROLL FADE + DRAWER BEHAVIOR
   (NO LAYOUT SHIFT, NO "VOID" BELOW FADE)
============================================================ */
@media (min-width: 992px){

  /* Drawer panel: the ONLY scroll container in drawer mode */
  #panda-layered-panel{
    /* 👇 master vertical constraints for the drawer */
    --panel-top-gap: 200px;        /* distance from TOP of viewport */
    --panel-bottom-gap: 100px;      /* distance above BOTTOM of viewport */

    max-height: calc(100vh - var(--panel-top-gap) - var(--panel-bottom-gap)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* fade haut + bas */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      black 10px,
      black calc(100% - 10px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      black 10px,
      black calc(100% - 10px),
      transparent 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* When #left_column lives inside the drawer, let it just flow */
  #panda-layered-panel #left_column{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Remove any mask from the rail itself to avoid double fade */
  #left_column{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}


/* ============================================================
   DESKTOP — HEADER NON-STICKY TRANSPARENT (top of page)
============================================================ */
@media (min-width: 992px){

  @supports selector(:has(*)){

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #header,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #header .header-container,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #header .header-container.scroll_menu{
      background: transparent !important;
      box-shadow: none !important;
    }

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #iqitmegamenu-horizontal,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #iqitmegamenu-horizontal ul.sf-menu.menu-content{
      background: transparent !important;
    }
  }
}

@media (min-width: 992px){

  #panda-layered-toggle{
    position: fixed;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  #uniform-panda-layered-toggle{
    display: none !important;
  }

  /* ✅ FILTERS BUTTON = same colors/border as ADD TO CART */
  #panda-layered-button{
    position: fixed;
    top: 185px;
    left: 0;
    z-index: 999999999999;
    pointer-events: auto !important;

    /* same gold gradient as your .button / add-to-cart buttons */
    background: linear-gradient(
      180deg,
      var(--panda-gold-1) 0%,
      var(--panda-gold-2) 55%,
      var(--panda-gold-3) 100%
    ) !important;

    border: 2px solid var(--panda-border) !important;

    /* keep your current shape/orientation */
    color: #000;
    padding: 10px 4px;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(0deg);
    border-radius: 1px 6px 6px 0;
    box-sizing: border-box;
  }

  /* optional: same hover logic as theme buttons */
  #panda-layered-button:hover,
  #panda-layered-button:focus{
    background: linear-gradient(
      180deg,
      var(--panda-gold-2) 0%,
      var(--panda-gold-1) 45%,
      var(--panda-gold-3) 100%
    ) !important;
    border-color: #000 !important;
    outline: none !important;
  }

  #panda-layered-panel{
    position: fixed;
    top: 185px;
    left: 0;

    width: 240px;
    max-width: 240px;

    max-height: calc(100vh - 160px);
    background: #fff;
    z-index: 2147483000;
    pointer-events: auto !important;
    overflow-y: auto;

    transform: translateX(-100%);
    transition: transform 0.25s ease;
    will-change: transform;

    box-sizing: border-box;
  }

  #panda-layered-panel #layered_block_left,
  #panda-layered-panel .block,
  #panda-layered-panel .block_content{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.panda-filters-open #panda-layered-panel{
    transform: translateX(0);
  }
}

/* MOBILE/TABLET: open panel via checkbox (no JS) */
@media (max-width: 991px){
  #panda-layered-panel{ display: none !important; }
  #panda-layered-toggle:checked ~ #panda-layered-panel{ display: block !important; }
  #panda-layered-button{ cursor: pointer !important; }
}

@media (max-width: 991px){

  /* Hide the real checkbox + Uniform fake checkbox */
  #panda-layered-toggle,
  #uniform-panda-layered-toggle{
    position: fixed !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Make sure the label is the visible button */
  #panda-layered-button{
    display: block !important;
    /* you already style it elsewhere; this just guarantees visibility */
  }
}

/* MOBILE: tweak enabled-filters bar position + hide its label */
@media (max-width: 991px){

  /* 1) Hide the "Enabled filters:" label text */
  #left_column #enabled_filters > span.layered_subtitle,
  #left_column #enabled_filters > span.layered_subtitle_heading{
    display: none !important;
  }

  /* 2) Pull the enabled-filters container closer to the FILTERS title */
  #left_column #enabled_filters{
    margin-top: -8px !important;   /* adjust: -4px .. -12px until it looks perfect */
    margin-bottom: 6px !important; /* small gap before first dropdowns */
  }
}
@media (max-width: 991px){
  #panda-layered-button{
    display: block !important;
    width: calc(100% - 24px) !important; /* 12px gap each side */
    margin: 0 25px !important;          /* ← adjust this value */
  }
}
/* MOBILE – keep filters drawer always open inside the panel */
@media (max-width: 991px){

  /* Always show the inner content of the filters block */
  #left_column #layered_block_left .block_content{
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Make the "FILTERS" title non-interactive (no accordion) */
  #left_column #layered_block_left > p.title_block{
    pointer-events: none !important;
    cursor: default !important;
  }
}
/* GLOBAL + FILTER SCROLLBARS (ADD-TO-CART GOLD THEME) */

/* GLOBAL PAGE SCROLLBAR — THICK */
html, body{
  scrollbar-width: auto;                        /* Firefox thickness */
  scrollbar-color: #d59a2a #ffffff;             /* thumb | track */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 16px !important;                       /* ⬅️ THICK */
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background: #ffffff;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background: linear-gradient(#f6d37a, #d59a2a) !important;
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(#e6b858, #b97f1c) !important;
}


/* FILTERS — SKINNY */
#left_column,
#panda-layered-panel{
  scrollbar-width: thin;                        /* Firefox thin */
  scrollbar-color: #d59a2a #ffffff;
}

#left_column::-webkit-scrollbar,
#panda-layered-panel::-webkit-scrollbar{
  width: 16px !important;                        /* ⬅️ THIN */
}

#left_column::-webkit-scrollbar-track,
#panda-layered-panel::-webkit-scrollbar-track{
  background: #ffffff;
}

#left_column::-webkit-scrollbar-thumb,
#panda-layered-panel::-webkit-scrollbar-thumb{
  background: linear-gradient(#f6d37a, #d59a2a) !important;
  border-radius: 8px;
}

#left_column::-webkit-scrollbar-thumb:hover,
#panda-layered-panel::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(#e6b858, #b97f1c) !important;
}
/* Golden glow ONLY on the actual product card box */
.product-container.item:hover {
  box-shadow: 0 0 18px rgba(245,178,60,0.55) !important;
  border-color: rgba(245,178,60,0.9) !important;
}

/* ROUND ALL PRODUCT TILES (outer + inner layers + images) */
.ajax_block_product,
.product-container,
.product-miniature,
.product-container .product-image-container,
.product-miniature .product-image,
.product-img,
.product-image-container,
.ajax_block_product .right-block,
.ajax_block_product .right-block:before{
  border-radius: 14px !important;   /* 🔧 adjust: 12px / 16px / 24px */
  overflow: hidden !important;      /* keeps images + backgrounds clipped */
}


/* DESKTOP — GOLDEN GLOW AROUND FILTER DRAWER (no clipping) */
@media (min-width: 992px){

  /* only touch glow + mask, keep all sizing/position from earlier */
  body.panda-filters-open #panda-layered-panel{
    box-shadow: 0 0 11px rgba(245,178,60,0.75) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* rebuild the top/bottom white fade as an overlay */
  body.panda-filters-open #panda-layered-panel::before{
    content: "" !important;
    position: absolute !important;
    inset: 0;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0px,
      rgba(255,255,255,0) 12px,
      rgba(255,255,255,0) calc(100% - 12px),
      rgba(255,255,255,1) 100%
    ) !important;
    z-index: 1 !important; /* below content, above background */
  }

  /* make drawer content sit above the fade overlay */
  body.panda-filters-open #panda-layered-panel > *{
    position: relative !important;
    z-index: 2 !important;
  }
}
/* DESKTOP — round ONLY the right side corners of the filter drawer (no layout change) */
@media (min-width: 992px){
  #panda-layered-panel{
    border-radius: 0 14px 14px 0 !important;  /* TL | TR | BR | BL */
    /* do NOT touch overflow / position / size here */
  }
}
/* DESKTOP ONLY — match Add-To-Cart font on the Filters button */
@media (min-width: 992px){
  #panda-layered-button{
    font-family: inherit !important;   /* same typeface */
    font-weight: 700 !important;       /* cart-style heft */
    text-transform: uppercase !important; /* optional — remove if you want */
    letter-spacing: 0 !important;
  }
}
/* DESKTOP — precision controls for ENABLED FILTERS bar */
@media (min-width: 992px){
  #left_column #enabled_filters{
    /* 🔧 TWEAK ONLY THESE 2 VALUES */
    --enabled-shift-y: -1px;      /* -6px = move UP,  +6px = move DOWN */
    --enabled-extra-pad-y: 20px;  /* +2px = taller bar, -2px = thinner */

    /* visual vertical move, does NOT break sticky */
    transform: translateY(var(--enabled-shift-y)) !important;

    /* based on your current 6px vertical padding */
    padding-top: calc(6px + var(--enabled-extra-pad-y)) !important;
    padding-bottom: calc(6px + var(--enabled-extra-pad-y)) !important;
  }
}
/* HOMEPAGE BANNERS – independent corner control */ 
#index .img_content,
#index .img_content a,
#index .img_content a img,
#index #cms_top,
#index #cms_top a,
#index #cms_top a img{
  border-top-left-radius:     11px !important;
  border-top-right-radius:    0px !important;
  border-bottom-right-radius: 11px !important;
  border-bottom-left-radius:  0px !important;
  overflow: hidden !important;
}
/* DESKTOP – thin dark border */
@media (min-width: 992px){
  #panda-layered-panel{
    border: 1px solid rgba(0,0,0,0.5) !important;
  }
}
/* DESKTOP — pure bottom glow, no sizing/position touched */
@media (min-width: 992px){
  #enabled_filters{
    box-shadow: 0 10px 4px 5px rgba(255,255,255,0.95) !important;
  }
} 

/* 420PANDA – LOGIN BANNER = GOLD BUTTON BAR */
header .banner{
  background: linear-gradient(
    180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%
  ) !important;
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;
  padding: 15px 50px !important;
  margin: 10px auto !important;
}

/* Hover shine */
header .banner:hover{
  background: linear-gradient(
    180deg,
    var(--panda-gold-2) 0%,
    var(--panda-gold-1) 45%,
    var(--panda-gold-3) 100%
  ) !important;
}

/* Reset all heading defaults (so we own them fully) */
header .banner h1,
header .banner h2,
header .banner h3,
header .banner a,
header .banner span{
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color:#000 !important;
  text-shadow:none !important;
  letter-spacing:0.5px;
  line-height:1.2 !important;
  margin:4px 0 !important;
  text-decoration:none !important;
}

/* 🎚 INDIVIDUAL TEXT SIZE CONTROLS */
header .banner h1 span{
  font-size: 30px !important;  /* TOP LINE */
}

header .banner h1:nth-of-type(2) span{
  font-size: 26px !important;  /* MIDDLE LINE */
}

header .banner h2 span,
header .banner h2 a span{
  font-size: 19px !important;  /* BOTTOM LINE */
}
.banner {
    position: relative;
}

/* Left + right images using pseudo-elements */
.banner::before,
.banner::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;        /* adjust size */
    height: 120px;       /* adjust size */
    background-repeat: no-repeat;
    background-size: contain;
}

/* Left image */
.banner::before {
    left: 20px;
    background-image: url("https://420panda.ca/img/cms/ICON.png");
}

/* Right image */
.banner::after {
    right: 0px;
    background-image: url("https://420panda.ca/img/cms/favicon4.png");
}
/* ============================================================
   BLOCK IMAGE SAVE on mobile for restricted groups
   (body.no-touch-save is added only for disallowed groups)
============================================================ */

body.no-touch-save img,
body.no-touch-save .product_img_link img,
body.no-touch-save .primary_block img,
body.no-touch-save .pb-left-column img{
  -webkit-touch-callout: none; /* iOS Safari: no "Save Image / Copy" menu */
  -webkit-user-select: none;
  user-select: none;
}

/* Optional: make long-press less useful on background images too */
body.no-touch-save .product-image-container,
body.no-touch-save .product_img_link{
  -webkit-touch-callout: none;
}
/* ==========================================================
   420PANDA — WATERMARK ON CATEGORY / LISTING TILES
   Target: .product-image-container > a.product_img_link
   - Clicks still work (pointer-events: none)
   - Tweak the 4 “knobs” below for all tiles
========================================================== */

:root {
  /* position inside the image box */
  --wm-tile-pos-x: 65%;     /* 0% = left, 50% = center, 100% = right */
  --wm-tile-pos-y: 85%;     /* 0% = top, 50% = center, 100% = bottom */

  /* size relative to tile width */
  --wm-tile-size: 70%;      /* 100% = full width, 50% = half, etc. */

  /* rotation */
  --wm-tile-rot: -18deg;

  /* opacity */
  --wm-tile-opacity: 0.10;
}

/* Make the link the “anchor” for the overlay */
body:not(#index) #center_column .product-image-container a.product_img_link{
  position: relative !important;
  display: block !important;
}

/* Watermark overlay */
body:not(#index) #center_column .product-image-container a.product_img_link::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  background-image: url("https://420panda.ca/img/cms/logo.png");
  background-repeat: no-repeat;
  background-position: var(--wm-tile-pos-x) var(--wm-tile-pos-y);
  background-size: var(--wm-tile-size);

  transform: rotate(var(--wm-tile-rot));
  transform-origin: 50% 50%;

  opacity: var(--wm-tile-opacity);
  pointer-events: none !important; /* never blocks click/tap */
  z-index: 2;
}
/* ==========================================================
   420PANDA — WATERMARK ON PRODUCT PAGE MAIN IMAGE
   Target: #view_full_size (wrapper of img#bigpic)
========================================================== */

:root {
  /* independent knobs for the big image */
  --wm-main-pos-x: 50%;    /* 0% = left, 50% = center, 100% = right */
  --wm-main-pos-y: 50%;    /* 0% = top, 50% = center, 100% = bottom */
  --wm-main-size: 70%;     /* relative to wrapper width */
  --wm-main-rot: -18deg;
  --wm-main-opacity: 0.05;
}

/* make the wrapper the anchor */
body:not(#index) #image-block #view_full_size {
  position: relative;
  display: inline-block; /* or block; whatever your layout needs */
}

/* watermark overlay */
body:not(#index) #image-block #view_full_size::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  background-image: url("https://420panda.ca/img/cms/logo.png");
  background-repeat: no-repeat;
  background-position: var(--wm-main-pos-x) var(--wm-main-pos-y);
  background-size: var(--wm-main-size);

  transform: rotate(var(--wm-main-rot));
  transform-origin: 50% 50%;

  opacity: var(--wm-main-opacity);
  pointer-events: none !important;
  z-index: 2;
}
/* ==========================================================
   420PANDA — WATERMARK ON PRODUCT PAGE "RELATED / RECOMMENDED"
   Target: .productscategory a.img_content
========================================================== */

:root {
  /* knobs only for THIS carousel */
  --wm-rel-pos-x: 50%;
  --wm-rel-pos-y: 55%;
  --wm-rel-size: 75%;
  --wm-rel-rot: -18deg;
  --wm-rel-opacity: 0.15;
}

/* make the <a> tile the anchor */
body:not(#index) .productscategory a.img_content {
  position: relative;
  display: block;
}

/* watermark overlay */
body:not(#index) .productscategory a.img_content::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  background-image: url("https://420panda.ca/img/cms/logo.png");
  background-repeat: no-repeat;
  background-position: var(--wm-rel-pos-x) var(--wm-rel-pos-y);
  background-size: var(--wm-rel-size);

  transform: rotate(var(--wm-rel-rot));
  transform-origin: 50% 50%;

  opacity: var(--wm-rel-opacity);
  pointer-events: none !important;
  z-index: 2;
}

/* ===========================================
   MOBILE: original centering for TOP SEARCH ROW
   (this is the logic you said was working)
=========================================== */
@media (max-width: 767px){
  ul.sf-menu.menu-content{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: calc(100% - 20px) !important;
    margin: 8px auto 10px auto !important;
    /* your other mobile rules (padding / flex / etc.) can stay above */
  }
}

/* ===========================================
   MOBILE: clamp layout when NOT sticky
   (no horizontal scroll, but KEEP that centering)
=========================================== */
@media (max-width: 767px){
  @supports selector(:has(*)){

    /* Root: no horizontal scroll when sticky is NOT present */
    html:has(body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))),
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)){
      overflow-x: hidden !important;
    }

    /* Main containers respect viewport width, but we don't touch the search block */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #page,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #wrapper,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) .columns-container{
      max-width: 100vw !important;
      overflow-x: hidden !important;
      position: relative !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* ?? IMPORTANT: we do NOT override ul.sf-menu.menu-content here.
       Your centering rule above stays in charge. */
  }
}
/* ============================
   Language warning bubble
   Desktop, non-intrusive
   ============================ */

@media (min-width: 1024px) {

  /* Use the WRAPPER as anchor, not the <a> */
  .extra_language_block {
    position: relative; /* doesn't change layout */
  }

  /* Tail of the bubble */
  .extra_language_block::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 115%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9998;
    display: none !important;
  }

  /* Bubble box */
  .extra_language_block::after {
    position: absolute;
    left: 50%;
    bottom: -200%;
    transform: translateX(-50%);
    width: 240px;
    padding: 8px 10px;
    background: #fff;
    color: #000;
    border: 1px solid #333;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9999;
    content: ""; /* default, language text below */
  }

  /* Page in French ? French text in bubble */
  html[lang^="fr"] .extra_language_block::after {
    content: "Changer la langue modifiera aussi votre langue de communication!";
  }

  /* Page in English ? English text in bubble */
  html[lang^="en"] .extra_language_block::after {
    content: "Switching language will switch your communication language as well!";
  }

  /* Show on hover/focus of the whole block (including button) */
  .extra_language_block:hover::before,
  .extra_language_block:hover::after,
  .extra_language_block:focus-within::before,
  .extra_language_block:focus-within::after {
    opacity: 1;
  }
}

/* Mobile: no bubble at all */
@media (max-width: 1023px) {
  .extra_language_block::before,
  .extra_language_block::after {
    display: none;
  }
}
/* =======================================================
   MOBILE: turn the REAL blocklanguages output into ONE button
   (works with your actual markup: li.selected + li > a)
======================================================= */
@media (max-width: 767px){

  /* Hide the "Language" label */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher .title_top{
    display: none !important;
  }

  /* Keep the UL alive (do NOT hide it) but remove spacing */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Hide ALL li by default (prevents "Français" showing) */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Show ONLY the li that contains the real link (the other language) */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a{
    display: inline-flex !important;
  }
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li:has(> a){
    display: block !important;
  }

  /* If :has() is unsupported, still show the <a> and collapse the li box */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a{
    display: inline-flex !important;
  }

  /* Skin the real <a> as a 44x44 button like the others */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a{
    width: 44px !important;
    height: 44px !important;

    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background: rgba(255,255,255,0.92) !important;

    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;

    position: relative !important;
    overflow: hidden !important;

    padding: 0 !important;
    margin: 0 !important;

    /* hide the real text */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Hide the inner span text so it can't leak */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a span{
    display: none !important;
  }

  /* Paint FR/EN label on top */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #000 !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    font-size: 14px !important;
    letter-spacing: 0.5px !important;

    pointer-events: none !important;
  }

  /* Current EN => show FR */
  body.lang_en #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a::before{
    content: "FR" !important;
  }

  /* Current FR => show EN */
  body:not(.lang_en) #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li > a::before{
    content: "EN" !important;
  }

  /* Also hide the current language row explicitly (your markup uses .selected) */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li.selected{
    display: none !important;
  }
}

/* =======================================================
   PATCH: prevent .panda-mobile-lang-switcher from collapsing to 0x0
   (gives it a real "button slot" in the action row)
======================================================= */
@media (max-width: 767px){

  /* Ensure the action row lays out children properly */
  #iqitmegamenu-accordion .panda-mobile-actionrow{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Give the wrapper a fixed box */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher{
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 20 !important;
  }

  /* Make sure the real link fills the wrapper and stays clickable */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher a{
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 30 !important;
  }
}

/* =======================================================
   HARD OVERRIDE: make the injected blocklanguages link
   visible + clickable as a 44x44 button in the sticky row
======================================================= */
@media (max-width: 767px){

  /* Make the wrapper look like the button */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;

    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background: rgba(255,255,255,0.92) !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* Kill the title */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher .title_top{
    display: none !important;
  }

  /* Ensure the list exists */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* FORCE show the non-selected language row (no :has needed) */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li.selected{
    display: none !important;
  }
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li:not(.selected){
    display: block !important;
  }

  /* Make the REAL <a> cover the whole button and be clickable */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher ul#first-languages > li:not(.selected) > a{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;

    /* clickable */
    pointer-events: auto !important;
    z-index: 5 !important;

    /* visually hide the actual link text */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  /* Paint EN/FR on the wrapper (NOT on the <a>) */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #000 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;

    pointer-events: none !important;
    z-index: 10 !important;
  }

  body.lang_en #iqitmegamenu-accordion .panda-mobile-lang-switcher::before{
    content: "FR" !important;
  }
  body:not(.lang_en) #iqitmegamenu-accordion .panda-mobile-lang-switcher::before{
    content: "EN" !important;
  }
}

/* ABSOLUTE LAST PATCH: force the <a> to be the clickable hit area */
@media (max-width: 767px){

  #iqitmegamenu-accordion .panda-mobile-lang-switcher{
    position: relative !important;
    z-index: 999999 !important;
  }

  #iqitmegamenu-accordion .panda-mobile-lang-switcher a{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;
    display: block !important;

    z-index: 999999 !important;
    pointer-events: auto !important;

    /* prevent weird layout restrictions */
    float: none !important;
    transform: none !important;
  }

  /* guarantee nothing inside can intercept */
  #iqitmegamenu-accordion .panda-mobile-lang-switcher *{
    pointer-events: none !important;
  }
  #iqitmegamenu-accordion .panda-mobile-lang-switcher a{
    pointer-events: auto !important;
  }
}

/* =======================================================
   420PANDA — WISHLIST BUTTON
   SAME GOLD BUTTON + FILLED HEART
   SEPARATE POSITION NUDGES
======================================================= */

:root{
  /* ===== BUTTON NUDGES ===== */

  /* listing / category buttons */
  --panda-wishlist-list-x: 0px;
  --panda-wishlist-list-y: 13px;

  /* product page button (NO wishlist yet) */
  --panda-wishlist-product-x: 0px;
  --panda-wishlist-product-y: 0px;

  /* ? NEW: wrapper nudges (ONLY for the NO-wishlist-yet state) */
  --panda-wishlist-nopop-wrap-x: -19px;
  --panda-wishlist-nopop-wrap-y: -6px;

  /* ===== HEART NUDGES ===== */

  /* heart in listings */
  --panda-heart-list-x: 0px;
  --panda-heart-list-y: 2px;

  /* heart on product page */
  --panda-heart-product-x: 0px;
  --panda-heart-product-y: 2px;
}

/* =======================================================
   LISTING BUTTON (.addToWishlist)
======================================================= */

a.addToWishlist{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 22%,
    #f7bf4a 48%,
    #e09524 76%,
    #c87514 100%
  ) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.08) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;

  position: relative !important;
  left: var(--panda-wishlist-list-x) !important;
  top:  var(--panda-wishlist-list-y) !important;
}

/* remove outline icon */
a.addToWishlist i.icon_heart_alt:before{
  content: "" !important;
}

/* center heart */
a.addToWishlist i.icon_heart_alt{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* filled heart */
a.addToWishlist i.icon_heart_alt:after{
  content: "♥" !important;
  font-size: 22px !important;
  color: #000 !important;
  font-style: normal !important; /* FIX */
  transform: translate(
    var(--panda-heart-list-x),
    var(--panda-heart-list-y)
  ) !important;
}

/* =======================================================
   PRODUCT PAGE BUTTON (#wishlist_button_nopop)
======================================================= */

/* ? FIX: move ONLY the wrapper that contains #wishlist_button_nopop */
p.buttons_bottom_block.no-print:has(> a#wishlist_button_nopop){
  position: relative !important;
  transform: translate(
    var(--panda-wishlist-nopop-wrap-x),
    var(--panda-wishlist-nopop-wrap-y)
  ) !important;
}

a#wishlist_button_nopop{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 22%,
    #f7bf4a 48%,
    #e09524 76%,
    #c87514 100%
  ) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.08) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;

  position: relative !important;
  left: var(--panda-wishlist-product-x) !important;
  top:  var(--panda-wishlist-product-y) !important;

  /* hide text-only label */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* inject heart when NO <i> icon exists */
a#wishlist_button_nopop:after{
  content: "♥" !important;
  font-size: 22px !important;
  color: #000 !important;
  font-style: normal !important; /* FIX */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) translate(
    var(--panda-heart-product-x),
    var(--panda-heart-product-y)
  ) !important;
}

/* kill outline heart (if icon exists in some contexts) */
a#wishlist_button_nopop i.icon-heart-o:before{
  content: "♥" !important;
}

/* center heart (icon-based fallback) */
a#wishlist_button_nopop i.icon-heart-o{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* filled heart (icon-based fallback) */
a#wishlist_button_nopop i.icon-heart-o:after{
  content: "♥" !important;
  font-size: 22px !important;
  color: #000 !important;
  font-style: normal !important; /* FIX */
  transform: translate(
    var(--panda-heart-product-x),
    var(--panda-heart-product-y)
  ) !important;
}

/* =======================================================
   420PANDA — ProductsCategory arrows: vertical placement
   - UP arrow: top center
   - DOWN arrow: bottom center
   - CSS only (no tpl / JS changes)
======================================================= */

@media (min-width: 992px){

  /* ? NUDGES (edit only these) */
  :root{
    --pc-scale: .75;          /* overall size (smaller = < 1) */
    --pc-img-max: 260px;       /* image max height */
    --pc-title-size: 15px;    /* product name text size */
    --pc-price-size: 15px;    /* price size */
    --pc-btn-size: 12px;      /* add-to-cart text size */
    --pc-btn-pad-y: 9px;      /* add-to-cart padding Y */
    --pc-btn-pad-x: 9px;      /* add-to-cart padding X */
    --pc-block-pad-y: 0px;   /* replaces your 30px padding top/bottom */
    --pc-block-pad-x: 15px;
  }

  /* Make the block a positioning context */
  .productscategory_block{
    position: relative !important;
    top: -62px !important;  /* ? move UP */

    /* ? shrink whole module without touching your arrow positions */
    transform: scale(var(--pc-scale)) !important;
    transform-origin: top right !important;
  }

  /* Kill theme positioning that pins arrows sideways */
  .productscategory_block .navi{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    z-index: 5 !important;
  }

  /* UP arrow — top center */
  .productscategory_block .navi .prevtab{
    position: absolute !important;
    top: 445px !important;
    left: 115% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
  }

  /* DOWN arrow — bottom center */
  .productscategory_block .navi .nexttab{
    position: absolute !important;
    top: -19px !important;
    left: 85% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
  }

  /* Optional: arrow size tuning */
  .productscategory_block .navi i{
    font-size: 20px; /* nudge if needed */
  }

  /* Give content breathing room so arrows don’t overlap */
  .productscategory_block .product_content{
    padding-top: var(--pc-block-pad-y) !important;
    padding-bottom: var(--pc-block-pad-y) !important;
    padding-right: var(--pc-block-pad-x) !important;
    padding-left: var(--pc-block-pad-x) !important;
  }

  /* ? Make the content inside smaller/denser */
  .productscategory_block .left-block img{
    max-height: var(--pc-img-max) !important;
    width: auto !important;
  }

  .productscategory_block h5,
  .productscategory_block .product-name{
    font-size: var(--pc-title-size) !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
    font-weight: 800 !important;
  }

  .productscategory_block .price-box,
  .productscategory_block .price,
  .productscategory_block .old-price{
    font-size: var(--pc-price-size) !important;
    line-height: 1.2 !important;
    margin-bottom: 0px !important;
  }

  .productscategory_block .ajax_add_to_cart_button{
    font-size: var(--pc-btn-size) !important;
    padding: var(--pc-btn-pad-y) var(--pc-btn-pad-x) !important;
    line-height: 1.1 !important;
  }

  .productscategory_block .item{
    padding-top: 6px !important;
    padding-bottom: 06px !important;
  }
}
/* =======================================================
   420PANDA — ProductsCategory arrows ALWAYS visible
   Override theme hover-only behavior
======================================================= */

@media (min-width: 992px){

  /* Force nav container always visible */
  .productscategory_block .navi{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Force arrows always visible */
  .productscategory_block .prevtab,
  .productscategory_block .nexttab{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important; /* keep your centering */
  }

  /* Kill hover-based hide effects */
  .productscategory_block:hover .navi,
  .productscategory_block:hover .prevtab,
  .productscategory_block:hover .nexttab{
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* =======================================================
   420PANDA — ProductsCategory (right column) = SAME CARD STYLE AS CATEGORY TILES
   Matches your category tile radius + clipping + hover glow
======================================================= */

/* Round + clip the module tiles (outer + inner wrapper) */
#right_column .productscategory_block .item_out,
#right_column .productscategory_block .item{
  border-radius: 14px !important;   /* same as category tiles */
  overflow: hidden !important;      /* same clipping behavior */
}

/* Round + clip typical inner layers (safe even if some don't exist) */
#right_column .productscategory_block .left-block,
#right_column .productscategory_block .right-block,
#right_column .productscategory_block .product-image-container,
#right_column .productscategory_block a.product_img_link,
#right_column .productscategory_block img{
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ==========================================================
   420PANDA — WISHLIST POPUP = CART POPUP (FINAL WEIGHT MATCH)
   FIX: remove “flash” by applying styles BEFORE fancybox-opened exists
   ? Scoped to wishlist fancybox ONLY (the one containing p.fancybox-error)
========================================================== */

@supports selector(:has(*)) {

  /* Outer shell */
  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-skin,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-skin{
    background: #e4a927 !important;

    border: 1px solid #000 !important;              /* ? was 3px */
    border-radius: 12px !important;

    box-shadow:
      0 4px 12px rgba(0,0,0,.30) !important;        /* ? softer shadow */

    padding: 9px 14px !important;                   /* matches cart gap */
    position: relative !important;
  }

  /* Inner border (lighter, not chunky) */
  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-skin:before,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-skin:before{
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;                          /* ? tighter inset */
    border: 1px solid #000 !important;              /* ? was 2px */
    border-radius: 9px !important;
    pointer-events: none !important;
  }

  /* Centering */
  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-inner,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Text — MATCH cart popup typography */
  html body .fancybox-wrap:has(p.fancybox-error) p.fancybox-error,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) p.fancybox-error{
    margin: 0 !important;
    padding: 0 !important;

    color: #000 !important;
    font-weight: 500 !important;                    /* ? was too bold */
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Auto-fade (same behavior) */
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error){
    animation: pandaWishlistFadeOut .35s ease forwards !important;
    animation-delay: 2s !important;
  }

  html body:has(.fancybox-wrap.fancybox-opened:has(p.fancybox-error)) .fancybox-overlay.fancybox-overlay-fixed{
    animation: pandaWishlistFadeOut .35s ease forwards !important;
    animation-delay: 2s !important;
  }

  @keyframes pandaWishlistFadeOut{
    to{
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }

  /* ==========================================================
     420PANDA — WISHLIST POPUP CLOSE (FINAL, CORRECT POLARITY)
     FIX: apply BEFORE fancybox-opened exists
  ========================================================== */

  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-close,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-close{
    width: 10px !important;
    height: 16px !important;

    top: 6px !important;
    right: 8px !important;

    /* ?? KILL SPRITE COMPLETELY */
    background: transparent !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;

    color: #000 !important;          /* black X */
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 18px !important;

    opacity: .9 !important;
  }

  /* Force the X to be text, not sprite */
  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-close:after,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-close:after{
    content: "×" !important;
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #000 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Remove ANY leftover pseudo junk */
  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-close:before,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-close:before{
    display: none !important;
  }

  /* Hover = same as cart popup */
  html body .fancybox-wrap:has(p.fancybox-error) .fancybox-close:hover,
  html body .fancybox-wrap.fancybox-opened:has(p.fancybox-error) .fancybox-close:hover{
    opacity: 1 !important;
  }
}
/* 420PANDA — disable watermark/overlay on right-column productscategory tiles only */
#right_column .productscategory a.img_content::after,
#right_column .productscategory a.img_content::before{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}
/* =======================================================
   420PANDA — ProductsCategory hover glow (FULL halo)
   Fix side clipping + hover-only
======================================================= */

/* Outer wrapper must allow the glow */
#right_column .productscategory .item_out{
  overflow: visible !important;
}

/* Apply glow ONLY on hover, on the OUTER wrapper */
#right_column .productscategory .item:hover{
  box-shadow: 0 0 18px rgba(245,178,60,0.55) !important;
}

/* Inner card stays clean and white */
#right_column .productscategory .item{
  background: #fff !important;
}
/* --- KILL the old theme hover overlay (global.css) --- */

/* Category/list tiles */
#center_column .product_content .item:hover{
  background: #fff !important;
}

/* The pseudo-overlay that tints transparent PNGs */
#center_column .product_content .item:hover .left-block a.img_content:before,
#center_column .product_content .item:hover .right-block:before{
  background: transparent !important;
}

/* Force image zone to stay white (helps transparent PNGs look clean) */
#center_column .product_content .item .left-block a.img_content,
#center_column .product_content .item .left-block{
  background: #fff !important;
}

/* Right column: productscategory module (same structure/classes) */
#right_column .productscategory_block .product_content .item:hover{
  background: #fff !important;
}
#right_column .productscategory_block .product_content .item:hover .left-block a.img_content:before,
#right_column .productscategory_block .product_content .item:hover .right-block:before{
  background: transparent !important;
}
#right_column .productscategory_block .product_content .item .left-block a.img_content,
#right_column .productscategory_block .product_content .item .left-block{
  background: #fff !important;
}

/* =======================================================
   420PANDA — BEST SELLERS (owl carousel)
   CARD = div.item (your screenshot)
   - Rounded card stays rounded
   - Gold glow ONLY on hover
   - Glow shows on ALL sides (no clipping)
   - Pure white behind transparent PNGs
======================================================= */

/* 0) Stop Owl viewport from slicing the glow */
#best-sellers_block_right .owl-wrapper-outer,
#best-sellers_block_right .owl-item{
  overflow: visible !important;
}

/* 1) THE CARD (div.item): round + clip + white */
#best-sellers_block_right .item{
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* 2) Pure white behind transparent images */
#best-sellers_block_right .item .left-block,
#best-sellers_block_right .item .left-block a.img_content{
  background: #fff !important;
}

/* 3) Gold glow ONLY on hover — on THE CARD (so it stays rounded) */
#best-sellers_block_right .item:hover{
  box-shadow: 0 0 18px rgba(245,178,60,0.55) !important;
}

/* 4) Kill the old theme hover tint film on this block */
#best-sellers_block_right .item:hover .left-block a.img_content:before,
#best-sellers_block_right .item:hover .right-block:before{
  background: transparent !important;
}

/* 5) Round the grey rectangle corners */
#best-sellers_block_right .item .right-block{
  border-radius: 14px !important;
  overflow: hidden !important; /* ensures its own bg clips */
}

/* 6) Safety: ensure the image itself follows the same rounding */
#best-sellers_block_right .item .left-block a.img_content,
#best-sellers_block_right .item .left-block a.img_content img{
  border-radius: 14px !important;
}

/* =======================================================
   420PANDA — BEST SELLERS ARROWS (prevtab/nexttab)
   Always visible + move horizontally
======================================================= */

:root{
  --bs-arrow-offset: 0px;  /* increase = farther from cards */
}

/* Make sure the nav exists and stays visible */
#best-sellers_block_right .product_content .navi{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Always show the arrows */
#best-sellers_block_right .product_content .navi a.prevtab,
#best-sellers_block_right .product_content .navi a.nexttab{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999999999 !important;
}

/* Move left arrow outward */
#best-sellers_block_right .product_content .navi a.prevtab{
  left: calc(0px - var(--bs-arrow-offset)) !important;
}

/* Move right arrow outward */
#best-sellers_block_right .product_content .navi a.nexttab{
  right: calc(0px - var(--bs-arrow-offset)) !important;
}
/* =======================================================
   420PANDA — Best Sellers arrows: keep icon centered + top z-layer
======================================================= */

/* Don’t use flex on the <a> (it shifts the inner arrow) */
#best-sellers_block_right .product_content .navi a.prevtab,
#best-sellers_block_right .product_content .navi a.nexttab{
  display: block !important;         /* was flex */
  text-align: center !important;
  z-index: 99999999999 !important;        /* stronger */
}

/* Make sure nothing clips them when offset outside */
#best-sellers_block_right,
#best-sellers_block_right .product_content,
#best-sellers_block_right .product_content.block_content{
  z-index: 99999999999 !important;
}
/* =======================================================
   420PANDA — BEST SELLERS GLOBAL SCALE
   Change --bs-scale to resize the whole block
======================================================= */

:root{
  --bs-scale: 0.95; /* 1 = normal | 0.9 smaller | 1.05 bigger */
}

#best-sellers_block_right{
  transform: scale(var(--bs-scale));
  transform-origin: top center;
}
/* =======================================================
   420PANDA — allow fixed best-sellers arrow to be clickable
   even when it overlaps #right_column
======================================================= */

/* 1) Let clicks pass through the right column container */
#right_column{
  pointer-events: none !important;
}

/* 2) Re-enable clicks for actual content inside the right column */
#right_column *{
  pointer-events: auto !important;
}

/* 3) Make sure the arrows stay on top + clickable */
#best-sellers_block_right .product_content .navi a.prevtab,
#best-sellers_block_right .product_content .navi a.nexttab{
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}
/* =======================================================
   420PANDA — BEST SELLERS CONTENT SCALE (NOT CONTAINER)
======================================================= */

:root{
  --bs-scale: 0.92; /* tweak freely */
}

/* Scale ONLY the tiles */
#best-sellers_block_right .owl-item{
  transform: scale(var(--bs-scale));
  transform-origin: center center;
}

/* =======================================================
   420PANDA — Best-sales PERIOD dropdown (centered, no layout push)
   Only affects best-sales page
======================================================= */

/* create a positioning context ONLY on best-sales */
body#best-sales .content_sortPagiBar .sortPagiBar{
  position: relative !important;
}

/* center the period dropdown without moving other controls */
body#best-sales .content_sortPagiBar .sortPagiBar .bs-period-wrap{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: -6px !important;
  z-index: 5 !important;
}

/* the select size */
body#best-sales .content_sortPagiBar .sortPagiBar .bs-period-select{
  width: 180px !important;
  height: 27px !important;
  padding: 2px 10px !important;
  font-size: 13px !important;
  line-height: 26px !important;
}
/* =======================================================
   420PANDA — Best-sales PERIOD dropdown
   - Remove native arrow (always)
   - Replace flaky theme arrow with our own (never disappears)
   - ONLY targets this one selector
======================================================= */

/* 1) Kill the native browser arrow (only for this select) */
body#best-sales .bs-period-select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;  /* disable theme arrow layer too */
  padding-right: 34px !important;     /* room for our arrow */
}

/* Edge/IE legacy arrow */
body#best-sales .bs-period-select::-ms-expand{
  display: none !important;
}

/* 2) Our arrow: always visible, ignores hover/focus */
body#best-sales .bs-period-wrap{
  position: relative !important;
  display: inline-block !important;
}

body#best-sales .bs-period-wrap::after{
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 4px solid #000 !important; /* arrow color */
  transform: translateY(-40%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* 3) Hard-pin the arrow on hover/focus (theme can't kill it) */
body#best-sales .bs-period-wrap:hover::after,
body#best-sales .bs-period-wrap:focus-within::after{
  opacity: 1 !important;
}

/* =========================================================
   420panda — Cogwheel dropdown (DESKTOP ONLY, SITE-WIDE)
   Targets: .header_user > .toogle_content  (note spelling)
   Includes: sizing/position + viewport safety + anti-clipping/overlay fixes
   Put this in ONE place only (420pandamenu.css).
   ========================================================= */

  /* --- TUNABLE KNOBS --- */
  :root{
    --cog-dd-top: calc(100% + 10px); /* dropdown vertical offset */
    --cog-dd-right: 0px;             /* dropdown horizontal offset */
    --cog-dd-width: 0px;           /* dropdown width */
    --cog-dd-pad-y: 10px;
    --cog-dd-pad-x: 25px;
    --cog-dd-radius: 10px;
    --cog-dd-font: 13px;
    --cog-dd-line: 12px;

    /* stacking control */
    --cog-header-z: 999990;          /* header layer above page frame */
    --cog-dd-z: 999999;              /* dropdown above everything */
    --page-frame-z: 1;               /* keep page frame behind header */
  }

  /* =========================
     ANTI-CLIP / ANTI-OVERLAY
     ========================= */

  /* Let the dropdown escape its containers (no clipping) */
  #header,
  #header_logo,
  .block_right,
  .header_user{
    overflow: visible !important;
  }
  /* ---------- 1) Remove clipping ancestors near header ---------- */
  #page,
  #header,
  #header .header-container,
  #header .nav,
  #header .row{
    overflow: visible !important;
  }
  /* Put header zone above the “orange frame” / layout gutters */
  #header,
  #header_logo,
  .block_right{
    position: relative !important;
    z-index: var(--cog-header-z) !important;
  }

  /* Keep common page wrappers behind the header zone */
  #page,
  #columns,
  .columns-container,
  .container,
  .main-page-indent{
    position: relative !important;
    z-index: var(--page-frame-z) !important;
  }

  /* If gutters are pseudo-elements, force them behind too */
  body::before,
  #page::before,
  #columns::before,
  #center_column::before,
  #right_column::before,
  #left_column::before{
    z-index: 0 !important;
  }

  /* =========================
     DROPDOWN POSITION + SIZE
     ========================= */

  /* Anchor positioning context */
  .header_user{
    position: relative !important;
  }

  /* The dropdown panel */
  .header_user > .toogle_content{
    position: absolute !important;
    top: var(--cog-dd-top) !important;
    right: var(--cog-dd-right) !important;
    left: auto !important;

    width: var(--cog-dd-width) !important;
    max-width: calc(100vw - 20px) !important; /* keep inside viewport */
    box-sizing: border-box !important;

    padding: var(--cog-dd-pad-y) var(--cog-dd-pad-x) !important;
    border-radius: var(--cog-dd-radius) !important;

    z-index: var(--cog-dd-z) !important;

    /* Neutralize “disturbed” positioning from transforms */
    transform: none !important;
    margin: 0 !important;
  }

  /* Links inside */
  .header_user > .toogle_content .header_user_info a,
  .header_user > .toogle_content #languages-block-top a{
    display: block !important;
    font-size: var(--cog-dd-font) !important;
    line-height: var(--cog-dd-line) !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  /* Language title separator (optional) */
  .header_user > .toogle_content #languages-block-top .title_top{
    display: block !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }

/* =========================================
   420panda — MOBILE cog languages: force clean stacking (FR+EN)
   Scope: ONLY inside the cog dropdown
========================================= */
@media (max-width: 767px){

  /* UL must never clip/have fixed height */
  #header .header_user > .toogle_content
  #languages-block-top ul#first-languages{
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 3px 0 0 !important;
    padding: 0px !important;
    list-style: none !important;
  }

  /* EVERY li is a full row */
  #header .header_user > .toogle_content
  #languages-block-top ul#first-languages > li{
    position: static !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Both the selected SPAN and normal A behave identically */
  #header .header_user > .toogle_content
  #languages-block-top ul#first-languages > li > a,
  #header .header_user > .toogle_content
  #languages-block-top ul#first-languages > li > span{
    position: static !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    line-height: 5px !important;
    padding: 9px 8px !important;

    transform: none !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* If theme wraps the text in span inside <a>, normalize it too */
  #header .header_user > .toogle_content
  #languages-block-top ul#first-languages > li > a > span{
    display: block !important;
    line-height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}