/* =========================================================
   PaulsParts - Clean CSS (WebShop + Max Mega Menu)
   Wrapper: #mega-menu-wrap-ws-menu-primary
   Menu:    #mega-menu-ws-menu-primary
   ========================================================= */

/* --------------------------
   Home banner spacing
   -------------------------- */
.pauls-home-banner{
  margin-bottom: 30px;
}


/* =========================================================
   SHOP BY CAR GRID (used inside Max Mega Menu widget)
   Desktop layout: horizontal tiles (wrap)
   ========================================================= */
.pp-shop-by-car{
  display:flex;
  gap:28px;
  align-items:flex-end;
  justify-content:flex-start;
  flex-wrap:wrap;
  padding:12px 14px;
  max-width:1100px;
}

.pp-shop-by-car .pp-car{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  line-height:1.1;
}

.pp-shop-by-car .pp-car img{
  width:180px;
  height:60px;
  object-fit:contain;
  display:block;
}

.pp-shop-by-car .pp-car span{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#111;
  text-align:center;
  white-space:nowrap;
}


/* =========================================================
   NAV BAR (keep banner yellow)
   Applies to MMM wrapper + common header navs
   ========================================================= */
header,
header .site-header,
header #masthead,
header nav,
header nav ul{
  background-color:#F8EC0C !important;
  background:#F8EC0C !important;
}

#mega-menu-wrap-ws-menu-primary{
  background:#F8EC0C !important;
}

/* Top-level MMM links */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary > li.mega-menu-item > a.mega-menu-link{
  color:#111 !important;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:10px;
  padding:12px 14px !important;
}

/* Hover / active */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
  background:rgba(255,255,255,.35) !important;
  color:#111 !important;
}


/* =========================================================
   MEGA MENU DROPDOWN: clean white floating panel
   ========================================================= */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary > li.mega-menu-item > ul.mega-sub-menu{
  background:#ffffff !important;
  border-radius:16px !important;
  padding:18px 18px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.20) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  margin-top:10px !important;
}

/* Center content inside mega panel (nice for car tiles) */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary ul.mega-sub-menu{
  text-align:center;
}

/* Card styling for images inside dropdown (if any) */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary ul.mega-sub-menu img{
  border-radius:12px;
  background:#fff;
  padding:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.08);
}


/* =========================================================
   SHOP BY CAR: ensure it stays horizontal on desktop mega
   ========================================================= */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .pp-shop-by-car{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:flex-end !important;
  gap:28px !important;
  max-width:1100px !important;
}

/* Don’t let links stretch full width */
#mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .pp-shop-by-car .pp-car{
  flex:0 0 auto !important;
  width:auto !important;
}


/* =========================================================
   MOBILE: ONE menu button only (Max Mega Menu)
   Place it LOWER under logo/search
   Also: make Shop by Car grid mobile-friendly
   ========================================================= */
@media (max-width: 992px){

  /* Force MMM toggle visible */
  #mega-menu-wrap-ws-menu-primary{
    display:block !important;
    visibility:visible !important;
  }

  #mega-menu-wrap-ws-menu-primary .mega-menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;

    position:fixed !important;
    left:14px !important;
    top:110px !important;      /* <-- change this to move button */
    z-index:999999 !important;

    width:46px !important;
    height:46px !important;
    background:#F8EC0C !important;
    border:1px solid rgba(0,0,0,.20) !important;
    border-radius:12px !important;
    box-shadow:0 10px 22px rgba(0,0,0,.16) !important;
  }

  /* Hamburger lines visible */
  #mega-menu-wrap-ws-menu-primary .mega-menu-toggle .mega-toggle-animated-inner,
  #mega-menu-wrap-ws-menu-primary .mega-menu-toggle .mega-toggle-animated-inner::before,
  #mega-menu-wrap-ws-menu-primary .mega-menu-toggle .mega-toggle-animated-inner::after{
    background-color:#111 !important;
  }
}

/* Mobile Shop by Car: 2-column grid cards */
@media (max-width: 768px){

  /* Make mega submenu comfortable on mobile */
  #mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary > li.mega-menu-item > ul.mega-sub-menu{
    padding:14px !important;
    border-radius:12px !important;
  }

  /* Shop by Car becomes grid */
  #mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .pp-shop-by-car{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    padding:8px !important;
    max-width:none !important;
  }

  #mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .pp-shop-by-car .pp-car{
    background:#fff !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:14px !important;
    padding:10px !important;
    box-shadow:0 10px 22px rgba(0,0,0,.12) !important;
  }

  #mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .pp-shop-by-car .pp-car img{
    width:100% !important;
    max-width:160px !important;
    height:auto !important;
    margin:0 auto 8px auto !important;
  }

  #mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .pp-shop-by-car .pp-car span{
    white-space:normal !important;
    font-size:13px !important;
    font-weight:800 !important;
  }

  /* Make arrow indicator easier to tap */
  #mega-menu-wrap-ws-menu-primary #mega-menu-ws-menu-primary .mega-indicator{
    transform:scale(1.3);
    margin-left:6px;
  }
}

