.nav-dropdown:has(.brande-cat-menu[data-bcm]),
.brande-cat-menu[data-bcm] {
  --bcm-radius: 12px;
  box-shadow: 0 16px 40px 4px rgb(0 0 0 / 38%), 0 3px 10px rgb(0 0 0 / 26%) !important;
  border-radius: var(--bcm-radius);
  background-color: #F5F5F5;
}
.brande-cat-menu[data-bcm] {
  --menu-height: min(63vh, 570px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr)) minmax(0,.85fr);
  align-items: start;
  gap: clamp(8px,1.5vw,24px);
  width: min(1120px,calc(100vw - 32px));
  padding: clamp(12px,2vw,24px);
  padding-right: 0.5cm;
  color: #222;
}
.brande-cat-menu .bcm-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(330px,var(--menu-height));
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--bcm-radius);
}
.brande-cat-menu .bcm-preview img[hidden] { display: none; }
.brande-cat-menu .bcm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: var(--menu-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.brande-cat-menu .bcm-list > li {
  display: flex;
  align-items: stretch;
  margin: 0;
  border-bottom: 1px solid #d9d9d9;
}
.bcm-list > li > a, .bcm-list > li > button {
  display: block;
  padding: 10px 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  color: inherit;
}
.bcm-list > li > a { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.bcm-list > li > button { margin: 0; background: transparent; border: none; box-shadow: none; font-size: 16px; }
.bcm-list > li.bcm-selected, .bcm-list > li:hover { background: #d8d8d8; color: #192d72; }
.bcm-list :focus-visible { outline: 2px solid #3154ee; outline-offset: -2px; }
@media (min-width: 850px) {
  .brande-cat-menu[data-bcm] {
    width: min(990px + 1cm, 100%, calc(100vw - 32px));
    grid-template-columns: minmax(0,198px) repeat(3,minmax(0,1fr));
    grid-template-areas: "photo root branch leaf";
    gap: 10px;
    padding: 12px 0.5cm 12px 12px;
    padding-left: calc(12px + 0.5cm);
  }
  .brande-cat-menu[data-bcm] > [data-level="0"] { grid-area: root; }
  .brande-cat-menu[data-bcm] > [data-level="1"] { grid-area: branch; }
  .brande-cat-menu[data-bcm] > [data-level="2"] { grid-area: leaf; }
  .brande-cat-menu[data-bcm] > .bcm-preview { grid-area: photo; }
  .nav-dropdown:has(.brande-cat-menu[data-bcm]) {
    box-sizing: border-box;
    width: min(990px + 1cm, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    padding: 0 !important;
  }
  :is(li:hover, li:focus-within, .current-dropdown, .has-dropdown.show) .nav-dropdown:has(.brande-cat-menu[data-bcm])[style*="--bcm-left"] {
    left: var(--bcm-left) !important;
    right: auto !important;
    margin-left: 0 !important;
    translate: none;
    transform: none !important;
  }
}
@media (max-width: 849px) {
  #header #top-bar .mobile-nav:has([data-open="#main-menu"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-end !important;
    align-items: center;
  }
  #header #top-bar .mobile-nav > li:has(> [data-open="#main-menu"]) {
    order: -1;
    flex: 0 0 auto;
    margin: 0 auto 0 0 !important;
  }
  #header #top-bar [data-open="#main-menu"] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  html:has(dialog.bcm-drawer[open]) { overflow: hidden; }
  dialog.bcm-drawer {
    position: fixed;
    inset: 8px auto auto 8px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 16px 40px 4px rgb(0 0 0 / 38%), 0 3px 10px rgb(0 0 0 / 26%);
    margin: 0;
    padding: 0;
    border: 0;
    width: min(360px, 94vw);
    max-width: 100%;
    height: calc(100dvh - 16px);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f5f5f5;
    color: #222;
  }
  dialog.bcm-drawer:not([open]) { display: none; }
  dialog.bcm-drawer::backdrop { background: rgb(0 0 0 / 45%); }
  .bcm-drawer .bcm-dismiss {
    display: block;
    margin: 0 4px 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #222;
    font-size: 26px;
  }
  .bcm-drawer #main-menu { display: block !important; position: static; width: 100%; max-width: none; }

  .bcm-drawer {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #F5F5F5;
    color: #222;
  }
  .bcm-drawer #main-menu,
  .bcm-drawer #main-menu .sidebar-menu,
  .bcm-drawer #main-menu .nav-sidebar,
  .bcm-drawer #main-menu .sub-menu {
    background: #F5F5F5 !important;
    color: #222 !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li {
    margin: 0;
    border-top: 0;
    border-bottom: 1px solid #d9d9d9;
    background: #F5F5F5;
  }
  .bcm-drawer #main-menu .nav-sidebar > li > a,
  .bcm-drawer #main-menu .nav-sidebar > li > .toggle,
  .bcm-drawer #main-menu .nav-sidebar .sub-menu > li > a,
  .bcm-drawer #main-menu .nav-sidebar .sub-menu > li > .toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 16px !important;
    color: #222 !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    opacity: 1;
  }
  .bcm-drawer #main-menu .nav-sidebar .sub-menu > li {
    margin: 0;
    border-bottom: 1px solid #d9d9d9;
    background: #F5F5F5;
  }
  .bcm-drawer #main-menu .nav-sidebar .sub-menu > li > a { padding-left: 28px !important; }
  .bcm-drawer #main-menu .nav-sidebar .sub-menu .sub-menu > li > a { padding-left: 40px !important; }
  .bcm-drawer #main-menu .nav-sidebar li:has(> .toggle) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
  }
  .bcm-drawer #main-menu .nav-sidebar li:has(> .toggle) > a {
    grid-area: 1 / 1;
    width: auto;
    margin: 0;
    box-sizing: border-box;
  }
  .bcm-drawer #main-menu .nav-sidebar li:has(> .toggle) > ul {
    grid-column: 1 / -1;
  }
  .bcm-drawer #main-menu .nav-sidebar li:is(.active, .current-menu-item, .bcm-expanded) {
    background: #d8d8d8;
  }
  .bcm-drawer #main-menu .nav-sidebar li:is(.active, .current-menu-item, .bcm-expanded) > :is(a, .toggle) {
    background: transparent !important;
    color: #192d72 !important;
  }
  .bcm-drawer #main-menu .nav-sidebar li > .toggle {
    grid-area: 1 / 2;
    display: grid;
    place-items: center;
    position: static;
    align-self: stretch;
    box-sizing: border-box;
    width: 44px;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1;
  }
  .bcm-drawer #main-menu .nav-sidebar > li > ul {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .bcm-drawer #main-menu .nav-sidebar > li:not(.bcm-expanded) > ul { display: none !important; }
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-expanded > ul { display: block !important; }

  .bcm-mobile-holder {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(76px, 26%) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    gap: 0 8px;
    width: 100%;
    max-height: min(91.2vh, 816px);
    overflow-y: auto;
    padding: 12px 10px 10px 12px;
    background: #F5F5F5;
    color: #222;
    border: 1px solid #d9d9d9;
    border-radius: var(--bcm-radius);
    box-shadow: 0 8px 22px rgb(0 0 0 / 18%);
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-preview {
    position: sticky;
    top: 8px;
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-preview img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: var(--bcm-radius);
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list,
  .bcm-mobile-holder .brande-cat-menu > .bcm-mobile-panel {
    grid-column: 2;
    min-width: 0;
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list {
    position: static;
    display: block;
    max-height: min(28.8vh, 276px);
    overflow-y: auto;
    padding: 0;
    margin: 0;
    background: #F5F5F5;
    text-align: left;
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list:not([data-level="0"]) { display: none; }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"] { grid-row: 1; }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel {
    position: static;
    display: flex;
    grid-column: 2;
    flex-direction: column;
    min-width: 0;
    max-height: min(28.8vh, 276px);
    margin: 8px 0 0;
    padding: 0;
    overflow: hidden;
    background: #F5F5F5;
    border: 0;
    border-top: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 14%);
  }
  .bcm-mobile-holder .bcm-mobile-panel .bcm-list {
    display: block;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow-y: auto;
    background: #F5F5F5;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li {
    border-bottom: 1px solid #d9d9d9;
    background: #F5F5F5;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > a,
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button {
    min-height: 42px;
    padding: 11px 12px !important;
    color: #222 !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    opacity: 1;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button {
    min-width: 44px;
    font-size: 18px;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected, :hover, :has(> button[aria-expanded="true"])) {
    background: #d8d8d8;
    color: #192d72;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected, :hover, :has(> button[aria-expanded="true"])) > :is(a, button) {
    background: #d8d8d8 !important;
    color: #192d72 !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list :focus-visible {
    outline: 2px solid #3154ee;
    outline-offset: -2px;
  }
  .bcm-mobile-holder .brande-cat-menu.bcm-drilled {
    height: auto;
    grid-template-rows: auto;
  }
  .bcm-mobile-holder .brande-cat-menu.bcm-drilled > .bcm-list[data-level="0"] {
    grid-row: 1;
    min-height: 0;
    max-height: min(28.8vh, 276px);
  }
  .bcm-mobile-holder .brande-cat-menu.bcm-drilled > .bcm-preview {
    grid-row: 1 / span 3;
    max-height: none;
    overflow: visible;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel .bcm-list:empty { display: none; }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list:empty { display: none; }
}

/* The dropdown casts the shadow when it wraps the menu. */
.nav-dropdown .brande-cat-menu[data-bcm] { box-shadow: none !important; }

@media (max-width: 849px) {
  .bcm-drawer .bcm-dismiss {
    appearance: none !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
  }
  .bcm-drawer .bcm-dismiss::before,
  .bcm-drawer .bcm-dismiss::after { content: none !important; }
  .bcm-mobile-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 16px;
    margin: 0 0 8px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  .bcm-mobile-back {
    flex: none;
    width: 40px;
    height: 44px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 32px;
    line-height: 1;
    box-shadow: none !important;
  }
  /* On phones, use a simple stacked drawer instead of desktop's four-column grid.
     This keeps the title at the top and gives the active child list most of the screen. */
  .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-height: min(91.2dvh, 816px);
    overflow: hidden;
    padding: 10px;
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-mobile-heading {
    order: -2;
    flex: none;
    width: 100%;
    box-sizing: border-box;
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-preview { display: none !important; }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"] {
    order: -1;
    flex: 1 1 auto;
    width: 100%;
    max-height: min(67dvh, 620px);
    overflow-y: auto;
  }
  .bcm-mobile-holder .brande-cat-menu.bcm-drilled {
    height: min(82dvh, 760px);
    max-height: min(91.2dvh, 816px);
    padding: 10px;
  }
  .bcm-mobile-holder .brande-cat-menu.bcm-drilled > .bcm-mobile-heading,
  .bcm-mobile-holder .brande-cat-menu.bcm-drilled > .bcm-list[data-level="0"] { display: none !important; }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel { display: none; }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel:last-child {
    display: flex;
    position: relative;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: var(--bcm-radius);
    background: #F5F5F5;
    box-shadow: 0 8px 22px rgb(0 0 0 / 20%);
  }
  .bcm-mobile-holder .bcm-mobile-panel .bcm-mobile-heading {
    flex: none;
    width: 100%;
    margin: 0 0 8px;
  }
  .bcm-mobile-panel > .bcm-list {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 849px) {
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-expanded:has([data-bcm]) > :is(a, .toggle) {
    display: none !important;
  }
  .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    padding: 0 10px 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel:last-child {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-heading {
    min-height: 0;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    color: #222;
    border-radius: 0;
    border-bottom: 1px solid #d9d9d9;
  }
  .bcm-mobile-heading .bcm-mobile-back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    font: inherit;
    text-align: left;
  }
  .bcm-mobile-back span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (max-width: 849px) {
  dialog.bcm-drawer {
    height: auto;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }
  .bcm-drawer #main-menu,
  .bcm-drawer #main-menu .sidebar-menu,
  .bcm-drawer #main-menu .nav-sidebar {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .bcm-drawer #main-menu form[role="search"],
  .bcm-drawer #main-menu form.searchform,
  .bcm-drawer #main-menu form.search-form,
  .bcm-drawer #main-menu .searchform,
  .bcm-drawer #main-menu .search-form { display: none !important; }
  .bcm-drawer #main-menu .nav-sidebar > li:last-child,
  .bcm-drawer #main-menu .nav-sidebar > li:last-child > a {
    margin-bottom: 0 !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button,
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button:hover,
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button:focus {
    box-sizing: border-box;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-self: stretch;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    line-height: 1;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button::before,
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button::after { display: none !important; }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li { min-height: 44px; }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
  }
}
@media (max-width: 849px) {
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-expanded:has(.bcm-mobile-holder) {
    position: relative;
    z-index: 1;
    overflow: visible;
  }
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-expanded > ul:has(> .bcm-mobile-holder),
  .bcm-drawer #main-menu .nav-sidebar .bcm-mobile-holder {
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
  }
  .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    --sheet-gap: 10px;
    padding: 0 var(--sheet-gap) var(--sheet-gap);
    overflow: visible;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel:last-child {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-heading {
    border: 0;
    margin-bottom: var(--sheet-gap);
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"],
  .bcm-mobile-holder .bcm-mobile-panel:last-child > .bcm-list {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    border-radius: var(--bcm-radius);
    border: 1px solid #ddd;
    background: #f5f5f5;
    box-shadow: 0 0 8px rgb(0 0 0 / 12%), 0 9px 16px -3px rgb(0 0 0 / 30%);
    overflow: auto;
  }
}

/* 1.0.33: mobile separators only within the Products category tree. */
@media (max-width: 849px) {
  /* The main navigation stays clean, with extra breathing room below. */
  .bcm-drawer #main-menu .nav-sidebar > li,
  .bcm-drawer #main-menu .nav-sidebar .sub-menu > li {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .bcm-drawer #main-menu .nav-sidebar {
    padding-bottom: 20px !important;
  }
  /* Category separators are inset from both edges, including nested panels. */
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li {
    position: relative;
    border: 0 !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: #d9d9d9;
    pointer-events: none;
  }
}

/* 1.0.37: Native WP menu integration (no Flatsome UX Block). */
@media (min-width: 850px) {
  #header li.bcm-direct-root { position: relative; }
  #header li.bcm-direct-root > ul.bcm-direct-dropdown {
    list-style: none;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity 130ms ease-out, visibility 130ms;
  }
  #header li.bcm-direct-root:is(:hover, :focus-within, .current-dropdown, .show) > ul.bcm-direct-dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  #header .bcm-direct-dropdown > li.bcm-direct-dropdown-item {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #header .bcm-direct-dropdown-item > .brande-cat-menu[data-bcm] { max-width: 100%; }
  #header li.bcm-direct-root > a .bcm-direct-caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 2px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
    background: transparent;
  }
}
@media (max-width: 849px) {
  .bcm-drawer #main-menu .nav-sidebar > li > ul.bcm-direct-dropdown { 
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li > ul.bcm-direct-dropdown > .bcm-mobile-holder {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* 1.0.38: mobile TOOTED toggle aligns with INFO / POED. */
@media (max-width: 849px) {
  /* The tiny desktop caret must never appear under TOOTED in the drawer. */
  .bcm-drawer #main-menu li.bcm-direct-root > a .bcm-direct-caret {
    display: none !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > .bcm-direct-mobile-toggle {
    display: grid !important;
    grid-area: 1 / 2;
    place-items: center;
    width: 44px;
    min-height: 44px;
    padding: 0 !important;
    color: #222 !important;
    opacity: 1 !important;
    background: transparent !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > .bcm-direct-mobile-toggle::before {
    content: '' !important;
    display: block !important;
    width: 10px;
    height: 10px;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translate(-2px,-2px);
    background: transparent !important;
    position: static !important;
    opacity: 1 !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > .bcm-direct-mobile-toggle::after {
    content: none !important;
    display: none !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded > .bcm-direct-mobile-toggle::before {
    transform: rotate(225deg) translate(-2px,-2px);
  }
}

/* 1.0.39: Hide Flatsome's desktop dropdown pointer in the mobile drawer.
   The white triangle below the category sheet is decorative and must not
   be shown inside a stacked mobile navigation. Preserve category chevrons
   and the TOOTED/INFO/POED toggle controls. */
@media (max-width: 849px) {
  .bcm-drawer #main-menu li.bcm-direct-root > ul.bcm-direct-dropdown::before,
  .bcm-drawer #main-menu li.bcm-direct-root > ul.bcm-direct-dropdown::after,
  .bcm-drawer #main-menu li.bcm-direct-root > ul.bcm-direct-dropdown > li.bcm-direct-dropdown-item::before,
  .bcm-drawer #main-menu li.bcm-direct-root > ul.bcm-direct-dropdown > li.bcm-direct-dropdown-item::after,
  .bcm-drawer #main-menu li.bcm-direct-root > ul.bcm-direct-dropdown > li.bcm-mobile-holder::before,
  .bcm-drawer #main-menu li.bcm-direct-root > ul.bcm-direct-dropdown > li.bcm-mobile-holder::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }
}

/* 1.0.40: Flatsome's dropdown arrows belong to the parent li.has-dropdown,
   not the submenu <ul>. When the item expands inside our mobile dialog,
   those triangles otherwise sit at the bottom of the expanded TOOTED row. */
@media (max-width: 849px) {
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.has-dropdown::before,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.has-dropdown::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}


/* 1.0.41: Match the mobile menu sheet to Flatsome's sorting popover.
   Use a softer rounded translucent card with a subtle bright border.
   Layout and behaviour stay the same; only the visual treatment changes. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.72) !important;
    background: rgba(244, 244, 247, 0.88) !important;
    -webkit-backdrop-filter: blur(16px) saturate(118%);
    backdrop-filter: blur(16px) saturate(118%);
    box-shadow:
      0 14px 34px rgba(0,0,0,0.18),
      0 2px 10px rgba(0,0,0,0.10),
      inset 0 1px 0 rgba(255,255,255,0.62) !important;
  }
  .bcm-drawer,
  .bcm-drawer #main-menu,
  .bcm-drawer #main-menu .sidebar-menu,
  .bcm-drawer #main-menu .nav-sidebar,
  .bcm-drawer #main-menu .sub-menu {
    background: transparent !important;
  }
  .bcm-drawer #main-menu .nav-sidebar > li,
  .bcm-drawer #main-menu .nav-sidebar .sub-menu > li {
    background: transparent !important;
  }
  .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    background: transparent !important;
  }
  .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"],
  .bcm-mobile-holder .bcm-mobile-panel:last-child,
  .bcm-mobile-holder .bcm-mobile-panel:last-child > .bcm-list {
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.70) !important;
    background: rgba(244, 244, 247, 0.84) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.14),
      0 2px 8px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.60) !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-mobile-heading {
    background: transparent !important;
    border-bottom: 0 !important;
    margin-bottom: 12px !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li,
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > a,
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li > button {
    background: transparent !important;
  }
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected, :hover, :has(> button[aria-expanded="true"])),
  .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected, :hover, :has(> button[aria-expanded="true"])) > :is(a, button),
  .bcm-drawer #main-menu .nav-sidebar li:is(.active, .current-menu-item, .bcm-expanded),
  .bcm-drawer #main-menu .nav-sidebar li:is(.active, .current-menu-item, .bcm-expanded) > :is(a, .toggle) {
    background: rgba(0,0,0,0.055) !important;
    color: #222 !important;
  }
  .bcm-drawer .bcm-dismiss {
    color: #1f1f1f !important;
  }
}


/* 1.0.42: One even, darker gray for all the mobile main navigation.
   TOOTED category cards are a separate lighter frosted surface. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    --bcm-main-shade: rgba(220, 221, 226, 0.81);
    --bcm-category-shade: rgba(249, 249, 251, 0.81);
    --bcm-sheet-border: rgba(255, 255, 255, 0.74);
    background: var(--bcm-main-shade) !important;
    border: 1px solid var(--bcm-sheet-border) !important;
    border-radius: 28px !important;
    -webkit-backdrop-filter: blur(20px) saturate(114%);
    backdrop-filter: blur(20px) saturate(114%);
  }
  /* Flatsome applies state colors to links and menu items. Cancel them
     consistently, so the whole main sheet has the same background. */
  dialog.bcm-drawer #main-menu,
  dialog.bcm-drawer #main-menu .sidebar-menu,
  dialog.bcm-drawer #main-menu .nav-sidebar,
  dialog.bcm-drawer #main-menu .sub-menu,
  dialog.bcm-drawer #main-menu .nav-sidebar > li,
  dialog.bcm-drawer #main-menu .nav-sidebar .sub-menu > li,
  dialog.bcm-drawer #main-menu .nav-sidebar > li:is(.active,.current-menu-item,.current-menu-ancestor,.bcm-expanded,:hover,:focus-within),
  dialog.bcm-drawer #main-menu .nav-sidebar .sub-menu > li:is(.active,.current-menu-item,.bcm-expanded,:hover,:focus-within),
  dialog.bcm-drawer #main-menu .nav-sidebar > li > :is(a,.toggle),
  dialog.bcm-drawer #main-menu .nav-sidebar .sub-menu > li > :is(a,.toggle),
  dialog.bcm-drawer #main-menu .nav-sidebar > li > :is(a,.toggle):is(:hover,:focus,.active),
  dialog.bcm-drawer #main-menu .nav-sidebar .sub-menu > li > :is(a,.toggle):is(:hover,:focus,.active),
  dialog.bcm-drawer #main-menu .nav-sidebar > li:is(.active,.current-menu-item,.current-menu-ancestor,.bcm-expanded) > :is(a,.toggle),
  dialog.bcm-drawer #main-menu .nav-sidebar .sub-menu > li:is(.active,.current-menu-item,.bcm-expanded) > :is(a,.toggle) {
    background: transparent !important;
    background-image: none !important;
  }
  /* Only the category list is lighter. The wrapper stays fully clear;
     it must not form a third tinted layer or lighter edge bands. */
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu[data-bcm],
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-mobile-heading,
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel:last-child {
    background: transparent !important;
    background-image: none !important;
  }
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"],
  dialog.bcm-drawer .bcm-mobile-holder .bcm-mobile-panel:last-child > .bcm-list {
    background: var(--bcm-category-shade) !important;
    border: 1px solid var(--bcm-sheet-border) !important;
    border-radius: 28px !important;
    -webkit-backdrop-filter: blur(18px) saturate(110%);
    backdrop-filter: blur(18px) saturate(110%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.14),
      0 2px 8px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.60) !important;
  }
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-list > li,
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-list > li > :is(a,button) {
    background: transparent !important;
  }
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected,:hover,:has(> button[aria-expanded="true"])) {
    background: rgba(0,0,0,0.045) !important;
  }
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected,:hover,:has(> button[aria-expanded="true"])) > :is(a,button) {
    background: transparent !important;
    color: #192d72 !important;
  }
}


/* 1.0.43: Keep the entire lower main-menu sheet a single continuous layer.
   The WP direct-integration wrapper has Flatsome's nav-dropdown class, which
   otherwise brings its own opaque #f5f5f5 panel between the header and footer.
   No layout or category-card changes. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    /* Slightly more transparent than 1.0.42, with one uninterrupted gradient. */
    --bcm-main-shade: rgba(211, 213, 223, .66);
    background: linear-gradient(
      180deg,
      rgba(222, 224, 233, .64) 0%,
      rgba(209, 211, 221, .73) 100%
    ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(112%);
    backdrop-filter: blur(20px) saturate(112%);
  }
  /* The previously visible white rectangular middle band comes from the
     nav-dropdown wrapper; it must be completely clear on mobile. */
  dialog.bcm-drawer #main-menu ul.nav-dropdown.bcm-direct-dropdown,
  dialog.bcm-drawer #main-menu ul.nav-dropdown.bcm-direct-dropdown > li.bcm-direct-dropdown-item,
  dialog.bcm-drawer #main-menu ul.nav-dropdown.bcm-direct-dropdown > li.bcm-mobile-holder,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul > li,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root .brande-cat-menu[data-bcm] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* Keep the lighter, raised category card itself. */
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"],
  dialog.bcm-drawer .bcm-mobile-holder .bcm-mobile-panel:last-child > .bcm-list {
    background: var(--bcm-category-shade) !important;
    border: 1px solid var(--bcm-sheet-border) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.14),
      0 2px 8px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.60) !important;
  }
}

