#cp_sidevertical_menu_top .top-menu a:not([data-depth="0"]) {
  display: block;
}

#cp_sidevertical_menu_top .top-menu a {
  font-weight: 400;
  line-height: 25px;
  text-transform: capitalize;
  white-space: initial;
  width: auto;
  padding: 6px 0;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

#header #sidevertical_menu {
  width: 100%;
  margin-inline-start: 0;
  display: block;
}

#header #sidevertical_menu #top-menu.top-menu[data-depth="0"] {
  padding: 11px 20px 30px;
  margin: 0;
}

.header-top-main #sidevertical_menu .top-menu .navbar-toggler {
  display: inline-block;
  padding: 0;
  background-color: #f2f2f2;
  border-radius: 50%;
}

.verticalmenu-side #cpnav1cmsblock .header-deal {
  float: none;
  text-align: center;
}

.menu-icon .material-icons.menu-close {
  position: absolute;
  display: block;
  left: auto;
  right: 15px;
  cursor: pointer;
}

.mobile-menu {
  z-index: 2;
  position: relative;
  float: none;
  padding: 37px 0 0;
  cursor: pointer;
  margin-inline-end: 12px;
  display: inline-block;
  vertical-align: top;
}

.verticalmenu-side #_desktop_user_info {
  display: none;
}

.mobile-menu .material-icons.menu-open {
  font-size: 30px;
}

#cp_sidevertical_menu_top > #_desktop_top_menu .mobile > ul.top-menu > li:last-child a {
  border: none;
}

#cp_sidevertical_menu_top .top-menu .collapse-icons .material-icons.remove {
  display: none;
}

#cp_sidevertical_menu_top .top-menu .collapse-icons[aria-expanded="true"] .remove {
  display: block;
}

#cp_sidevertical_menu_top  .top-menu .collapse-icons[aria-expanded="true"] .add {
  display: none;
}

/* Bootstrap 4/5 uses .show, older used .in -> support both */
#cp_sidevertical_menu_top .top-menu .sub-menu.collapse.show,
#cp_sidevertical_menu_top .top-menu .sub-menu.collapse.in {
  display: block;
}

#cp_sidevertical_menu_top .top-menu .sub-menu.collapse {
  display: none;
}

.header-top #cp_sidevertical_menu_top .top-menu .navbar-toggler {
  display: inline-block;
  padding: 0;
}

.header-top #cp_sidevertical_menu_top .top-menu .collapse-icons[aria-expanded="true"] .add {
  display: none;
}

.header-top #cp_sidevertical_menu_top .top-menu .collapse-icons .remove {
  display: none;
}

.header-top #cp_sidevertical_menu_top .top-menu .collapse-icons[aria-expanded="true"] .remove {
  display: block;
}

#cp_sidevertical_menu_top .top-menu[data-depth="1"] li a {
  padding-inline-start: 12px;
  margin-inline-start: 10px;
}

#cp_sidevertical_menu_top .top-menu[data-depth="2"] li a {
  padding-inline-start: 22px;
}

#cp_sidevertical_menu_top .top-menu[data-depth="3"] li a {
  padding-inline-start: 27px;
}

#cp_sidevertical_menu_top .top-menu li span .material-icons {
  font-size: 15px;
}

/* Support both show/in */
#cp_sidevertical_menu_top .top-menu .collapse.show,
#cp_sidevertical_menu_top .top-menu .collapse.in {
  display: block;
}
#cp_sidevertical_menu_top .top-menu .collapse {
  display: none;
}

#left-column .header-top-main.bg_main.fixed #cp_sidevertical_menu_top{
  margin: 0 0 10px;
}

.topcolumntop .top-menu [data-depth="2"] li {
  width: 100%;
}

.title_menu {
  position: relative;
  float: left;
  font-weight: 500;
  text-align: left;
  width: 100%;
  text-transform: capitalize;
}

#cp_sidevertical_menu_top .top-menu[data-depth="1"] li a::before,
#cp_sidevertical_menu_top .top-menu[data-depth="2"] li a::before,
#cp_sidevertical_menu_top .top-menu[data-depth="3"] li a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 13px;
  display: inline-block;
  height: 10px;
  width: 10px;
  -webkit-mask-image: url(../img/arrow-icon.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(../img/arrow-icon.svg);
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: #6b8499;
  mask-size: 6px;
  -webkit-mask-size: 6px;
  vertical-align: middle;
  margin-inline-end: 3px;
}

#cp_sidevertical_menu_top .top-menu[data-depth="2"] li a::before {
  left: 15px;
}

html body.active {
  overflow: hidden;
}

.title_main_menu {
  position: relative;
  float: left;
  width: 100%;
  padding: 13px 20px 13px;
}