/* ===== Mobile: use THEME hamburger and style it ===== */
@media (max-width: 992px){

  /* Ensure theme toggle shows */
  header#masthead .menu-toggle,
  header#masthead button.menu-toggle,
  header#masthead .ws-toggle-navigation{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Make it look like the yellow button */
  header#masthead .menu-toggle,
  header#masthead button.menu-toggle,
  header#masthead .ws-toggle-navigation button{
    background: #F8EC0C !important;
    border: 1px solid rgba(0,0,0,.20) !important;
    border-radius: 12px !important;
    width: 46px !important;
    height: 46px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
  }
}

/* MOBILE: keep theme hamburger, hide Max Mega Menu hamburger */
@media (max-width: 992px){
  #mega-menu-wrap-ws-menu-primary .mega-menu-toggle{
    display: none !important;
  }
}

/* WebShop mobile menu: ensure the toggle shows the menu it controls */
@media (max-width: 992px){

  /* Make sure the theme toggle is clickable/visible */
  a.menu-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
  }

  /* Force the controlled menu container to be visible when toggled */
  #primary-menu{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* If the menu is inside a nav container, keep it visible too */
  #site-navigation,
  .main-navigation,
  nav#site-navigation{
    display: block !important;
    visibility: visible !important;
  }
}

@media (max-width: 992px){

  /* When the toggle is open, show the menu */
  a.menu-toggle[aria-expanded="true"] + * #primary-menu,
  a.menu-toggle[aria-expanded="true"] ~ * #primary-menu,
  a.menu-toggle[aria-expanded="true"] ~ nav #primary-menu{
    display: block !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* FIX: WebShop mobile menu opens overlay but menu stays hidden */
@media (max-width: 992px){

  /* When menu is toggled open, force the nav to appear */
  #toggle-navigation.ws-toggle-navigation.toggled{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 82vw !important;          /* panel width */
    max-width: 360px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    background: #F8EC0C !important;
    z-index: 999998 !important;      /* below the close button */
    padding: 90px 16px 18px !important; /* space for header + close button */
    box-shadow: 20px 0 50px rgba(0,0,0,.25) !important;
  }

  /* Ensure the UL inside is visible */
  #toggle-navigation.ws-toggle-navigation.toggled ul,
  #toggle-navigation.ws-toggle-navigation.toggled #mega-menu-ws-menu-primary{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
  }

  /* Keep the close button above the panel */
  #site-branding .menu-toggle{
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 999999 !important;
  }

  /* Hide the Max Mega Menu extra hamburger (keep only theme toggle) */
  #mega-menu-wrap-ws-menu-primary .mega-menu-toggle{
    display: none !important;
  }
}

/* =========================================
   POLISH: Mobile off-canvas menu (professional)
   ========================================= */
@media (max-width: 992px){

  /* Off-canvas panel polish */
  #toggle-navigation.ws-toggle-navigation.toggled{
    width: 84vw !important;
    max-width: 380px !important;
    padding: 88px 14px 18px !important;

    background: #F8EC0C !important;
    border-right: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 18px 0 44px rgba(0,0,0,.22) !important;
  }

  /* Menu sections spacing */
  #toggle-navigation.ws-toggle-navigation.toggled .mega-menu > li.mega-menu-item{
    margin: 10px 0 !important;
  }

  /* Section headers (top-level items like Shop by Car, Service Parts...) */
  #toggle-navigation.ws-toggle-navigation.toggled .mega-menu > li.mega-menu-item > a.mega-menu-link{
    background: rgba(255,255,255,.35) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 14px !important;
    padding: 14px 14px !important;

    font-weight: 900 !important;
    color: #111 !important;
    letter-spacing: .2px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Make the dropdown arrow easier to hit + aligned */
  #toggle-navigation.ws-toggle-navigation.toggled .mega-menu > li.mega-menu-item > a .mega-indicator{
    margin-left: 10px !important;
    transform: scale(1.15) !important;
    opacity: .9 !important;
  }

  /* Submenu panel inside off-canvas = clean white card */
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu{
    background: #fff !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
    padding: 14px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
    text-align: left !important;
  }

  /* --- Shop by Car tiles (your custom HTML) --- */
  #toggle-navigation.ws-toggle-navigation.toggled .pp-shop-by-car{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 4px !important;
  }

  #toggle-navigation.ws-toggle-navigation.toggled .pp-shop-by-car .pp-car{
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  }

  #toggle-navigation.ws-toggle-navigation.toggled .pp-shop-by-car .pp-car img{
    width: 100% !important;
    height: 70px !important;
    object-fit: contain !important;
    margin: 0 auto 8px auto !important;
    display: block !important;
  }

  #toggle-navigation.ws-toggle-navigation.toggled .pp-shop-by-car .pp-car span{
    display: block !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #111 !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  /* Regular submenu links (e.g., Service Kits, All Filters...) */
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu a.mega-menu-link{
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    color: #111 !important;
    text-decoration: none !important;
  }

  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu a.mega-menu-link:hover{
    background: rgba(248,236,12,.30) !important;
  }

  /* Make descriptions (like “OEM and aftermarket filters”) less cramped */
  #toggle-navigation.ws-toggle-navigation.toggled .mega-description-group{
    display: block !important;
  }
  #toggle-navigation.ws-toggle-navigation.toggled .mega-menu-description{
    font-weight: 600 !important;
    opacity: .75 !important;
    margin-top: 3px !important;
    font-size: 12px !important;
  }

  /* Close button polish */
  #site-branding .menu-toggle{
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  }

  /* Stop WhatsApp bubble covering menu */
  .joinchat,
  .joinchat__button,
  .wa__btn_popup,
  .whatsapp_float{
    bottom: 18px !important;
    left: auto !important;
    right: 18px !important;
    z-index: 999997 !important;
  }
}

