/* ==========================================================================
   GWT NEW HEADER DESIGN (2026) - COMPLETE MASTER STYLESHEET
   ========================================================================== */

/* 1. Bottom Border under the entire navigation row */
header#page-header .l-subheader.at_bottom {
    border-bottom: 2px solid #111 !important;
}

/* 2. DooFinder Search Button (Light Gray Pill, Icon on Right) */
header#page-header .l-subheader-cell.at_right .w-btn.header_search {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #111 !important; 
    border-radius: 50px !important;
    padding: 0 15px 0 20px !important;
    margin-right: 20px !important;
}

/* Search Button Width Responsiveness (280px on min-1350px, auto below) */
@media (min-width: 1350px) {
    header#page-header .l-subheader-cell.at_right .w-btn.header_search {
        width: 280px !important;
    }
}
@media (max-width: 1349px) {
    header#page-header .l-subheader-cell.at_right .w-btn.header_search {
        width: 280px !important;
    }
}

header#page-header .l-subheader-cell.at_right .w-btn.header_search .w-btn-label {
    font-family: 'halyard-text', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: #111 !important;
    text-transform: none !important;
}
header#page-header .l-subheader-cell.at_right .w-btn.header_search i {
    color: #111 !important;
    font-size: 18px !important;
    margin: 0 !important;
}

/* 3. Account / Login Button Styling & Equalized Spacing */
.header_hor .l-subheader-cell.at_right > .w-html.ush_html_6,
.l-subheader-cell.at_right .w-html:has(.gwt-header-account) {
    margin-left: 0 !important;
}

.gwt-header-account {
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.gwt-header-account a {
    background-color: #111 !important;
    color: #feaa01 !important;
    border-radius: 50px !important;
    padding: 9px 24px !important;
    font-family: 'halyard-text', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
}
.gwt-header-account a:hover {
    background-color: #333 !important;
    color: #feaa01 !important;
}

body.logged-in .gwt-login-link { display: none !important; }
body:not(.logged-in) .gwt-account-link { display: none !important; }

/* Hide Login Button on Mobile */
@media (max-width: 979px) {
    .gwt-header-account,
    .header_hor .l-subheader-cell.at_right > .w-html.ush_html_6,
    .l-subheader-cell.at_right .w-html:has(.gwt-header-account) {
        display: none !important;
    }
}

/* 4. Wisepops Bell Placeholder */
.gwt-bell-placeholder {
    position: relative;
    cursor: pointer;
    font-size: 24px !important;
    color: #111;
    margin-right: 25px !important;
    display: flex;
    align-items: center;
}

/* 5. Cart Icon (Shrink-wrapped to fix badge alignment) */
header#page-header .l-subheader-cell.at_right .w-cart {
    margin-top: 0 !important;
    width: auto !important;
    height: auto !important;
}
header#page-header .l-subheader-cell.at_right .w-cart > a {
    border: none !important; 
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
header#page-header .l-subheader-cell.at_right .w-cart-icon {
    border: none !important; 
    font-size: 24px !important; 
    width: 24px !important; 
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 6. Synchronized Notification Badges (Bell & Cart) */
.gwt-bell-placeholder .badge,
header#page-header .l-subheader-cell.at_right .w-cart .w-cart-quantity {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    background: #ff5b1b !important;
    color: #fff !important;
    font-family: 'halyard-text', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

/* ==========================================================================
   IMPREZA TOP-LEVEL MENU ITEMS (LEVEL 1 HEADER LINKS)
   ========================================================================== */

/* Spacing between top-level menu items */
.w-nav-list.level_1 > .w-nav-item.level_1 {
    margin-right: 30px !important;
}