/* 1.0.44: Two visible layers on phones: one continuous main sheet and one
   slightly grey, translucent category sheet. A drilled category replaces the
   content INSIDE the same upper card; it never gains another frosted frame. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    /* Preserve the 1.0.43 continuous, translucent lower sheet. */
    background: linear-gradient(180deg,
      rgba(222, 224, 233, .64) 0%,
      rgba(209, 211, 221, .73) 100%) !important;
  }
  /* Neutralise Flatsome's opaque wrappers between our two sheets. */
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul.bcm-direct-dropdown,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul.bcm-direct-dropdown > li,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul.bcm-direct-dropdown .bcm-mobile-holder,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul.bcm-direct-dropdown .bcm-mobile-panel,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root > ul.bcm-direct-dropdown .bcm-mobile-heading {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* The only raised surface is the category container itself. This includes
     TOOTED and the category rows, so no intermediate white strip is left. */
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root .bcm-mobile-holder .brande-cat-menu[data-bcm],
  dialog.bcm-drawer #main-menu .nav-sidebar .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 10px 12px 12px !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 28px !important;
    background: linear-gradient(155deg,
      rgba(235, 237, 243, .81) 0%,
      rgba(220, 223, 233, .78) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
    backdrop-filter: blur(18px) saturate(112%) !important;
    box-shadow:
      0 11px 26px rgba(0,0,0,.17),
      0 2px 8px rgba(0,0,0,.07),
      inset 0 1px 0 rgba(255,255,255,.58) !important;
    overflow: hidden;
  }
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu > .bcm-list[data-level="0"],
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel,
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel:last-child,
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-mobile-panel:last-child > .bcm-list {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-mobile-heading {
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
  /* Keep the rows tidy and readable over the glass, without colour bands. */
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-list > li,
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-list > li > :is(a,button) {
    background: transparent !important;
  }
  dialog.bcm-drawer #main-menu .bcm-mobile-holder .brande-cat-menu .bcm-list > li:is(.bcm-selected,:hover,:has(> button[aria-expanded="true"])) {
    background: rgba(0,0,0,.045) !important;
  }
}


/* 1.0.45: A full-height rear glass sheet, with the active back/title bar
   VISUALLY on that sheet. The one raised category card contains lists only.
   Keep background menu links live and scroll overflowing menu content. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    inset: 8px auto max(4px, env(safe-area-inset-bottom)) 8px;
    height: calc(100dvh - 8px - max(4px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 8px - max(4px, env(safe-area-inset-bottom))) !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }
  dialog.bcm-drawer:not([open]) { display: none !important; }
  dialog.bcm-drawer > .bcm-dismiss { flex: 0 0 44px; }
  dialog.bcm-drawer > .bcm-sheet-heading {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 58px;
    margin: 0 12px 6px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  dialog.bcm-drawer > .bcm-sheet-heading[hidden] { display: none !important; }
  dialog.bcm-drawer .bcm-sheet-back {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font: 600 19px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: left;
    color: #222 !important;
    cursor: pointer;
  }
  dialog.bcm-drawer .bcm-sheet-back span { font: inherit; }
  dialog.bcm-drawer #main-menu {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* The original titles still exist for their back actions, but no longer
     occupy space INSIDE the category card: that would create a third layer. */
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu .bcm-mobile-heading {
    display: none !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-expanded:not(.bcm-direct-root) > :is(a,.toggle) {
    display: none !important;
  }
  dialog.bcm-drawer .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    padding-top: 12px !important;
  }
}


