/** Shopify CDN: Minification failed

Line 375:0 Expected "}" to go with "{"

**/
/* Drawer sliding container */
.drawer {
  position: fixed; /* Fixes the drawer in place on the screen */
  top: 0; /* Aligns to top of viewport */
  left: 0 !important; /* Aligns to the left side */
  height: 100vh; /* Full height of the viewport */
  width: 330px; /* Width of drawer */
  background: #fff; /* White background */
  box-shadow: 2px 0 8px rgba(0,0,0,0.15); /* Adds shadow on right edge */
  transform: translateX(-100%); /* Initially hidden off screen */
  transition: transform 0.3s ease; /* Smooth slide in/out animation */
  overflow-y: hidden; /* disable main drawer scroll */
  z-index: 9999; /* Ensures it's on top of other elements */
}

/* Force drawer fully visible on left */
.drawer.drawer--left {
  left: 0 !important; /* Reinforces left alignment */
  right: auto; /* Clears right setting */
  transform: translateX(0) !important; /* Slides drawer into view */
}

/* Drawer shown */
.drawer.open {
  transform: translateX(0); /* Slides in drawer */
}

/* Container inside drawer */
.drawer .container {
  padding: 5px 50px; /* Vertical padding inside drawer */
}

.drawer__title {
  font-size: 12px;
  font-weight: bold;
  color: #000000; /* Smokey BBQ orange ff6600? */
  text-align: left;
  padding: 12px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.drawer__title::before {
  content: "";
}

.drawer__title::after {
  content: "";
}

.menu-logo-top {
  text-align: right; /* Centers the logo */
  padding: 15px 0; /* Top and bottom padding */
  border-bottom: none; /* Removes any bottom border */
  background: white; /* White background for logo section */
}

.menu-logo-top img {
  max-width: 90px; /* Limits image width */
  height: auto; /* Maintains aspect ratio */
  display: inline-block; /* Inline element with block features */
}

.drawer-menu, .mcd-menu-wrapper {
  max-height: none; /* No height limit */
  overflow-y: hidden; /* Disables vertical scroll on wrapper */
  overscroll-behavior: contain; /* Prevents scroll from propagating to parent */
}

body.menu-open {
  overflow: hidden; /* Prevents body scrolling when menu is open */
}

/* Prevent top border on the menu if it's causing the line */
.mcd-menu {
  margin-top: 0; /* Removes margin at top */
  border-top: none; /* Removes top border */
  padding-top: 0; /* Removes top padding */
}


/* Main menu list */
.mcd-menu {
  max-height: 100vh; /* Limits menu to viewport height */
  overflow-y: auto; /* Enables scroll if needed */
  padding-right: 2px; /* Adds space for scrollbar */
  list-style: none; /* Removes bullet points */
  margin: 0; /* Removes outer margin */
  padding: 0; /* Removes inner padding */
}

/* Menu items */
.mcd-menu li {
  position: relative; /* For absolute children */
  overflow: hidden; /* Hide anything outside the list item */
  transition: max-height 0.3s ease; /* Smooth expansion */
}

.mcd-menu li.open {
  max-height: 999px; /* open state allows space for submenu */
}

.mcd-menu li > a .centered {
  display: block;
  text-align: center;
  width: 100%;
}



/* Submenu styles */
.mcd-menu li > ul {
  position: relative; /* Keeps submenu inside parent */
  top: auto !important;
  left: auto !important;
  min-width: 220px; /* Minimum width of submenu */
  background: #fff; /* White background */
  border-left: none !important; /* Removes left border */
  padding: 2px; /* No padding */
  margin: 0; /* No margin */
  list-style: none; /* No bullets */
  display: none; /* Hidden by default */
  box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* Shadow effect */
  z-index: 1000; /* Layer above base drawer */
  max-height: auto; /* Scrollable height */
  overflow-y: auto; /* Enables vertical scroll */
}

/* Show submenu when parent li is open */
.mcd-menu li.open > ul {
  display: block; /* Show submenu */
  opacity: 1; /* Fully visible */
  visibility: visible; /* Ensure visibility */
}

.mcd-menu > li > a {
  display: block; /* Makes it fill full width */
  padding: 5px 0px 7px 8px; /* The order is always Top → Right → Bottom → Left */
  font-weight: 700; /* Bold text */
  color: #444; /* Dark text */
  text-decoration: none; /* No underline */
  border-bottom: 1px solid #eee; /* Light divider */
  cursor: pointer; /* Pointer on hover */
  text-align: left; /* Align text left */
  position: relative; /* For icons and pseudo-elements */
  height: auto; /* Expand with content */
  line-height: 1.3; /* Spacing between lines */
}

/* Small subheading under main title */
.mcd-menu > li > a small {
  display: block; /* Stacked below main title */
  padding: 0px 15px 0px 20px; /* The order is always Top → Right → Bottom → Left */
  font-size: 12px; /* Smaller font */
  color: #999; /* Light gray */
  font-weight: normal; /* Regular weight */
  margin-top: 0; /* Space above */
}


/* Active main item style */
.mcd-menu > li > a.active {
  color: #E86826; /* Highlight color */
  border-left: 4px solid #E86826; /* Orange bar on left */
  border-Right: 4px solid #E86826; /* Orange bar on right */
  margin: 0 0px; /* Compensate for border */
  box-shadow: 0 0 5px #ddd; /* Soft shadow */
  position: relative; /* For arrow indicators */
}



/* Active arrow indicators for main menu headings */
.mcd-menu > li > a.active::before,
.mcd-menu > li > a.active::after {
  content: ""; /* Inserts empty arrows */
  position: absolute; /* Absolutely positioned */
  top: 50%; /* Vertical center */
  transform: translateY(-50%); /* Adjust for center */
  border-top: 5px solid transparent; /* Triangle top */
  border-bottom: 5px solid transparent; /* Triangle bottom */
  z-index: 1; /* Above other elements */
}

.mcd-menu > li > a.active::before {
  left: 0;
  border-left: 5px solid #E86826;
}

.mcd-menu > li > a.active::after {
  right: 0;
  border-right: 5px solid #E86826;
}


/* Active arrow indicators for submenu links */
.mcd-menu li ul li a.active {
  position: relative; /* Needed for pseudo-elements */
   border-left: 4px solid #E86826; /* Orange bar on left */ 
   border-Right: 4px solid #E86826; /* Orange bar on right */
  color: #E86826; /* Orange active color */
}


.mcd-menu li ul li a.active::before,
.mcd-menu li ul li a.active::after {
  content: ""; /* Empty arrows */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  z-index: 1;
}

.mcd-menu li ul li a.active::before {
  left: 0; /* Left indicator */
  border-left: 5px solid #E86826;
}

.mcd-menu li ul li a.active::after {
  right: 0; /* Right indicator */
  border-right: 5px solid #E86826;
}

.menu-link {
  position: relative;       /* Enables absolute positioning inside */
  display: block;
  padding: 5px 40px 5px 15px;  /* Add room on right for icon */
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.toggle-icon {
  position: absolute;
  right: 15px;              /* Push to right margin */
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.2em;
  pointer-events: none;
}

.toggle-icon::before {
  content: "+"; /* Default icon */
}

li.open > a .toggle-icon::before {
  content: "−"; /* When open */
}



/* Submenu items style */
.mcd-menu li ul li a {
  padding-left: 18px; /* Indent submenu */
  border-left: 1px solid #555; /* Medium gray bar on left */
  font-size: 14px; /* Smaller text */
  color: #555; /* Medium gray */
  border-bottom: 1px solid #eee; /* Divider */
  display: block; /* Full-width click area */
  font-weight: normal; /* Normal weight */


  
/* Hover effect for main items */
.mcd-menu li > a:hover {
  color: #e67e22; /* Orange text */
  background-color: #f9f9f9; /* Light background */
}

/* Hover effect for submenu items */
.mcd-menu li ul li a:hover {
  color: #e67e22; /* Orange text */
  background-color: #f9f9f9; /* Light background */
  font-weight: 600; /* Slightly bolder */
}

/* Prevent body from scrolling when the drawer menu is open */
body.menu-open {
  overflow: hidden;
}

.drawer-scroll-area {
  max-height: calc(100vh - 60px); /* Adjust to your header/logo height */
  overflow-y: scroll;             /* ensure scroll happens even if not visible */
  overscroll-behavior: contain;

  /* Hides scrollbar in all major browsers */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Internet Explorer/Edge */

  /* Chrome, Safari, Opera */
}
.drawer-scroll-area::-webkit-scrollbar {
  width: none;
  height: none;
}

@keyframes flashColors {
  0%, 100% {
    color: #ff6600; /* Bright orange */
  }
  50% {
    color: #000; /* Black */
  }
}

.flash-heading {
  animation: flashColors 0.5s infinite alternate;
  font-weight: bold;
}

/* Centering */
.centered {
  display: block;
  text-align: center;
}

/* Force Judge.me carousel into vertical stacked layout */
.drawer-reviews-vertical .jdgm-carousel {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  max-width: 100%;
}

.drawer-reviews-vertical .jdgm-carousel-item {
  flex: 1 1 auto !important;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

/* Hide the carousel arrows (left/right) */
.drawer-reviews-vertical .jdgm-carousel-arrow {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .drawer {
    width: 250px;
  }
  .mcd-menu {
    width: 230px;
  }
  .mcd-menu li > ul {
    left: 230px;
  }
  .mcd-menu li.open > ul {
    left: 200px;
  }
  .mcd-menu > li > a {
    font-size: 14px; /* Slightly smaller on mobile */
    padding: 12px 16px;
  }
  .mcd-menu > li > a small {
    font-size: 10px;
    margin-left: 26px; /* Adjust indent if needed */
  }
  .mcd-menu > li > a i {
    font-size: 18px;
    margin-right: 8px;
  }
}