/* Typography matching inspector rule (33px, Halyard-Display, Weight 500) */
.w-nav-anchor.level_1 {
    font-family: 'halyard-display', sans-serif !important;
    font-size: 33px !important;
    line-height: 1.3 !important; /* 130% */
    letter-spacing: -0.05em !important; /* -5% */
    font-weight: 500 !important;
    color: #111 !important;
    padding: 0 !important;
    text-decoration: none !important;
    
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   TOP-LEVEL NAV COLOR LOCK (NO HOVER SHIFTS)
   ========================================================================== */


/* 1. ATTACHMENTS & INFO: ALWAYS BLACK (#111) IN ALL STATES */
.w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1,
.w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1:hover,
.w-nav-list.level_1 > .w-nav-item:hover > .w-nav-anchor.level_1 {
    color: #111 !important;
}

/* 2. BEST SELLERS: ALWAYS ORANGE (#F24908) IN ALL STATES (TARGETED BY EXACT HREF) */
/* The $ operator means "ends with", preventing it from matching /best-sellers/# */
.w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1[href$="best-sellers/"],
.w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1[href$="best-sellers/"]:hover,
.w-nav-list.level_1 > .w-nav-item:hover > .w-nav-anchor.level_1[href$="best-sellers/"],
.w-nav-list.level_1 > .w-nav-item.current-menu-item > .w-nav-anchor.level_1[href$="best-sellers/"] {
    color: #F24908 !important;
}

/* Mega Menu Deals Header = ALWAYS ORANGE (#F24908) */
.w-nav-list.level_2 .mega-title-deals,
/* This relies on the custom class 'deals' you must add to the mega menu item in WP Admin */
.w-nav-list.level_2 .widget_nav_menu:has(.deals) .widgettitle {
    color: #F24908 !important;
}

/* ==========================================================================
   IMPREZA MEGA MENU: FULL-WIDTH STRETCH & TIGHT LINK SPACING
   ========================================================================== */

/* 1. REMOVE INNER CONTAINER WIDTH LIMITS & PADDING (TRUE FULL WIDTH) */
.w-nav-list.level_2 {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.w-nav-list.level_2 .l-section,
.w-nav-list.level_2 .l-section-h,
.w-nav-list.level_2 .g-cols {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. FORCE EQUAL HEIGHT 5-COLUMN GRID & VERTICAL DIVIDERS */
.w-nav-list.level_2 .g-cols {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.w-nav-list.level_2 .g-cols > .wpb_column {
    display: flex !important; /* Forces inner column to stretch */
    flex: 1 1 20% !important;
    max-width: 20% !important;
}

/* Force the inner wrapper (which holds the border) to 100% height */
.w-nav-list.level_2 .g-cols > .wpb_column > .vc_column-inner {
    width: 100% !important;
    height: 100% !important; 
}

.w-nav-list.level_2 .g-cols > .wpb_column:not(:last-child) > .vc_column-inner {
    border-right: 2px solid #111 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.w-nav-list.level_2 .g-cols > .wpb_column:last-child > .vc_column-inner {
    padding-left: 0px !important;
}

/* 3. CUT VERTICAL LINK SPACING IN HALF */
.w-nav-list.level_2 .widget_nav_menu ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.w-nav-list.level_2 .widget_nav_menu ul li a,
.w-nav-list.level_2 .mega-link {
    padding: 2px 0 !important;
    margin: 0 !important;
    display: block;
}

/* ==========================================================================
   MEGA MENU: TYPOGRAPHY AND PILLS
   ========================================================================== */

/* FONT 1: TITLES (31px, 500 wt, -3% tracking, 124% line-height) */
.w-nav-list.level_2 .widgettitle,
.w-nav-list.level_2 .mega-title {
    font-family: 'halyard-display', sans-serif !important;
    font-size: 31px !important;
    line-height: 1.24 !important; /* 124% */
    letter-spacing: -0.03em !important; /* -3% */
    font-weight: 500 !important;
    color: #111 !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    display: block !important;
    border: none !important;
    
    /* Font Smoothing */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
}

/* FONT 2: EVERYTHING ELSE (17.5px, 500 wt, -2.5% tracking, 124% line-height) */
.w-nav-list.level_2 .widget_nav_menu ul li a,
.w-nav-list.level_2 .mega-link,
.w-nav-list.level_2 .mega-pill {
    font-family: 'halyard-text', sans-serif !important;
    font-size: 17.5px !important;
    line-height: 1.24 !important; /* 124% */
    letter-spacing: -0.025em !important; /* -2.5% */
    font-weight: 500 !important;
    color: #111 !important;
    padding: 3px 0 !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
    
    /* Font Smoothing */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
}

/* YELLOW PILLS */
.w-nav-list.level_2 .mega-pill {
    width: fit-content !important; 
    padding: 3px 10px !important;
    margin-bottom: 8px !important;
}

/* Explicit Hex Colors */
.w-nav-list.level_2 .pill-gwt { background-color: #FDAA01 !important; }
.w-nav-list.level_2 .pill-versa { background-color: #FDBB33 !important; }
.w-nav-list.level_2 .pill-bestsellers { background-color: #FDCC66 !important; }

/* ==========================================================================
   MEGA MENU: ALIGNMENT & INDENT REPAIRS
   ========================================================================== */

/* Zero out all left margins and paddings on widget containers, titles, and menu lists */
.w-nav-list.level_2 .vc_wp_custommenu,
.w-nav-list.level_2 .widget_nav_menu,
.w-nav-list.level_2 .widgettitle,
.w-nav-list.level_2 div[class*="-container"],
.w-nav-list.level_2 .mega-custom-menu-wrap,
.w-nav-list.level_2 .mega-custom-menu-wrap ul,
.w-nav-list.level_2 ul.menu,
.w-nav-list.level_2 ul.menu li,
.w-nav-list.level_2 ul.menu li a,
.w-nav-list.level_2 .mega-title,
.w-nav-list.level_2 .mega-title-deals {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.w-nav-list.level_2 .mega-pill {
    margin-left: 0 !important;
}

.w-nav-list.level_2 .mega-link {
    padding-left: 10px !important; 
}

/* promo image */
.menu-image {
    margin-top: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 15px !important;
    
    padding-right: 20px !important;
}

/* ==========================================================================
   UNIFIED MOBILE / MEGA MENU OVERRIDES & ACCORDIONS (Triggers at 1350px)
   ========================================================================== */
@media (max-width: 1350px) {
    
    body .w-nav.type_mobile .menu-item-has-children.opened > .w-nav-anchor .w-nav-arrow {
          margin-right: -8px !important;
    }
    
    .w-nav-list.level_2 ul.menu li {
        padding-left: 10px !important;
    }

    /* --- 1. EARLY MOBILE STACKING & ALIGNMENT --- */
    
    /* Force flush-left alignment for top-level menu items */
    body.header_hor .w-nav.type_mobile.m_layout_dropdown .w-nav-list.level_1 {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0 !important; 
        margin: 0 !important;
    }

    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }

    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1 {
        padding-left: 24px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    body header ul.w-nav-list.level_1 {
        margin-left: 0px !important;
    }

    /* Stack mega menu columns vertically */
    .w-nav-list.level_2 .g-cols {
        flex-direction: column !important;
        padding-top: 0 !important; 
        padding-bottom: 15px !important;
    }
    
    .w-nav-list.level_2 .g-cols > .wpb_column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-bottom: 0px !important;
    }
    
    /* Remove desktop right-borders */
    .w-nav-list.level_2 .g-cols > .wpb_column > .vc_column-inner,
    .w-nav-list.level_2 .g-cols > .wpb_column:not(:last-child) > .vc_column-inner {
        border-right: none !important;
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }

    /* --- 2. MEGA MENU CONTAINERS & OFFSETS --- */
    
    header#page-header nav ul.w-nav-list.level_2 {
        margin-left: 0px !important;
    }
    header#page-header nav ul.w-nav-list.level_2 .vc_column-inner {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    header#page-header nav ul.w-nav-list.level_2 .widget.widget_nav_menu {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding: 0px !important;
    }
    header#page-header nav ul.w-nav-list.level_2 .widget.widget_nav_menu .widgettitle {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 10px !important;
        padding-right: 30px !important;
    }

    /* Reset titles */
    .w-nav-list.level_2 .widgettitle, 
    .w-nav-list.level_2 .mega-title {
        margin-top: 0 !important;
        margin-bottom: 0px !important;
    }

    /* --- 3. SUB-MENU LINKS & PILLS --- */
    
    body header .w-nav-list.level_2 .mega-link,
    .w-nav-list.level_2 .mega-link {
        padding-left: 0px !important; 
    }
    
    /* Yellow Pills Full Width */
    body header .w-nav-list.level_2 .mega-pill,
    body .w-nav-list.level_2 .mega-pill,
    .w-nav-list.level_2 .mega-pill {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- 4. CUSTOM MOBILE ACCORDIONS & NEW ALIGNMENT FIXES --- */
    
    /* Force Left Alignment for all mobile mega menu headers, links, and pills */
    body header .w-nav-list.level_2 .widgettitle,
    body header .w-nav-list.level_2 .mega-title,
    body header .w-nav-list.level_2 .mega-link,
    body header .w-nav-list.level_2 ul.menu li a,
    body header .w-nav-list.level_2 .mega-pill {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    /* Override 'display: block' with Flexbox for BOTH widget titles and raw HTML mega-titles */
    body header .w-nav-list.level_2 .widgettitle.mobile-accordion-ready,
    body header .w-nav-list.level_2 .mega-title.mobile-accordion-ready,
    body header .w-nav-list.level_2 .mega-title-deals.mobile-accordion-ready {
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding-right: 15px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #e5e5e5 !important;
        margin: 0 !important; /* Overrides any lingering spacing issues */
        box-sizing: border-box !important;
    }

    /* Lock the arrow to the far right, vertically centered, and force correct font size */
    body header .w-nav-list.level_2 .mobile-accordion-ready .mobile-menu-arrow {
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        font-size: 12px !important; 
        transition: transform 0.25s ease !important;
        color: inherit !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Flip arrow when dropdown is expanded */
    .mobile-accordion-ready.active .mobile-menu-arrow {
        transform: rotate(180deg) !important;
    }
    
    /* ==========================================================================
   STYLE NATIVE "FILTERS" OPENER TO MATCH "FILTER BUTTON GRAY"
   ========================================================================== */
    button.w-filter-opener {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: var(--color-content-bg-alt, #f5f5f5) !important;
        color: var(--color-content-heading, #111) !important;
        border-radius: 5em !important;
        font-family: 'halyard-text', sans-serif !important;
        font-size: 21px !important;
        font-weight: 500 !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 4px 24px !important;
        transition: opacity 0.3s ease !important;
    }

    button.w-filter-opener:hover {
        opacity: 0.8 !important;
    }

    button.w-filter-opener .w-btn-label {
        color: inherit !important;
        font-size: inherit !important;
    }
    
    /* font adjustments  */
    .w-nav-list.level_2 .widget_nav_menu ul li a,
    .w-nav-list.level_2 .mega-link,
    .w-nav-list.level_2 .mega-pill {
        font-size: 15px !important;
    }
    
    .w-nav-list.level_2 .widgettitle,
    .w-nav-list.level_2 .mega-title {
        font-size: 18px !important;
    }
    
    .w-nav-anchor.level_1 {
        font-size: 28px !important;
    }
    
    header#page-header .l-subheader-cell.at_right .w-btn.header_search {
        padding: 0 15px 0 15px !important;
    }
    
    body header .w-nav-list.level_2 .mega-justarrived {
        padding-left: 10px !important;
        margin-top: 4px !important;
    }
    
    body header .w-nav-list.level_2 .mega-title.atv {
        margin-bottom: 15px !important;
        padding-top: 10px !important;
        
    }
    
    body header .w-nav-list.level_2 .mega-title.new,
    body header .w-nav-list.level_2 .mega-title.atv,
    body header .w-nav-list.level_2 .mega-title.skidsteer {
        padding-left: 10px !important;
    }
    
    /* Force WPBakery Raw HTML wrappers to full width for custom accordions */
    body header .w-nav-list.level_2 .wpb_raw_code,
    body header .w-nav-list.level_2 .wpb_raw_html_wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    filter.state_mobile.layout_hor .w-filter-item {
      margin-bottom: 0 !important;
    }
    
    /* Force Impreza to remove native pseudo-element borders/backgrounds */
    button.w-filter-opener::before,
    button.w-filter-opener::after {
        display: none !important;
        content: none !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    body header .w-nav-list.level_2 .wpb_wrapper > .mega-title.mobile-accordion-ready {
        padding-right: 30px !important;
    }
    
    .mainmenu-info {
            font-family: 'halyard-display', sans-serif !important;
            font-size: 18px !important;
            line-height: 1.24 !important;
            letter-spacing: -0.03em !important;
            font-weight: 500 !important;
            color: #111 !important;
            text-transform: none !important;
           
            display: block !important;
            border: none !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale!important;
            font-smooth: never!important;
    }
    
    /* Push native Level 1 mobile menu arrows to the far right */
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 .w-nav-arrow {
        display: inline-flex !important;
        margin-left: auto !important;
        padding-right: 15px !important; /* Matches line padding */
    }
    
    body header .w-nav-anchor:not(.level_1):not(.w-btn) {
        padding-left: 10px !important;
    }
    
    body header .w-nav-list.level_2 .widget_nav_menu ul li a {
      padding: 7px 0 !important;
    }
}

/* unique breakpoint adjustments */
/* ==========================================================================
   ACCOUNT LINK SPACING (1350px to 980px)
   ========================================================================== */
@media (min-width: 980px) and (max-width: 1350px) {
    .gwt-header-account {
        margin-right: 20px !important;
    }
}


/* desktop specific */
@media screen and (min-width: 1351px) {
    body header .mainmenu-info ul li a,
    body header .mainmenu-info ul li a span{
      font-family: 'halyard-text',sans-serif !important;
      font-size: 17.5px !important;
      line-height: 1.24 !important;
      letter-spacing: -0.025em !important;
      font-weight: 500 !important;
      color: #111 !important;
      padding: 3px 5px !important;
        padding-left: 0px;
      display: block !important;
      text-decoration: none !important;
      border: none !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
      font-smooth: never !important;
    }
    
    body filter.state_mobile.layout_hor .w-filter-item {
      margin-bottom: 0px !important;
    }
    
    .mainmenu-info ul.level_2 {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* 1. Remove left/right padding on the outer container */
html body header#page-header .l-subheader.at_bottom {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Apply variable-based padding to the inner container */
html body header#page-header .l-subheader.at_bottom > .l-subheader-h {
    padding-left: var(--padding-inline, 2.5rem) !important;
    padding-right: var(--padding-inline, 2.5rem) !important;
}

/* ==========================================================================
   UNDERLINE ACTIVE FILTER BUTTON TEXT
   ========================================================================== */
.w-filter-item-value input:checked ~ .w-filter-item-value-label,
.w-filter-item-value.selected .w-filter-item-value-label {
    text-decoration: underline !important;
    text-underline-offset: 1px !important; /* Adds subtle breathing room under the text */
}

.mega-dropdown-wrap > a {
    cursor: pointer !important;
}

/* manufacturer disabled items hide */
.w-filter-list .disabled {
    display: none !important;
}

/* Remove bottom margin on filter items inside the shop controls */
.gwt-shop-controls .w-filter.state_mobile.layout_hor .w-filter-item,
.gwt-shop-controls .w-filter .w-filter-item {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   SHOP PAGE CONTROLS: 100% WIDTH FILTERS & MOBILE SWAP
   ========================================================================== */

/* 1. Base Flexbox Layout for the Column (Aligns items vertically) */
.gwt-shop-controls .vc_column-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* GUARANTEES vertical centering on the same row */
    gap: 15px;
}

/* Remove default bottom margins from Impreza wrappers so they sit flush */
.gwt-shop-controls .w-hwrapper,
.gwt-shop-controls .w-vwrapper,
.gwt-shop-controls .w-filter,
.gwt-shop-controls .w-order {
    margin-bottom: 0 !important;
}

/* 2. DESKTOP 100% WIDTH OVERRIDE (> 979px) */
@media (min-width: 980px) {
    /* Turn the main row into a master flexbox */
    .gwt-shop-controls .g-cols.via_grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* "Delete" the 5/6 and 1/6 WPBakery column constraints visually */
    .gwt-shop-controls .wpb_column,
    .gwt-shop-controls .vc_column-inner {
        display: contents !important; 
    }
    
    /* 1. Put Popular Dropdown on the Top Left */
    .gwt-shop-controls .w-hwrapper {
        order: 1;
    }
    
    /* 2. Put Result Counter on the Top Right */
    .gwt-shop-controls .w-list-result-counter {
        order: 2;
        margin-top: 0 !important;
    }
    
    /* 3. Force the Filter Bar to drop below them and span 100% Edge-to-Edge */
    .gwt-shop-controls .w-filter {
        order: 3;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 15px !important; /* Space between buttons and filters */
    }
}

/* 3. TABLET/MOBILE ROW (481px to 979px) */
@media (min-width: 481px) and (max-width: 979px) {
    /* Hide the custom desktop button completely */
    .gwt-shop-controls .w-vwrapper:has(#shop-filter-link),
    #shop-filter-link {
        display: none !important;
    }

    /* Push the Popular dropdown and Native Filter button to opposite sides of the row */
    .gwt-shop-controls .vc_column-inner {
        justify-content: space-between;
    }
}

/* 4. MOBILE STACK (< 480px) */
@media (max-width: 480px) {
    /* Hide the custom desktop button */
    .gwt-shop-controls .w-vwrapper:has(#shop-filter-link),
    #shop-filter-link {
        display: none !important;
    }

    /* Stack the Popular dropdown and Filter button at 100% width */
    .gwt-shop-controls .vc_column-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .gwt-shop-controls .w-order,
    .gwt-shop-controls .w-filter,
    .gwt-shop-controls .w-hwrapper {
        width: 100% !important;
    }
    
    /* Center the result counter on its own row */
    .gwt-shop-controls .w-list-result-counter {
        text-align: center !important;
        margin-top: 15px !important;
    }
}

/* Force Popular dropdown and Filters button onto the exact same vertical center line */
@media (min-width: 481px) and (max-width: 979px) {
    .gwt-shop-controls .vc_column-inner {
        display: flex !important;
        align-items: center !important;
    }

    .gwt-shop-controls .w-hwrapper,
    .gwt-shop-controls form.w-filter,
    .gwt-shop-controls .w-order,
    .gwt-shop-controls .w-filter-opener {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }
}

@media (max-width: 480px) {
    /* Allow the filter form and opener button to expand full-width */
    .gwt-shop-controls form.w-filter,
    .gwt-shop-controls .w-filter-opener {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .gwt-shop-controls .w-hwrapper {
        --hwrapper-gap: 0 !important;
        gap: 0 !important;
    }
}

/* ==========================================================================
   MOBILE HEADER: SEARCH BAR WRAPPER WITH WHITE BACKGROUND
   ========================================================================== */
@media (max-width: 979px) {
    /* 1. Allow the main header row to wrap elements to a new line */
    header#page-header .l-subheader.at_bottom .l-subheader-h {
        flex-wrap: wrap !important;
        padding-bottom: 0 !important; /* Removed so the white background sits flush */
    }

/* 2. Strip the 'Right Cell' and the FIRST 'Horizontal Wrapper' constraints visually, 
          BUT DO NOT strip our new mobile-search-row! */
    header#page-header .l-subheader.at_bottom .l-subheader-cell.at_right,
    header#page-header .l-subheader.at_bottom .l-subheader-cell.at_right > .w-hwrapper:not(.mobile-search-row) {
        display: contents !important;
    }

/* 3. Force the new Wrapper to 100% width, add the white background, and drop to bottom */
    header#page-header .l-subheader.at_bottom .mobile-search-row {
        flex: 0 0 auto !important;
        
        /* Negative margins pull the container outward into the parent's padding space */
        margin-left: calc(-1 * var(--padding-inline, 2.5rem)) !important;
        margin-right: calc(-1 * var(--padding-inline, 2.5rem)) !important;
        
        /* Width compensates for the negative margins */
        width: calc(100% + (2 * var(--padding-inline, 2.5rem))) !important;
        max-width: none !important;
        
        order: 99 !important; 
        background-color: #ffffff !important;
        padding: 12px 0px 12px 10px !important;
        box-sizing: border-box !important;
    }
    
    /* 4. Ensure the search pill itself stretches to fill the new wrapper */
    header#page-header .l-subheader.at_bottom .mobile-search-row .header_search {
        width: 100% !important;
        margin: 0 !important;
    }
    

}

/* ==========================================================================
   MEGA MENU: OUTER EDGE PADDING (Desktop Only)
   ========================================================================== */
@media (min-width: 1351px) {
    /* 1. Target the FIRST column in any mega menu and push it right */
    .w-nav-list.level_2 .g-cols > .wpb_column:first-child > .vc_column-inner {
        padding-left: 50px !important;
    }

    /* 2. Target the LAST column in any mega menu and push it left */
    .w-nav-list.level_2 .g-cols > .wpb_column:last-child > .vc_column-inner {
        padding-right: 50px !important;
        padding-left: 20px !important;
    }
}

@media only screen and (max-width: 599px) and (min-width: 431px) {
  #site-logo img {
    max-width: 300px;
    object-fit: contain;
  }
}

/* ==========================================================================
   MOBILE MENU: BOTTOM CUSTOM SECTION & ARROWS (< 1350px)
   ========================================================================== */
@media (max-width: 1350px) {

    /* 1. Remove Impreza's default padding so the Separator spans 100% edge-to-edge */
    .w-nav.type_mobile .menu-item-type-post_type.menu-item-object-us_page_block > .w-nav-anchor {
        display: none !important; 
    }
    .w-nav.type_mobile .menu-item-type-post_type.menu-item-object-us_page_block {
        padding: 0 !important;
        border-bottom: none !important; 
        margin-top: 10px !important;
    }

    /* 2. Re-apply padding ONLY to the content below the separator using your Row class */
    .mega_info_row {
        padding: 20px 24px 30px !important;
    }

    /* 3. Style the Login/Account Buttons to match Mockup */
    .mobile-auth-btn {
        background-color: #000 !important;
        color: #feaa01 !important;
        font-style: italic !important;
        font-weight: 600 !important;
        border-radius: 4px !important; 
        padding: 6px 16px !important;
        margin-bottom: 15px !important;
        font-size: 15px !important;
        text-transform: none !important;
        display: inline-flex !important;
    }

    /* 4. Ensure CSS-based visibility toggling works for the mobile buttons */
    body.logged-in .mobile-auth-btn.gwt-login-link { display: none !important; }
    body:not(.logged-in) .mobile-auth-btn.gwt-account-link { display: none !important; }

    /* 5. Clean up the WP Custom Menu widget to look like plain text links */
    .mega_info_row .widget_nav_menu ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .mega_info_row .widget_nav_menu ul li {
        margin-bottom: 10px !important;
        padding: 0 !important;
    }
    .mega_info_row .widget_nav_menu ul li a {
        font-family: 'halyard-text', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #111 !important;
        text-decoration: none !important;
    }

    /* 6. Rotate Native Impreza Mobile Arrows to point Right (>) instead of Down (v) */
    body.header_hor .w-nav.type_mobile .w-nav-arrow {
        transform: rotate(-90deg) !important;
        transition: transform 0.25s ease !important;
    }
    /* Rotate back down when the sub-menu is opened */
    body.header_hor .w-nav.type_mobile .menu-item.opened > .w-nav-anchor > .w-nav-arrow {
        transform: rotate(0deg) !important;
    }

}

/* ==========================================================================
   MOBILE MENU: BOTTOM CUSTOM SECTION REFINEMENTS (< 1350px)
   ========================================================================== */
@media (max-width: 1350px) {

    /* Fix 1 & 8: Left Alignment and precise left-padding to perfectly match the "Skid Steer" text above it */
    .mega_info_row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-left: 24px !important; /* Matches your top-level mobile link indent */
        padding-top: 20px !important;
    }

    /* Fix 8: Tighten space specifically between the button and the text links */
    .mega_info_row .w-btn-wrapper {
        margin-bottom: 12px !important; 
        text-align: left !important;
        width: 100% !important;
    }

    /* Fix 4 & 7: Button Typography (Forces Italic and the Halyard font, preserving your pill shape) */
    body .mega_info_row a.w-btn {
        font-family: 'halyard-text', sans-serif !important;
        font-style: italic !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-transform: none !important;
    }

    /* Fix 1, 6 & 7: Bottom Links Left-Alignment, Tight Vertical Spacing, and Typography */
    .mega_info_row .widget_nav_menu {
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
    }
    
    .mega_info_row .widget_nav_menu ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix 6: Shrink the huge gaps between the text links */
    .mega_info_row .widget_nav_menu ul li {
        margin-bottom: 6px !important; 
        padding: 0 !important;
        display: block !important;
    }

    /* Fix 7: Apply the correct font family, size, and weight to the text links */
    .mega_info_row .widget_nav_menu ul li a {
        font-family: 'halyard-text', sans-serif !important;
        font-size: 16px !important; 
        font-weight: 500 !important;
        color: #111 !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
        display: inline-block !important;
    }
}

/* ==========================================================================
       MOBILE MENU: "INFO" BOTTOM BLOCK FIXES
       ========================================================================== */
    
    /* 1. Ensure the black separator line stretches 100% edge-to-edge */
    li.w-nav-item:has(.mega_info_row) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    li.w-nav-item:has(.mega_info_row) .w-separator {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* 2. Indent the button and text links to match the mockup's margin */
    .mega_info_row .w-btn-wrapper,
    .mega_info_row .vc_wp_custommenu {
        padding-left: 20px !important; 
        text-align: left !important; 
    }

    /* 3. Fix Button Typography & Shape */
    .mega_info_row a.w-btn {
        background-color: #000 !important;
        color: #feaa01 !important;
        font-family: 'halyard-text', sans-serif !important;
        font-style: italic !important;
        font-weight: 600 !important;
        border-radius: 4px !important; 
        padding: 6px 18px !important;
        font-size: 15px !important;
        min-height: 0 !important;
        display: inline-flex !important;
        margin-bottom: 15px !important;
    }

    /* 4. Fix Link Fonts (Matches Halyard text from mockup) */
    .mega_info_row .widget_nav_menu ul li a {
        font-family: 'halyard-text', sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #111 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
        display: inline-block !important;
    }

    /* 5. Fix Spacing (Tightens the vertical gaps between links) */
    .mega_info_row .widget_nav_menu ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    .mega_info_row .widget_nav_menu ul li {
        margin-bottom: 8px !important; 
        padding: 0 !important;
        display: block !important;
        text-align: left !important;
        border: none !important;
    }

/* ==========================================================================
   MOBILE MENU: BUTTON ALIGNMENT & TOP-LEVEL FONTS (< 1350px)
   ========================================================================== */
@media (max-width: 1350px) {

    /* 1. Force the Button Wrapper to strictly align left */
    .mega_info_row .w-btn-wrapper {
        display: flex !important;
        justify-content: flex-start !important; 
        width: 100% !important;
        padding-left: 20px !important; 
        margin-bottom: 15px !important;
    }
    
    /* Ensure the button itself doesn't auto-margin to the center */
    .mega_info_row .w-btn-wrapper a.w-btn {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* 2. Fix the Top-Level Menu Fonts ("ATV / UTV", "Skid Steer", etc.) */
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1,
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1 .w-nav-title {
        font-family: 'halyard-text', sans-serif !important;
        font-size: 21px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        color: #111 !important;
        text-transform: none !important;
    }

    /* Ensure the "Best Sellers" link stays orange as intended in your original CSS */
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1[href$="best-sellers/"] .w-nav-title,
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1[href$="best-sellers/"] {
        color: #F24908 !important;
    }
}

/* ==========================================================================
   MOBILE MENU: SUBMENU SPACING & BORDER REMOVAL (< 1350px)
   ========================================================================== */
@media (max-width: 1350px) {

    /* Fix 1 & 3: Add L/R padding for indent, and shrink top/bottom padding to tighten vertical space */
    body.header_hor .w-nav.type_mobile .w-nav-list.level_2 .w-nav-anchor.level_2 {
        padding: 5px 24px !important; /* 5px vertical space, 24px horizontal indent */
        margin: 0 !important;
    }

    /* Fix 2: Remove the light grey borders from all menu items */
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item,
    body.header_hor .w-nav.type_mobile .w-nav-list.level_2 > .w-nav-item,
    body.header_hor .w-nav.type_mobile .mobile-accordion-ready {
        border-bottom: none !important;
        border-top: none !important;
    }

}

html body main .w-nav .widget {
    padding: 0 !important;
}

.mega_info_row .w-btn-wrapper {
    padding-left: 0;
    margin-bottom: 0 !important;
}

/* Kill Impreza's default 20px widget padding */
.mega_info_row .widget.widget_nav_menu {
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 1350px) {
    body header li.w-nav-item:has(.mega_info_row) .w-separator {
      width: 100% !important;
      margin-bottom: 5px !important;
    }

    body header .mega_info_row .widget_nav_menu ul li {
      margin-bottom: 3px !important;
    }
    
    body header ul.level_1 .w-separator.size_small.with_line {
      height: 1rem !important;
    }
    
    body header li.w-nav-item:has(.mega_info_row) {
      border-bottom: 2px solid black !important;
      padding-bottom: 5px !important;
    }
    
    body header .mega_info_row .w-btn-wrapper {
          margin-top: 0px !important;
    }
    
    body header .mega_info_row .w-btn-wrapper a.w-btn {
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }
    
    body.header_hor .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor.level_1 {
        padding-left: 32px !important;
    }
    
    body.header_hor .w-nav.type_mobile .w-nav-list.level_2 .w-nav-anchor.level_2 {
        padding: 5px 32px !important;
    }
    
    body .gwt-shop-controls .vc_column-inner form.w-filter {
        background: none;
        margin-right: 5px !important;
    }
}

@media (max-width: 979px) {
    body.home header#page-header:not(.sticky) .l-subheader.at_bottom .mobile-search-row {
      background-color: transparent !important;
    }
}

/* Only apply the offset on mobile screens where the overlap occurs */
@media (max-width: 599px) {
    body:not(.home) .l-main {
        margin-top: 60px !important; 
    }
}

/* Reset the margin between 600px and 979px to remove the grey gap */
@media (min-width: 600px) and (max-width: 979px) {
    body:not(.home) .l-main {
        margin-top: 0 !important;
        padding-top: 60px;
    }
}

/* ==========================================================================
   TABLET SHOP TOOLBAR ALIGNMENT (980px - 1350px)
   ========================================================================== */
@media (min-width: 980px) and (max-width: 1350px) {
    
    /* 1. Break Impreza's grid and force 100% width stacking */
    .gwt-shop-controls .g-cols,
    .gwt-shop-controls .wpb_column {
        display: block !important;
        width: 100% !important;
    }

    /* 2. Place Sort Dropdown (left) and Filter Button (right) on the same row */
    .gwt-shop-controls .wpb_column:first-child > .vc_column-inner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 3. Prevent the button wrappers from stretching and forcing a line break */
    .gwt-shop-controls .w-hwrapper,
    .gwt-shop-controls .w-filter {
        width: auto !important;
        flex: 0 1 auto !important;
        margin-bottom: 0 !important;
    }

    /* 4. Align Result Count strictly to the left on a new line */
    .gwt-shop-controls .wpb_column:last-child {
        margin-top: 15px !important; /* Space above result count */
    }
    .gwt-shop-controls .wpb_column:last-child > .vc_column-inner,
    .gwt-shop-controls .w-list-result-counter {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }
    
}

/* Remove orange hover state on submenu items */
.no-touch .ush_menu_3 .w-nav-item:not(.level_1):hover > a,
.no-touch .ush_menu_3 .w-nav-item:not(.level_1) > a:focus {
    color: inherit !important;
}

body .w-filter.state_mobile .w-filter-list {
    z-index: 99999 !important;
}

.gwt-shop-controls .w-filter-item-value.us-btn-style_18:has(input:checked) {
    background: #feaa01 !important;
}

/* Hide all .values_as_btn elements starting from the 5th one */
.gwt-shop-controls .w-filter-list .values_as_btn:nth-child(n+5 of .values_as_btn) {
    display: none !important;
}

/* Permanently hide the 3-Point and Front-End Loader filters */
.w-filter-item[data-name="pa_3-point"],
.w-filter-item[data-name="pa_front-end-loader"] {
    display: none !important;
}

/* Remove the max-height limit on button-style filter containers to prevent squishing */
.gwt-shop-controls .w-filter-item.values_as_btn .w-filter-item-values {
    max-height: none !important;
}
@media (max-width: 1350px) {
    .gwt-shop-controls .w-filter-item.values_as_btn .w-filter-item-values {
        padding-bottom: 20px !important;
    }
}

/* Fix orange on orange hover state for alt row colors */
body main#page-content section.color_alternate a:hover {
    color: #121212 !important;
}

/* hide woo default cart dropdown on hover */
header#page-header .l-subheader-cell.at_right .w-cart-content {
    display: none !important;
}

/* temp wisepops icon */
header#page-header .l-subheader-cell.at_right .ush_html_7 {
    display: none !important;
}

header#page-header .cfw-side-cart-open-trigger {
    padding-left: 15px !important;
}