@media screen and (max-width: 768px) {
  .block-superfish {
    width: 20% !important;
    margin-right: 0 !important;
    font-family: 'Cairo', sans-serif;
    margin-left: 12%;
    /* Apply Cairo font to the menu block */
  }

  div.sf-accordion-toggle.sf-style-white a {
    background: white !important;
    border: none !important;
    color: black !important;
    font-weight: 400 !important;
  }

  div.sf-accordion-toggle.sf-style-white>a:after {
    font-size: 1.7em !important;
    right: 1em !important;
  }

  .block-superfish a {
    color: white;
  }

  /* Updated ID for the accordion menu */
  #superfish-main-accordion.sf-accordion.sf-expanded {
    position: fixed;
    top: 0 !important;
    right: 0 !important;
    width: 50vw;
    max-width: 400px;
    min-width: 220px;
    height: 100vh;
    background: rgba(30, 30, 30, 0.97);
    color: #fff !important;
    z-index: 9999;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.45);
    /* pointer-events: none; */
    transition: opacity 0.5s cubic-bezier(.4, 1.7, .7, 1.1), transform 0.5s cubic-bezier(.4, 1.7, .7, 1.1);
  }

  /* Optional: Adjust the toggle button position if it gets covered */
  /* Updated ID for the toggle button */
  #superfish-main-toggle {
    /* Ensure the toggle is also on top */
    position: relative;
    /* Or fixed, depending on your header layout */
    font-size: 1.5rem !important;
  }

  /* Optional: Hide the desktop menu completely on mobile */
  /* Updated ID for the desktop menu */
  #superfish-main {
    display: none !important;
  }

  /* Adjust styles for menu items within the dark background */
  /* Updated ID for the accordion menu */
  #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-1>a,
  #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-1>span,
  #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-2>a,
  #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-2>span {
    color: #ffffff !important;
    background-color: #2c2a2a !important;
  }

  /* Updated ID for the accordion menu */
  #superfish-main-accordion.sf-accordion.sf-expanded li {
    border-bottom: 1px solid rgb(161 156 156);
    /* Subtle white border for separators */
  }

  .sf-depth-1>a[href="/promotions"]::after {
    top: -10px;
    font-size: 8px;
  }

  #block-belgrade-subtheme-mainnavigation{
    width: 10% !important;
  }
  /* --- FIX FOR PLUS/MINUS SIGNS (Updated to target both a and span) --- */
  /* Target both <a> and <span> within li.menuparent */
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent>a::after,
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent>span::after {
    font-family: "Font Awesome 6 Free";
    /* Ensure Font Awesome is loaded */
    font-weight: 900;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    opacity: 0.8;
    transition: content 0.3s ease, transform 0.3s ease;
    float: right;
    margin-right: 0;
  }

  /* Plus sign for collapsed state (when aria-expanded is false) */
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent>a[aria-expanded="false"]::after,
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent>span[aria-expanded="false"]::after {
    content: "\f067";
    /* Font Awesome fa-plus icon */
  }

  /* Minus sign for expanded state (when aria-expanded is true) */
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent>a[aria-expanded="true"]::after,
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent>span[aria-expanded="true"]::after {
    content: "\f068";
    /* Font Awesome fa-minus icon */
  }

  /* Fallback/additional rule for when the li itself gets sf-expanded (if applicable) */
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent.sf-expanded>a::after,
  #block-belgrade-subtheme-mainnavigation #superfish-main-accordion li.menuparent.sf-expanded>span::after {
    content: "\f068";
    /* Font Awesome fa-minus icon */
  }

  /* --- END FIX FOR PLUS/MINUS SIGNS --- */


  /* Updated ID for the accordion menu */
  #superfish-main-accordion li {
    background-color: #414042 !important;
    color: white !important;
  }

  ul.sf-menu.sf-style-white a,
  ul.sf-menu.sf-style-white a:visited {
    color: white !important;
  }


}