/* Remove the weird empty rounded bars above the tiles (mobile off-canvas) */
@media (max-width: 992px){

  /* Only the FIRST submenu gets the white card styling */
  #toggle-navigation.ws-toggle-navigation.toggled > ul.mega-menu > li.mega-menu-item > ul.mega-sub-menu{
    background:#fff !important;
    border-radius:16px !important;
    margin-top:10px !important;
    padding:14px !important;
    border:1px solid rgba(0,0,0,.10) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.12) !important;
  }

  /* All nested submenu wrappers become transparent + no padding */
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu ul.mega-sub-menu,
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu .mega-menu-row,
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu .mega-menu-column,
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu .mega-menu-widget,
  #toggle-navigation.ws-toggle-navigation.toggled ul.mega-sub-menu .textwidget{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Ensure the grid starts immediately (no mystery spacers) */
  #toggle-navigation.ws-toggle-navigation.toggled .pp-shop-by-car{
    margin-top: 0 !important;
  }
}

/* Max Mega Menu: keep ALL submenus collapsed on mobile when menu opens */
@media (max-width: 992px){

  /* Hide ALL sub menus by default */
  #mega-menu-wrap-primary .mega-sub-menu .mega-sub-menu{
    display: none !important;
  }

  /* Only show a submenu when user toggles it (MMM adds .mega-toggle-on) */
  #mega-menu-wrap-primary li.mega-toggle-on > .mega-sub-menu{
    display: block !important;
  }

  /* Prevent "current" menu items from auto-expanding on mobile */
  #mega-menu-wrap-primary li.mega-current-menu-item > .mega-sub-menu,
  #mega-menu-wrap-primary li.mega-current-menu-ancestor > .mega-sub-menu,
  #mega-menu-wrap-primary li.mega-current-page-ancestor > .mega-sub-menu{
    display: none !important;
  }
}

/* Max Mega Menu: keep everything collapsed on mobile (including first submenu level) */
@media (max-width: 992px){

  /* Hide ALL sub menus by default (first level + deeper) */
  #mega-menu-wrap-primary .mega-menu-item-has-children > .mega-sub-menu{
    display: none !important;
  }

  /* Only show when user toggles open (MMM adds .mega-toggle-on) */
  #mega-menu-wrap-primary .mega-menu-item.mega-toggle-on > .mega-sub-menu{
    display: block !important;
  }

  /* Prevent "current" menu item from auto-expanding on mobile */
  #mega-menu-wrap-primary .mega-current-menu-item > .mega-sub-menu,
  #mega-menu-wrap-primary .mega-current-menu-ancestor > .mega-sub-menu,
  #mega-menu-wrap-primary .mega-current-page-ancestor > .mega-sub-menu{
    display: none !important;
  }

  /* Still allow open toggled items even if they're current */
  #mega-menu-wrap-primary .mega-toggle-on.mega-current-menu-item > .mega-sub-menu,
  #mega-menu-wrap-primary .mega-toggle-on.mega-current-menu-ancestor > .mega-sub-menu,
  #mega-menu-wrap-primary .mega-toggle-on.mega-current-page-ancestor > .mega-sub-menu{
    display: block !important;
  }
}

#mega-menu-wrap-primary { outline: 5px solid red !important; }

/* TEST: strip theme styling from Max Mega Menu on mobile */
@media (max-width: 992px){
  #mega-menu-wrap-primary *,
  #mega-menu-wrap-primary *::before,
  #mega-menu-wrap-primary *::after{
    background: transparent !important;
    box-shadow: none !important;
  }
}