/* =========================
   TOP BAR – MOBILE COLOR FIX
   ========================= */
   @media (max-width: 767px) {

    section.top-bar {
      background: linear-gradient(
        to right,
        #efd7a9 100%,
        #b30000 100%
      );
    }
  
    .desktop {
      display: none;
    }
  
    .navbar-brand {
      font-size: 40px;
    }
  
    .hero-title {
      line-height: 1;
    }
  }
  
  
  /* =========================
     DESKTOP MEGA MENU (HOVER)
     ========================= */
  @media (min-width: 992px) {
  
    .dropdown-fullwidth {
      position: static !important;
    }
  
    .mega-menu {
      width: 100%;
      left: 0;
      top: calc(100% - 1px);
      border: none;
      border-radius: 0;
      background: #f5f3f0;
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      padding: 30px 0;
      display: none;
      margin-top: 0;
    }
  
    /* Keep mega menu open while hovering */
    .nav-item.dropdown:hover .mega-menu,
    .mega-menu:hover {
      display: block;
    }
  
    /* Hover gap bridge (important fix) */
    .nav-item.dropdown {
      position: relative;
    }
  
    .nav-item.dropdown::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 20px;
      background: transparent;
    }
  
    /* Remove dropdown arrow (desktop only) */
    .js-product-toggle.dropdown-toggle::after {
      display: none !important;
    }
  
    .mega-menu h6 {
      color: var(--primary-red);
      font-weight: 700;
      margin-bottom: 16px;
      font-size: 16px;
    }
  
    .mega-menu a {
      display: block;
      color: #111;
      text-decoration: none;
      padding: 10px 0;
      transition: 0.2s;
      font-size: 16px;
    }
  }
  
  
  /* =========================
     MOBILE SIDEBAR NAV
     ========================= */
  @media (max-width: 991px) {
  
    .topbar-social a {
      width: 23px;
      height: 23px;
    }
  
    .top-bar-red-section {
      clip-path: none;
      margin-left: 0;
      text-align: center;
    }
  
    .top-bar-left {
      padding: 15px 0;
      font-size: 12px;
    }
  
    .topbar-title {
      font-size: 12px;
    }
  
    .mega-body {
      padding-top: 0;
    }
  
    .navbar-collapse {
      position: fixed;
      top: 0;
      left: -100%;
      width: 90%;
      height: 100vh;
      background: #fff;
      transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: block !important;
      z-index: 1100;
      padding: 20px;
      box-shadow: 10px 0 30px rgba(0,0,0,0.1);
      overflow-y: auto;
    }
  
    .navbar-collapse.show {
      left: 0;
    }
  
    .mobile-menu-header {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
  
    .nav-item {
      width: 100%;
      border-bottom: 1px solid #f8f8f8;
    }
  
    .mega-menu {
      position: static;
      box-shadow: none;
      display: block;
      padding: 10px 0 10px 15px;
    }
  
    .mobile-right-btns {
      display: flex;
      gap: 15px;
      align-items: center;
    }
  }
  
  
  /* =========================
     MOBILE 3-PHASE MEGA MENU
     ========================= */
  @media (max-width: 991px) {
  
    /* Mega menu toggle */
    #productMegaMenu {
      display: none;
    }
  
    #productMegaMenu.show {
      display: block;
    }
  
    /* Mobile header */
    .mega-mobile-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0 12px;
      border-bottom: 1px solid var(--border-color);
    }
  
    .mega-cat {
      font-weight: 600;
      font-size: 14px;
    }
  
    .mega-back-btn {
      border: 0;
      background: transparent;
      padding: 8px 10px;
      font-weight: 700;
      cursor: pointer;
      display: none;
      align-items: center;
    }
  
    .mega-left {
      padding: 0;
    }
  
    .mega-mobile-title {
      font-weight: 700;
      font-size: 14px;
    }
  
    .mobile-right-btns a {
      color: #111;
    }
  
    /* Default view – Categories */
    #productMegaMenu .js-mega-categories {
      display: block;
    }
  
    #productMegaMenu .js-mega-products {
      display: none;
    }
  
    /* Product view */
    #productMegaMenu.is-products-view .js-mega-categories {
      display: none;
    }
  
    #productMegaMenu.is-products-view .js-mega-products {
      display: block;
    }
  
    /* Back button visible in product view */
    #productMegaMenu.is-products-view .mega-back-btn {
      display: inline-flex;
    }
  }