/* 1.0.46: Desktop mega menu matches the mobile frosted-glass category card.
   Scoped to desktop only: the two-layer mobile drawer is untouched. */
@media (min-width: 850px) {
  #header li.bcm-direct-root > ul.bcm-direct-dropdown,
  .nav-dropdown:has(.brande-cat-menu[data-bcm]) {
    --bcm-radius: 28px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: var(--bcm-radius) !important;
    background: linear-gradient(155deg,
      rgba(235, 237, 243, .81) 0%,
      rgba(220, 223, 233, .78) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    backdrop-filter: blur(18px) saturate(112%);
    box-shadow:
      0 11px 26px rgba(0, 0, 0, .17),
      0 2px 8px rgba(0, 0, 0, .07),
      inset 0 1px 0 rgba(255, 255, 255, .58) !important;
    overflow: visible;
  }
  /* Let one shared translucent outer sheet show through every column. */
  #header li.bcm-direct-root > ul.bcm-direct-dropdown > li.bcm-direct-dropdown-item,
  #header li.bcm-direct-root > ul.bcm-direct-dropdown .brande-cat-menu[data-bcm],
  .nav-dropdown:has(.brande-cat-menu[data-bcm]) .brande-cat-menu[data-bcm] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Keep the category row hover subtle instead of an opaque grey strip. */
  .brande-cat-menu[data-bcm] .bcm-list > li:is(.bcm-selected, :hover) {
    background: rgba(0, 0, 0, .055) !important;
  }
}

/* 1.0.47: Keep the expanded product LI from catching taps on the exposed
   rear menu sheet. Restore hit testing only on the actual category card. */
@media (max-width: 849px) {
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded {
    pointer-events: none;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu[data-bcm] {
    pointer-events: auto;
  }
}


/* 1.0.47: Restore desktop dropdown visibility independently of Flatsome's
   nav-dropdown animation rules. Do not clip the parent ul: on some Flatsome
   headers that cuts off the hover target and hides the category menu. */
@media (min-width: 850px) {
  #header li.bcm-direct-root > ul.bcm-direct-dropdown {
    display: block !important;
    overflow: visible !important;
    clip-path: none !important;
    transform: none !important;
  }
  #header li.bcm-direct-root:is(:hover, :focus-within, .current-dropdown, .show) > ul.bcm-direct-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #header li.bcm-direct-root > ul.bcm-direct-dropdown > li.bcm-direct-dropdown-item,
  #header li.bcm-direct-root > ul.bcm-direct-dropdown .brande-cat-menu[data-bcm] {
    visibility: inherit !important;
  }
}