.header-top #cp_sidevertical_menu_top .top-menu .sub-menu {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  z-index: inherit;
  display: block;
  position: static;
  overflow: hidden;
  margin-left: 0;
  width: 100%;
  min-width: 100%;
  background-color: #fff;
  border: 0;
  padding: 0px;
}

/* hide totals */
#cp_sidevertical_menu_top .top-menu .pull-xs-right.hidden-sm-down .material-icons.right,
.vertical-side-top-text .head-wishlist .ap-total-wishlist,
.vertical-side-top-text .head-compare .ap-total-compare {
  display: none;
}

/* =========================================================
   ✅ FINAL WORKING HEADER DROPDOWN (matches your 2nd screenshot)
   ========================================================= */

/* Trigger bar (hamburger + Catégories) */
#header .header-center .text-xs-center.mobile{
  text-align: left !important;
}

#header .header-center .text-xs-center.mobile .menu-container{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 360px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  background: #fad505 !important;
  border: 2px solid #fad505 !important;
  padding: 18px 18px !important;
}

/* text label next to hamburger */
#header .header-center .text-xs-center.mobile .cat-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#header .header-center .text-xs-center.mobile .cat-title::after{
  content: "Catégories" !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #000 !important;
}

/* when open, connect borders */
body.active #header .header-center .text-xs-center.mobile .menu-container{
  border-bottom: 0 !important;
}

/* Dropdown panel */
#header .header-center{
  position: relative !important;
}

#header .header-center #cp_sidevertical_menu_top{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;

  width: 360px !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: calc(100vh - 220px) !important;

  background: #fff !important;
  border: 2px solid #fad505 !important;
  border-top: 0 !important;
  box-shadow: none !important;

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

  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;

  z-index: 10000 !important;

  /* hidden state (no overlay) */
  transform: translateY(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s !important;
}

#header .header-center #cp_sidevertical_menu_top.slide{
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .2s ease, opacity .2s ease !important;
}

/* VERY IMPORTANT: your theme head.tpl forces transform:none on hb-animate-element
   on category/product pages -> override it strongly */
body#category #header .header-center #cp_sidevertical_menu_top{ transform: translateY(10px) !important; }
body#product  #header .header-center #cp_sidevertical_menu_top{ transform: translateY(10px) !important; }
body#category #header .header-center #cp_sidevertical_menu_top.slide{ transform: translateY(0) !important; }
body#product  #header .header-center #cp_sidevertical_menu_top.slide{ transform: translateY(0) !important; }

/* remove internal module header + side blocks (matches screenshot 2) */
#header .header-center #cp_sidevertical_menu_top .title_main_menu,
#header .header-center #cp_sidevertical_menu_top .verticalmenu-side{
  display: none !important;
}

/* list spacing */
#header .header-center #cp_sidevertical_menu_top #sidevertical_menu #top-menu.top-menu[data-depth="0"]{
  padding: 0 !important;
  margin: 0 !important;
}
#header .header-center #cp_sidevertical_menu_top ul.top-menu{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header .header-center #cp_sidevertical_menu_top ul#top-menu > li > a.dropdown-item{
  position: relative !important;
  display: block !important;
  padding: 16px 52px 16px 18px !important;
  border-bottom: 1px solid #e9e9e9 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}
#header .header-center #cp_sidevertical_menu_top ul#top-menu > li:last-child > a.dropdown-item{
  border-bottom: 0 !important;
}

/* remove left bullet arrows for sublevels */
#header .header-center #cp_sidevertical_menu_top .top-menu[data-depth="1"] li a::before,
#header .header-center #cp_sidevertical_menu_top .top-menu[data-depth="2"] li a::before,
#header .header-center #cp_sidevertical_menu_top .top-menu[data-depth="3"] li a::before{
  content: none !important;
  display: none !important;
}

/* ✅ fix “double arrows” on the right: hide both icons and draw ONE chevron */
#header .header-center #cp_sidevertical_menu_top .pull-xs-right{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#header .header-center #cp_sidevertical_menu_top .navbar-toggler.collapse-icons i.material-icons{
  display: none !important;
}

#header .header-center #cp_sidevertical_menu_top .navbar-toggler.collapse-icons{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

#header .header-center #cp_sidevertical_menu_top .navbar-toggler.collapse-icons::after{
  content: "›" !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #000 !important;
  transform: rotate(0deg);
  transition: transform .2s ease;
}

#header .header-center #cp_sidevertical_menu_top .navbar-toggler.collapse-icons[aria-expanded="true"]::after{
  transform: rotate(90deg);
}

/* responsive */
@media (max-width: 767px){
  #header .header-center .text-xs-center.mobile .menu-container,
  #header .header-center #cp_sidevertical_menu_top{
    width: 300px !important;
  }
}