/* 1.0.47: Keep a readable portion of the rear main menu visible below the
   category card. Its top corners stay rounded while the REAR menu scrolls;
   the card compresses instead of being cropped by the scroll container. */
@media (max-width: 849px) {
  dialog.bcm-drawer { --bcm-card-collapse: 0px; }
  dialog.bcm-drawer > .bcm-dismiss {
    position: absolute !important;
    top: 10px;
    right: 12px;
    z-index: 15;
    flex: none !important;
  }
  dialog.bcm-drawer > .bcm-sheet-heading {
    margin: 38px 54px 0 12px !important;
    min-height: 48px !important;
    z-index: 3;
  }
  dialog.bcm-drawer #main-menu {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded {
    position: sticky !important;
    top: 0;
    z-index: 4;
    pointer-events: none;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu[data-bcm] {
    pointer-events: auto;
    /* At least roughly two rear links remain visible below the front card. */
    max-height: clamp(160px,
      calc(100dvh - 345px - var(--bcm-card-collapse, 0px)), 530px) !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu > .bcm-list[data-level="0"] {
    min-height: 0;
    max-height: clamp(140px,
      calc(100dvh - 375px - var(--bcm-card-collapse, 0px)), 502px) !important;
    overflow-y: auto !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu.bcm-drilled {
    height: auto !important;
    min-height: 0 !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu.bcm-drilled .bcm-mobile-panel:last-child {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 1 auto;
    overflow: hidden !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu.bcm-drilled .bcm-mobile-panel:last-child > .bcm-list {
    max-height: clamp(140px,
      calc(100dvh - 375px - var(--bcm-card-collapse, 0px)), 502px) !important;
    overflow-y: auto !important;
  }
}


/* 1.0.48: Desktop card owns its own readable glass background.
   Flatsome can override/drop the outer nav-dropdown background on transparent
   headers. Keep a single background ON the menu so category text never sits
   directly on slideshow imagery. The outer dropdown only positions it. */
@media (min-width: 850px) {
  #header li.bcm-direct-root > ul.bcm-direct-dropdown,
  #header .nav-dropdown:has(.brande-cat-menu[data-bcm]) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  #header li.bcm-direct-root > ul.bcm-direct-dropdown .brande-cat-menu[data-bcm],
  #header .nav-dropdown:has(.brande-cat-menu[data-bcm]) .brande-cat-menu[data-bcm] {
    --bcm-radius: 28px;
    box-sizing: border-box;
    color: #222 !important;
    /* 1.0.57: Lighten the desktop glass card and reduce transparency
       for better text readability over bright/dark rotating banners.
       The outer dropdown remains only a positioning wrapper. */
    background: linear-gradient(180deg,
      rgba(245, 246, 249, .88) 0%,
      rgba(235, 237, 243, .91) 100%) !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: 28px !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 2px 10px rgba(0,0,0,.10),
                inset 0 1px 0 rgba(255,255,255,.62) !important;
    overflow: hidden;
  }
  #header .brande-cat-menu[data-bcm] .bcm-list > li > :is(a,button) {
    color: #252733 !important;
    opacity: 1 !important;
  }
  #header .brande-cat-menu[data-bcm] .bcm-list > li:is(.bcm-selected,:hover) > :is(a,button) {
    color: #192d72 !important;
  }
}

/* 1.0.48: Return the mobile sheet's top to the stable 1.0.45 layout.
   The front card has a stable maximum height while the lower menu scrolls.
   Never resize a sticky scroll child in response to scrolling. */
@media (max-width: 849px) {
  dialog.bcm-drawer > .bcm-dismiss {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    flex: 0 0 44px !important;
  }
  dialog.bcm-drawer > .bcm-sheet-heading {
    margin: 0 12px 6px !important;
    min-height: 58px !important;
    z-index: 3;
  }
  dialog.bcm-drawer #main-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  /* No sticky layer inside the same scroller as the rear navigation.
     Sticky used to cover successive rear links and swallow their swipe. */
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu[data-bcm] {
    max-height: clamp(160px, calc(100dvh - 345px), 530px) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu > .bcm-list[data-level="0"],
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu.bcm-drilled .bcm-mobile-panel:last-child > .bcm-list {
    max-height: clamp(140px, calc(100dvh - 375px), 502px) !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}


/* 1.0.49: Taller front card, stable heights (no scroll-driven reflow), and
   the same two glass layers for ordinary WordPress submenus (INFO / POED).
   Leave the original lower-sheet header/close controls where they were. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    --bcm-front-height: clamp(180px, calc(100dvh - 310px), 820px);
  }
  /* Only the close line and one title/back line are reserved above the card. */
  dialog.bcm-drawer > .bcm-sheet-heading {
    min-height: 48px !important;
    margin: 0 12px 2px !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu[data-bcm] {
    height: var(--bcm-front-height) !important;
    max-height: var(--bcm-front-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    border-radius: 28px !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu > .bcm-list[data-level="0"] {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu.bcm-drilled .bcm-mobile-panel:last-child {
    display: flex;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .brande-cat-menu.bcm-drilled .bcm-mobile-panel:last-child > .bcm-list {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  /* Native Flatsome sections: one floating glass panel, no extra layer. */
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root.bcm-expanded {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root.bcm-expanded > :is(a,.toggle) {
    display: none !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card {
    display: none !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root.bcm-expanded > ul.bcm-native-card {
    display: block !important;
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100% !important;
    height: var(--bcm-front-height) !important;
    max-height: var(--bcm-front-height) !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 13px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,.87) !important;
    border-radius: 28px !important;
    background: rgba(241,241,247,.91) !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    box-shadow: 0 12px 24px rgba(0,0,0,.15),
                inset 0 1px 0 rgba(255,255,255,.65) !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card > li {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 44px;
    align-items: center;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card > li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: rgba(80,80,80,.17);
    pointer-events: none;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card > li > a {
    grid-area: 1 / 1;
    display: flex !important;
    align-items: center;
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: transparent !important;
    color: #242424 !important;
    font: 500 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 1 !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card > li > .toggle {
    grid-area: 1 / 2;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 52px;
    min-height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    position: static;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #222 !important;
    font-size: 23px;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card > li > .toggle::before,
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root > ul.bcm-native-card > li > .toggle::after {
    display: none !important;
    content: none !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar .bcm-native-card ul.bcm-native-children {
    display: none !important;
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar .bcm-native-card li.bcm-native-expanded > ul.bcm-native-children {
    display: block !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar .bcm-native-card ul.bcm-native-children li > a {
    min-height: 44px;
    padding: 8px 18px !important;
    color: #222 !important;
    background: transparent !important;
    opacity: 1 !important;
  }
}

/* Expanded section is always first in the scroll area, even when its main
   navigation label originally sits after several other menu items. This
   matches the TOOTED card position and leaves the lower links visible. */
@media (max-width: 849px) {
  dialog.bcm-drawer #main-menu .nav-sidebar:has(> li.bcm-expanded) {
    display: flex !important;
    flex-direction: column !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar:has(> li.bcm-expanded) > li {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar:has(> li.bcm-expanded) > li.bcm-expanded {
    order: -1;
  }
}


/* 1.0.50: Narrower, taller floating submenu glass panel on phones.
   The dismiss control and back/title remain on the rear sheet. Keep the
   card height constant during scrolling; category lists scroll INSIDE it. */
@media (max-width: 849px) {
  dialog.bcm-drawer {
    /* Make the front panel about one navigation row taller than 1.0.49.
       100dvh tracks the browser's visible area, including iOS Safari. */
    --bcm-front-height: clamp(260px, calc(100dvh - 245px), 860px);
    --bcm-front-inset: 14px;
  }
  /* Tighter but separate cross and previous-level heading rows. */
  dialog.bcm-drawer > .bcm-dismiss {
    flex: 0 0 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  dialog.bcm-drawer > .bcm-sheet-heading {
    flex: 0 0 auto;
    min-height: 40px !important;
    margin: 0 12px 0 !important;
  }
  dialog.bcm-drawer .bcm-sheet-back {
    min-height: 40px !important;
  }
  /* Products: visibly inset from both rear-sheet sides. */
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-direct-root.bcm-expanded .bcm-mobile-holder .brande-cat-menu[data-bcm] {
    width: calc(100% - 2 * var(--bcm-front-inset)) !important;
    max-width: calc(100% - 2 * var(--bcm-front-inset)) !important;
    margin: 0 auto 10px !important;
    height: var(--bcm-front-height) !important;
    max-height: var(--bcm-front-height) !important;
    min-height: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }
  /* INFO and POED use exactly the same inset and stable height. */
  dialog.bcm-drawer #main-menu .nav-sidebar > li.bcm-native-root.bcm-expanded > ul.bcm-native-card {
    width: calc(100% - 2 * var(--bcm-front-inset)) !important;
    max-width: calc(100% - 2 * var(--bcm-front-inset)) !important;
    margin: 0 auto 10px !important;
    height: var(--bcm-front-height) !important;
    max-height: var(--bcm-front-height) !important;
    min-height: 0 !important;
    border-radius: 28px !important;
  }
}
/* The Flatsome sidebar UL normally reserves its default 40px list indentation.
   When a front card is open, that indent offsets the card to the right.
   Remove it only in the expanded state; keep the rear-link labels aligned. */
@media (max-width: 849px) {
  dialog.bcm-drawer #main-menu .nav-sidebar:has(> li.bcm-expanded) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 3px !important;
  }
  dialog.bcm-drawer #main-menu .nav-sidebar:has(> li.bcm-expanded) > li:not(.bcm-expanded) > a {
    padding-left: 56px !important;
  }
}

/* 1.0.55: menu-only spacing (search layout now belongs to Brande Smart Search). */
@media (max-width: 849px) {
  dialog.bcm-drawer:not(:has(#main-menu .nav-sidebar > li.bcm-expanded)) #main-menu .nav-sidebar {
    box-sizing: border-box;
    padding-top: 22px !important;
  }
}