/*======================================================================
  METRO WELDING – GLOBAL THEME STYLESHEET
  ----------------------------------------------------------------------
  FILE ORGANIZATION (high level)
  ----------------------------------------------------------------------

  01. TOKENS & GLOBAL VARIABLES
      - CSS custom properties for brand colors, typography, spacing,
        header heights, etc.

  02. BASE / RESET
      - Global html/body fixes, overflow handling, helper classes.

  03. HEADER – STRUCTURE
      - Section 1: Thin top bar
      - Section 2: Dark band (logo, search, account, minicart)
      - Section 3: Blue navigation bar
      - Desktop / tablet layout helpers
      - Fixed header + scroll padding

  04. HEADER – COMPONENTS
      - Account trigger (Shopping Tools)
      - Minicart trigger
      - Customer Tools drawer
      - Search overlay + mobile search controls
      - Login modal

  05. HERO & FACTS STRIP
      - Parallax hero ("shop now" band)
      - Brand strip with logos
      - Facts strip overlay tiles

  06. METRO TILES / "POPULAR CATEGORIES"
      - Tabbed boxes band + parallax seam fixes
      - Featured tiles grid, hover effects, mobile 2×2 layout

  07. NAV / MEGA MENU
      - Blue nav centering + spacing
      - Search AJAX dropdown layout (products vs categories)
      - Mega menu helper card + hero art
      - Menu typography + "See all" tile

  08. FOOTER
      - Main footer band (desktop + mobile diagonal)
      - Slim social/copyright bar
      - Footer contact rows + link spacing

  09. HOME – PORTAL & CAPABILITIES
      - Customer portal headline/tagline/button on parallax
      - Capabilities frosted overlay band (desktop + mobile card)
      - Brands / testimonials / CTA band spacing

  10. RESPONSIVE TUNING
      - Breakpoint‑specific adjustments for:
          • Header / nav / search
          • Hero + brand strip
          • Tiles grid
          • Capabilities overlay
          • Footer diagonal

  11. PAGE SPECIFIC HOOKS (STUBS)
      - Use these for future page‑specific styles.
      - Keep selectors as narrow as possible (prefix with a body class
        or page‑specific wrapper) to avoid unintended side‑effects.

  CONVENTIONS
  ----------------------------------------------------------------------
  • Typography: Montserrat via Google Fonts (variable weight)
  • Units: Prefer rem/em for typography, px for structural alignments
  • Z‑index: Header 3000+, drawers/modals 120000+
  • Custom properties: prefix with --mw for Metro specific tokens,
    --evo for platform/core brand tokens.

  HOW TO ADD NEW STYLES
  ----------------------------------------------------------------------
  1) If it is GLOBAL (affects many pages):
       - Add tokens to Section 01.
       - Add structural/layout rules to the relevant section (Header,
         Footer, Tiles, etc.).
  2) If it is PAGE‑SPECIFIC:
       - Scroll to the PAGE‑SPECIFIC HOOKS block near the end.
       - Add styles under the most appropriate stub, or create a new
         clearly named stub.
  3) Avoid in‑page <style> tags whenever possible. Keep everything here
     so changes are traceable and testable.

  NOTE: Rule order matters. When in doubt, add NEW rules as close as
        possible to the existing related block and document them with
        a short comment banner.
======================================================================*/


/* ====================================================================
   Metro Welding - Main Theme Stylesheet

   Structure overview (no selectors changed):
   1) Tokens & base resets
   2) Header: top bar / main dark band / blue nav
   3) Mobile header & search overlay
   4) Hero + facts strip overlays
   5) Metro tiles & parallax brand strip
   6) Account, minicart, drawers & login modal
   7) Home-only hero, capabilities band, brands row, CTAs
   8) Footer layout & contact items
   9) Mega menu helpers & small utilities
   10) Responsive tweaks (tablets & mobile)

   ==================================================================== */

/* Load variable Montserrat so any weight works */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..800&display=swap');

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Brand / header */
  --evo-brand-primary:#0494da;
  --evo-brand-secondary:#383838;
  --evo-brand-accent:#0494da;
  --evo-header-background:#fff;
  --evo-header-top:#e4e4e4;

  /* Nav “chips” + sizing */
  --nav-default-fg:#e4e4e4;
  --nav-hover-fg:#fff;
  --nav-hover-bg:#0272ad;
  --nav-chip-radius:0px;
  --nav-chip-pad-y:8px;
  --nav-chip-pad-x:14px;
  --nav-item-h:37px;
  --nav-font-size:17px;
  --nav-weight:470;
  --nav-pad-x:16px;
  --nav-gap:25px;
  --nav-caret-gap:12px;

  /* Section 2 height/search */
  --h2-pad-y:0px;
  --search-h:42px;

  /* Account (Shopping Tools) */
  --account-icon-size:22px;
  --account-row-gap:5px;
  --account-line-h:1;
  --account-gap-right:clamp(16px,2.5vw,56px);
  --account-nudge-y:0px;

  /* Minicart trigger */
  --cart-icon-size:22px;
  --cart-gap-x:12px;
  --cart-title-size:12px;
  --cart-total-size:11px;
  --cart-title-weight:400;
  --cart-total-weight:300;
  --cart-row-gap:0px;
  --cart-line-height:1.15;
  --cart-tighten-y:-6px;
  --cart-gap-right:clamp(10px,1.2vw,24px);
  --cart-nudge-y:0px;
}

/* =========================================================
   BASE
   ========================================================= */
html,body{margin:0 !important;padding:0;}
body{overflow-x:hidden;}

/* kill the seam under the thin top bar */
.header-full > .headersection-1[role="row-section"],
.header-full > .headersection-1[role="row-section"] > .container,
.header-full > .headersection-1[role="row-section"] > .container-fluid,
.header-full > .headersection-1[role="row-section"] > .row,
.header-full > .headersection-1[role="row-section"] .row-wrapper{
  padding-bottom:0 !important;margin-bottom:0 !important;border-bottom:0 !important;box-shadow:none !important;
}

/* remove top header margin */
.header-full,
.header-full > .headersection-1[role="row-section"]{
  margin-top:0 !important;padding-top:0 !important;border-top:0 !important;
}

/* general */
.bg-secondary{background-color:var(--evo-brand-secondary);}

/* header logo sizing (let widget width define height) */
header .header-full .logo_container .widgetlogo a.logo img{max-height:initial !important;}

/* =========================================================
   SECTION 1 (TOP BAR)
   ========================================================= */
.header-full > .headersection-1,
.header-full > .headersection-1 a{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;
  font-size:11px;font-weight:550;letter-spacing:.2px;text-transform:uppercase;
}
.header-bar{
  background:var(--evo-header-top);
  display:flex !important;align-items:center;justify-content:center;
  padding:6px 300px;gap:6px;flex-wrap:nowrap;width:100vw;
  margin-left:calc(-50vw + 50%);box-sizing:border-box;
}
.header-bar::before,.header-bar::after{content:"";flex:1 1 0;}
.header-bar a{color:var(--evo-brand-secondary);text-decoration:none;margin:0 4px;white-space:nowrap;order:-1;}
.header-bar .center{order:0;display:flex;align-items:center;gap:10px;}
.header-bar .push-right,.header-bar .push-right ~ a{order:1;}
.header-bar .center img{height:22px;width:auto !important;display:block;object-fit:contain;}
@media (max-width:600px){
  .header-bar{gap:6px;}
  .header-bar a{font-size:14px;}
  .header-bar .center img{height:clamp(20px,6vw,28px);}
}

/* =========================================================
   SECTION 2 (MAIN DARK BAND)
   ========================================================= */
.header-full > .headersection-2[role="row-section"]{background:var(--evo-brand-secondary) !important;}
.header-full > .headersection-2 .mw-account,
.header-full > .headersection-2 .mw-account :is(a,span,svg,i){color:#fff !important;}

/* desktop search sizing */
@media (min-width:992px){
  .header-full > .headersection-2[role="row-section"],
  .header-full > .headersection-2[role="row-section"] > .container,
  .header-full > .headersection-2[role="row-section"] > .container-fluid,
  .header-full > .headersection-2[role="row-section"] > .row,
  .header-full > .headersection-2[role="row-section"] .row-wrapper{
    padding-top:var(--h2-pad-y) !important;padding-bottom:var(--h2-pad-y) !important;
  }
  .header-full > .headersection-2 .widgetsearch.search{
    margin-left:clamp(56px,5vw,96px) !important;margin-right:clamp(20px,3vw,48px) !important;
    flex:1 1 clamp(560px,46vw,860px) !important;min-width:0 !important;
  }
  .header-full > .headersection-2 .widgetsearch.search :is(input,.form-control){
    height:var(--search-h) !important;line-height:calc(var(--search-h) - 2px) !important;padding-top:0 !important;padding-bottom:0 !important;
  }
  .header-full > .headersection-2 .widgetsearch.search :is(.input-group-append .btn,.input-group-text,button){
    height:var(--search-h) !important;line-height:var(--search-h) !important;
  }
}

/* =========================================================
   SECTION 3 (BLUE NAV)
   ========================================================= */
.header-full .headersection-menu.mw-topnav
  :is(.cd-dropdown-wrapper > a,.cd-dropdown-trigger,> ul > li > a,> * > ul > li > a,.additional_links > ul > li > a){
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;
  font-weight:var(--nav-weight) !important;font-size:var(--nav-font-size) !important;letter-spacing:.2px !important;text-transform:uppercase !important;
  display:inline-flex !important;align-items:center !important;
  height:var(--nav-item-h) !important;line-height:var(--nav-item-h) !important;padding:0 var(--nav-pad-x) !important;border-radius:var(--nav-chip-radius) !important;
  color:var(--nav-default-fg) !important;text-decoration:none !important;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.header-full .headersection-menu.mw-topnav
  :is(.cd-dropdown-wrapper > a,.cd-dropdown-trigger,> ul > li > a,> * > ul > li > a,.additional_links > ul > li > a)
  :is(.caret,[class*="fa"],[class*="icon"],svg,i){font-family:inherit !important;font-variation-settings:normal !important;}
.header-full .headersection-menu.mw-topnav :is(b,strong){font-weight:inherit !important;}
.header-full .headersection-menu.mw-topnav
  :is(.cd-dropdown-wrapper > a,.cd-dropdown-trigger,> ul > li > a,> * > ul > li > a,.additional_links > ul > li > a):hover,
.header-full .headersection-menu.mw-topnav
  :is(> ul > li:hover > a,> * > ul > li:hover > a,> ul > li.active > a,> * > ul > li.active > a,> ul > li.current > a,> * > ul > li.current > a){
  background:var(--nav-hover-bg) !important;color:var(--nav-hover-fg) !important;box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
}
.header-full .headersection-menu.mw-topnav .cd-dropdown-wrapper{display:inline-flex !important;align-items:center !important;gap:var(--nav-caret-gap) !important;}
.header-full .headersection-menu.mw-topnav .cd-dropdown-wrapper > a::after,
.header-full .headersection-menu.mw-topnav a.cd-dropdown-trigger::after{
  margin-left:var(--nav-caret-gap) !important;color:currentColor !important;position:static !important;
}
.header-full .headersection-menu.mw-topnav,
.header-full .headersection-menu.mw-topnav > .container,
.header-full .headersection-menu.mw-topnav > .container-fluid,
.header-full .headersection-menu.mw-topnav .headermenu_container{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:var(--nav-gap) !important;flex-wrap:nowrap !important;
}
.header-full .headersection-menu.mw-topnav :is(.cd-dropdown-wrapper,.additional_links){
  display:inline-flex !important;align-items:center !important;flex:0 0 auto !important;width:auto !important;
}
.header-full .headersection-menu.mw-topnav .additional_links > ul{
  display:flex !important;align-items:center !important;gap:var(--nav-gap) !important;margin:0 !important;padding:0 !important;list-style:none !important;flex-wrap:nowrap !important;
}
.mw-topnav ul ul a,
.mw-topnav .dropdown-menu a,
.mw-topnav .mega-menu a{
  text-transform:none !important;height:auto !important;line-height:normal !important;background:transparent !important;box-shadow:none !important;
}

/* =========================================================
   MOBILE HEADER (≤ 991.98px)
   ========================================================= */
@media (max-width:991.98px){
  .header-mobile,
  .header-mobile .header-top,
  .header-mobile .header-top.bg-primary,
  header .header-top.bg-primary{background-color:#383838 !important;}
  .header-mobile .header-top{
    display:flex !important;align-items:center !important;justify-content:center !important;position:relative !important;min-height:68px;
  }
  :root{--logo-nudge-x:clamp(-60px,-3vw,-40px);}
  .header-mobile .header-logo{position:static !important;margin:0 auto !important;transform:translateX(var(--logo-nudge-x));z-index:10 !important;}
  .header-mobile .header-logo a{display:inline-block !important;}
  .header-mobile .header-logo img{height:75px;width:auto;display:block;}
  .header-mobile :is(.cd-dropdown-wrapper,.mobile-menu-toggle,.menu-toggle,.navbar-toggler,.hamburger){position:relative !important;z-index:120 !important;}
  .header-mobile .mw-mobile-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 8px;padding:0;color:#fff;z-index:50;text-decoration:none;}
  .header-mobile .mw-mobile-search svg{width:22px;height:22px;display:block;pointer-events:none;}
  .header-mobile :is(.widgetsearch.search,.header-search,.search-row,.search-bar){display:none !important;height:0 !important;padding:0 !important;margin:0 !important;overflow:hidden !important;}
}

/* keep the overlay search visible */
.searchtools :is(.widgetsearch.search,.header-search,.search-row,.search-bar){
  display:block !important;height:auto !important;padding:initial !important;margin:initial !important;overflow:visible !important;
}
.searchtools .close-panel{cursor:pointer;pointer-events:auto;z-index:2101;}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* =========================================================
   DESKTOP LAYOUT HELPERS (≥ 992px)
   ========================================================= */
@media (min-width:992px){
  .header-full > .headersection-2 .widgetsearch.search :is(input,.form-control){width:100%;}
  .header-full > .headersection-2 .mw-account{
    margin-left:clamp(19px,3vw,80px) !important;margin-right:12px !important;display:inline-flex;align-items:center;gap:.4rem;
  }
  .header-full > .headersection-2 :is([class*="minicart"],[class*="mini-cart"],[class*="cart"]){margin-left:7px !important;}
  .header-full > .headersection-2 .mw-account .dropdown-menu{
    display:none;opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .15s ease,transform .15s ease;background:#2f2f2f !important;color:#fff !important;border:1px solid rgba(255,255,255,.08) !important;
  }
  .header-full > .headersection-2 .mw-account.open .dropdown-menu,
  .header-full > .headersection-2 .mw-account.show .dropdown-menu,
  .header-full > .headersection-2 .mw-account:hover .dropdown-menu{display:block !important;opacity:1;visibility:visible;transform:none;}
  .header-full > .headersection-2 .mw-account .dropdown-menu a{color:#fff !important;text-decoration:none;}
  .header-full > .headersection-2 .mw-account .dropdown-menu a:hover{background:var(--evo-brand-primary) !important;color:#fff !important;}
  .header-full > .headersection-2 .row > [class*="col"]:has(.widgetsearch.search){flex:0 1 min(48vw,820px) !important;}
  .header-full > .headersection-2 .row > [class*="col"]:has(.mw-account){padding-left:clamp(24px,4vw,140px) !important;}
}

/* Payment Portal “pill” button */
.mw-pay-portal a,
.mw-pay-portal .btn,
.mw-pay-portal [role="link"]{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  padding:9px 16px !important;border-radius:9999px !important;background:#fff !important;color:#111 !important;text-decoration:none !important;white-space:nowrap !important;line-height:1 !important;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;font-weight:600 !important;letter-spacing:.02em !important;text-transform:uppercase !important;
  box-shadow:0 0 0 2px #fff,0 0 0 4px #0494da,0 2px 6px rgba(0,0,0,.10) !important;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease !important;
}
.mw-pay-portal a:hover,.mw-pay-portal .btn:hover{background:#f7f7f7 !important;transform:translateY(-1px) !important;box-shadow:0 0 0 1px rgba(0,0,0,.10),0 6px 14px rgba(0,0,0,.12) !important;}
.mw-pay-portal a:focus,.mw-pay-portal .btn:focus{outline:0 !important;box-shadow:0 0 0 2px #fff,0 0 0 4px #0494da,0 2px 6px rgba(0,0,0,.10) !important;}
@media (min-width:992px){.mw-pay-portal a{margin-left:clamp(5px,3vw,40px) !important;} }

/* === Tablet / narrow desktop 769–991px === */
@media (min-width:769px) and (max-width:991.98px){
  :root{--tablet-logo-min:360px;--tablet-search-max:520px;}
  .header-full > .headersection-2 .row{align-items:center;flex-wrap:nowrap;}
  .header-full > .headersection-2 .row > [class*="col"]:has(.logo_container){flex:0 0 var(--tablet-logo-min) !important;min-width:var(--tablet-logo-min) !important;max-width:var(--tablet-logo-min) !important;}
  .header-full > .headersection-2 .logo_container{min-width:var(--tablet-logo-min) !important;}
  .header-full > .headersection-2 .row > [class*="col"]:has(.widgetsearch.search){flex:1 1 auto !important;min-width:0 !important;}
  .header-full > .headersection-2 .widgetsearch.search{
    flex:0 1 var(--tablet-search-max) !important;max-width:var(--tablet-search-max) !important;min-width:0 !important;
    margin-left:clamp(16px,2.4vw,22px) !important;margin-right:12px !important;
  }
  .header-full > .headersection-2 .widgetsearch.search :is(.form-group,.input-group,input,.form-control){min-width:0 !important;width:100% !important;max-width:100% !important;}
  .header-full > .headersection-2 .mw-account{margin-left:16px !important;margin-right:8px !important;display:inline-flex;align-items:center;gap:.4rem;color:#fff !important;}
  .header-full > .headersection-2 :is([class*="minicart"],[class*="mini-cart"],[class*="cart"]){margin-left:8px !important;}
}

/* ===== Desktop spacing knobs between account/cart/payment ===== */
@media (min-width:992px){
  .header-full > .headersection-2 .mw-account{margin-right:var(--account-gap-right) !important;transform:translateY(var(--account-nudge-y));}
  .header-full > .headersection-2 .minicart_container{margin-right:var(--cart-gap-right) !important;margin-left:40px !important;display:inline-flex;align-items:center;transform:translateY(var(--cart-nudge-y));}
  .header-full .minicart_container:hover .cart-dropdown,
  .header-full .minicart_container:focus-within .cart-dropdown{display:block !important;}
}

/* =========================================================
   MINICART HOVER FIX — bridge the gap to the popup
   ========================================================= */
@media (min-width: 992px){

  /* 1. Make minicart_container the positioning context */
  .header-full .minicart_container{
    position: relative !important;
  }

  /* 2. Invisible hover bridge below the cart trigger so the cursor
        never falls into a dead zone between the icon and the popup.
        Extends down past the blue nav into the popup's territory. */
  .header-full .minicart_container::after{
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;          /* approximate popup width */
    height: 80px;          /* covers thin gap + blue nav row */
    background: transparent;
    pointer-events: none;  /* default off — turns on during hover */
    z-index: 1099;         /* below popup but above the page */
  }

  /* 3. Activate the bridge while hovering the cart container OR popup */
  .header-full .minicart_container:hover::after,
  .header-full .minicart_container:focus-within::after{
    pointer-events: auto;
  }

  /* 4. Keep popup open when hovering the bridge or popup itself */
  .header-full .minicart_container:hover .cart-dropdown,
  .header-full .minicart_container:focus-within .cart-dropdown,
  .header-full .minicart_container .cart-dropdown:hover{
    display: block !important;
  }

  /* 5. Position popup so it visually connects to the trigger
        (eliminates any actual visual gap) */
  .header-full .minicart_container .cart-dropdown{
    margin-top: 0 !important;  /* remove any gap if theme adds one */
  }
}

/* =========================================================
   ACCOUNT trigger (Shopping Tools)
   ========================================================= */
.mw-account .dropdown > a.account-btn,
.mw-account .dropdown > a.btn-outlined-invert{
  display:grid !important;grid-template-columns:auto 1fr !important;grid-template-rows:auto auto !important;align-items:center !important;column-gap:10px !important;
  row-gap:var(--account-row-gap) !important;justify-items:start !important;text-align:left !important;text-decoration:none !important;color:#fff !important;
}
.mw-account .dropdown > a.account-btn i,
.mw-account .dropdown > a.account-btn svg,
.mw-account .dropdown > a.btn-outlined-invert i,
.mw-account .dropdown > a.btn-outlined-invert svg{
  grid-column:1 !important;grid-row:1 / span 2 !important;color:#fff !important;fill:#fff !important;font-size:var(--account-icon-size) !important;line-height:1;margin:0;
}
.mw-account .dropdown > a.account-btn::before,
.mw-account .dropdown > a.btn-outlined-invert::before{
  grid-column:2 !important;grid-row:1 !important;content:"YOUR ACCOUNT";display:block;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:#fff;font-size:12px;line-height:var(--account-line-h);
  margin:0 !important;padding:0 !important;text-align:left !important;
}
.mw-account .dropdown > a.account-btn::after,
.mw-account .dropdown > a.btn-outlined-invert::after{
  grid-column:2 !important;grid-row:2 !important;content:"Login & Sign Up";display:block;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;font-weight:300;letter-spacing:.01em;color:#fff;font-size:11px;line-height:var(--account-line-h);
  margin:0 !important;padding:0 !important;text-align:left !important;
}
.mw-account .dropdown > a.account-btn .welcome-message,
.mw-account .dropdown > a.btn-outlined-invert .welcome-message{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;}
.mw-account .dropdown > a.account-btn .arrow-your-account,
.mw-account .dropdown > a.btn-outlined-invert .arrow-your-account{display:none !important;}

/* =========================================================
   MINICART trigger (icon-left, 2-line)
   ========================================================= */
.header-full .minicart_container .cart-btn > a.headermini{
  display:grid !important;grid-template-columns:var(--cart-icon-size) 1fr;grid-template-rows:min-content min-content !important;
  column-gap:var(--cart-gap-x);row-gap:var(--cart-row-gap);align-items:start !important;align-content:start;background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;height:auto !important;
  color:#fff !important;text-decoration:none !important;font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif !important;line-height:1 !important;text-align:left !important;
}
.header-full .minicart_container .cart-btn > a.headermini i,
.header-full .minicart_container .cart-btn > a.headermini svg{
  grid-row:1 / 3 !important;grid-column:1 / 2 !important;font-size:var(--cart-icon-size) !important;width:var(--cart-icon-size) !important;height:var(--cart-icon-size) !important;color:#fff !important;line-height:1 !important;
}
.header-full .minicart_container .cart-btn > a.headermini .minicart_count{
  grid-row:1 / 2 !important;grid-column:2 / 3 !important;display:block !important;justify-self:start !important;text-align:left !important;color:#fff !important;font-size:var(--cart-title-size) !important;font-weight:var(--cart-title-weight) !important;
  letter-spacing:.2px !important;text-transform:uppercase !important;line-height:var(--cart-line-height) !important;background:transparent !important;border-radius:0 !important;padding:0 !important;margin:0 !important;
}
.header-full .minicart_container .cart-btn > a.headermini .minicart_count::before{content:"Your Cart (";}
.header-full .minicart_container .cart-btn > a.headermini .minicart_count::after{content:")";}
.header-full .minicart_container .cart-btn > a.headermini .minicart_total{
  grid-row:2 / 3 !important;grid-column:2 / 3 !important;display:block !important;justify-self:start !important;text-align:left !important;color:#fff !important;font-size:var(--cart-total-size) !important;font-weight:var(--cart-total-weight) !important;
  line-height:var(--cart-line-height) !important;margin:0 !important;padding:0 !important;margin-top:var(--cart-tighten-y) !important;
}
.header-full .minicart_container .cart-btn > a.headermini .minicart_total :is(b,strong){font-weight:inherit !important;}
.header-full .minicart_container .cart-dropdown{display:none !important;}
.header-full .minicart_container.open .cart-dropdown,
.header-full .minicart_container .cart-btn.open + .cart-dropdown,
.header-full .minicart_container .cart-btn.show + .cart-dropdown,
.header-full .minicart_container [aria-expanded="true"] + .cart-dropdown{display:block !important;}
.header-full .minicart_container .cart-btn > a.headermini :is(.minicart_count,.minicart_total){display:block !important;line-height:1 !important;margin-top:0 !important;margin-bottom:0 !important;padding:0 !important;}
.header-full > .headersection-2{position:relative;z-index:1100;}
.header-full .headersection-menu.mw-topnav{position:relative;z-index:1000;}
.header-full > .headersection-2 .mw-account{position:relative;z-index:2000;}
.header-full > .headersection-2 .mw-account .dropdown-menu{
  position:absolute !important;z-index:2200 !important;top:100%;left:0;margin-top:6px;display:none;
}
.header-full > .headersection-2 .mw-account.open .dropdown-menu,
.header-full > .headersection-2 .mw-account.show .dropdown-menu,
.header-full > .headersection-2 .mw-account:hover .dropdown-menu{display:block !important;}

/* ---------- TOP BLUE ROW: center the links (row-level) ---------- */
.header-full .headersection-menu.mw-topnav > .container > .row{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:var(--nav-gap) !important;flex-wrap:nowrap !important;
}
.header-full .headersection-menu.mw-topnav > .container > .row > [class*="col"]{
  flex:0 0 auto !important;margin:0 !important;
}
.mw-topnav :is(.dropdown-menu,.mega-menu,.cd-dropdown-content){text-align:left !important;}
.mw-topnav :is(.dropdown-menu a,.mega-menu a,.cd-dropdown-content a){text-align:left !important;justify-content:flex-start !important;}

/* FIXED header: keep all three bars together */
header .header-full{position:fixed !important;top:0;left:0;right:0;z-index:3000;}
/* Reserve space for fixed header (desktop only) */
:root{--mw-header-h:160px;}
@media (min-width:992px){body{padding-top:var(--mw-header-h) !important;} }
@media (max-width:991.98px){
  header .header-full{position:relative !important;top:auto !important;}
  body{padding-top:0 !important;}
}

/* Nuke sticky/transform tricks on the search */
.header-full > .headersection-2 .widgetsearch.search,
.header-full > .headersection-2 .widgetsearch.search *{
  position:static !important;inset:auto !important;transform:none !important;transition:none !important;animation:none !important;will-change:auto !important;z-index:auto !important;
}
.header-full > .headersection-2 [class*="container"], .header-full > .headersection-2 [class*="row"]{transform:none !important;}
.header-full > .headersection-2 :is(.affix,.affixed,.sticky,.stuck,.is-sticky,.is-fixed,.fixed){position:static !important;transform:none !important;}

/* === DESKTOP search positioning knobs === */
@media (min-width:992px){
  :root{
    --search-nudge-y:-25px;
    --search-offset-x:24px;
    --search-icon-left:120px;
    --search-icon-size:18px;
    --search-icon-top:23px;
    --search-text-inset:52px;
  }
  header .header-full .widgetsearch.search{position:relative !important;top:var(--search-nudge-y) !important;margin-left:var(--search-offset-x) !important;}
  header .header-full .widgetsearch.search input.form-control,
  header .header-full .widgetsearch.search input[type="text"]{
    padding-left:calc(var(--search-icon-left) + var(--search-icon-size) + 12px) !important;
  }
  header .header-full .widgetsearch.search :is(.fa-search,.icon-search,i.fa,i[class*="icon-"],svg){
    position:absolute !important;left:var(--search-icon-left) !important;
    top:calc(50% - (var(--search-icon-size)/2) + var(--search-icon-top)) !important;width:var(--search-icon-size) !important;height:var(--search-icon-size) !important;line-height:var(--search-icon-size) !important;pointer-events:none !important;
  }
  .header-full > .headersection-2 .row > [class*="col"]:has(.widgetsearch.search){position:relative !important;top:var(--search-nudge-y) !important;}
  .header-full > .headersection-2 :is(.search-icon,.fa-search,.icon-search){position:relative !important;top:var(--search-icon-top) !important;}
  header .header-full .widgetsearch.search input.form-control,
  header .header-full .widgetsearch.search input[type="text"]{padding-left:var(--search-text-inset) !important;text-indent:0 !important;}
}

/* ---- Modal above the header / drawers ---- */
.modal,.modal.fade.in,.modal.show{position:fixed !important;z-index:120000 !important;}
.modal-backdrop,.modal-backdrop.fade.in,.modal-backdrop.show{z-index:119990 !important;}

/* 1) Use a live spacer for anchor scroll */
html{scroll-padding-top:var(--mw-header-h,160px);}
body::before{content:"";display:block;height:var(--mw-header-h,50px);}
main,.zonecontent,.page-content,.content-wrapper{margin-top:0 !important;}

/* Make the hero container a positioning context */
.hero-new{position:relative;overflow:visible !important;}
.hero-new .hero-boxes,.hero-new .owl-stage-outer,.hero-new .owl-stage{overflow:visible !important;}

/* HEIGHT KNOBS */
:root{
  --hero-h-desktop:580px;
  --hero-h-tablet:460px;
  --hero-h-mobile:320px;
  --tile-w-desktop:200px;
  --tile-pad-y:18px;
  --tile-pad-x:10px;
  --tile-radius:3px;
  --tile-minh:125px;
}
@media (min-width:992px){
  .hero-new .owl-stage-outer{height:var(--hero-h-desktop) !important;overflow:hidden;}
  .hero-new .hero-box{position:relative;height:100% !important;}
  .hero-new .hero-box > img.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
}
@media (min-width:768px) and (max-width:991.98px){
  .hero-new .owl-stage-outer{height:var(--hero-h-tablet) !important;}
  .hero-new .hero-box{height:100% !important;}
  .hero-new .hero-box > img.background{height:100%;object-fit:cover;}
}
@media (max-width:767.98px){
  .hero-new .owl-stage-outer{height:var(--hero-h-mobile) !important;}
  .hero-new .hero-box{height:100% !important;}
  .hero-new .hero-box > img.background{height:100%;object-fit:cover;}
}
@media (max-width:991.98px){
  html{scroll-padding-top:0 !important;}
  body::before{content:none !important;display:none !important;height:0 !important;}
}

/* --- Account: kill hover dropdown, click-only --- */
.header-full > .headersection-2 .mw-account .dropdown-menu{display:none !important;opacity:0 !important;visibility:hidden !important;}
.header-full > .headersection-2 .mw-account > .dropdown > a{cursor:pointer !important;}

/* ---------- Login modal layout ---------- */
:root{--login-left-bg:url('https://us.evocdn.io/dealer/1598/content/media/Login Prompt/Images/cylinders-darkfade2.jpg');--mw-login-accent:#0494da;}
.mw-login{display:grid;grid-template-columns:minmax(320px,1.1fr) 1fr;min-height:520px;border-radius:10px;overflow:hidden;}
#loginModal .modal-dialog{max-width:980px;width:94vw;margin:1.5rem auto;}
.mw-login-left{position:relative;background:var(--login-left-bg) center/cover no-repeat;color:#fff;padding:28px 28px 32px;display:flex;flex-direction:column;justify-content:center;gap:18px;}
.mw-login-left .mw-brand{margin:18px 18px 10px;}
.mw-login-left .mw-brand img{height:100px;width:auto;display:block;}
.mw-login-left .mw-left-title{margin:16px 18px 12px;font-size:22px;font-weight:700;}
.mw-login-left .mw-left-points{margin:0 18px 18px;padding-left:18px;line-height:1.35;}
.mw-login-left .mw-left-cta{margin:12px 18px 22px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;padding:10px 14px;border-radius:999px;}
.mw-login-left .mw-left-cta:hover{background:rgba(255,255,255,.18);}
.mw-login-right{padding:28px 32px;background:#fff;}
@media (max-width:767.98px){.mw-login{display:block;min-height:unset;}.mw-login-left{display:none;}.mw-login-right{padding:22px 18px;} }
.searchtools,.zonebottom,.page-content,header,main{overflow:visible !important;}
.mw-login .mw-login-right{padding:38px 32px 28px;}
.mw-login .mw-right-title{font-size:22px;font-weight:700;letter-spacing:.01em;margin:0 0 16px;color:#0f2a38;}
.mw-login .mw-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.35);cursor:pointer;line-height:1;font-size:22px;}
.mw-login .mw-close:hover{background:rgba(0,0,0,.6);}
.mw-login .mw-close:focus{outline:2px solid #0494da;outline-offset:2px;}
:root{--mw-right-title-pad-left:24px;}
.mw-login .mw-right-title{margin:0 0 14px;padding-left:var(--mw-right-title-pad-left);font-size:22px;font-weight:700;line-height:1.25;}
.mw-login .mw-close{position:absolute;top:10px;right:12px;background:transparent !important;border:0 !important;box-shadow:none !important;width:auto;height:auto;padding:0;line-height:1;font-size:26px;color:#222;border-radius:0;cursor:pointer;}
.mw-login .mw-close:hover{color:#000;transform:none;}
.mw-login .mw-close:focus{outline:2px solid #0494da;outline-offset:2px;}

/* =========================
   FACTS STRIP — ULTRA-SLIM
   ========================= */
:root{
  --facts-row-h:30px;--facts-pad-top:4px;--facts-pad-bottom:8px;
  --facts-gap-x:12px;--facts-item-pad-x:12px;
  --facts-top-size:14px;--facts-sub-size:11px;
  --facts-nudge:5px;--facts-strong-nudge:0px;--facts-sub-nudge:-1px;
}
.contentblock_container,.contentblock_container > .text-cta{margin:0 !important;padding:0 !important;line-height:1 !important;}
.bg-secondary[role="row-section"] .contentblock_container{padding-top:0 !important;padding-bottom:0 !important;}
.mw-facts{margin:0 !important;padding:0 !important;}
.mw-facts__list{
  display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;gap:var(--facts-gap-x) !important;
  padding:var(--facts-pad-top) 6px var(--facts-pad-bottom) !important;margin:0 !important;min-height:var(--facts-row-h) !important;transform:translateY(var(--facts-nudge)) !important;
  list-style:none !important;color:#fff;line-height:1 !important;font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.mw-fact{display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;flex:0 0 auto !important;height:var(--facts-row-h) !important;padding:0 var(--facts-item-pad-x) !important;border-right:1px solid rgba(255,255,255,.28);line-height:1 !important;}
.mw-fact:last-child{border-right:0 !important;}
.mw-fact > strong{display:block;margin:0 !important;font-weight:800;font-size:var(--facts-top-size);line-height:1.2 !important;transform:translateY(var(--facts-strong-nudge)) !important;}
.mw-fact > .sub{display:block;margin:0 !important;font-weight:600;font-size:var(--facts-sub-size);line-height:1.15 !important;transform:translateY(var(--facts-sub-nudge)) !important;}
@media (max-width:600px){.mw-facts__list{gap:10px !important;} }

/* Let hero show positioned children */
.hero-new{position:relative;overflow:visible !important;}
.hero-new .hero-boxes,.hero-new .owl-stage-outer,.hero-new .owl-stage{overflow:visible !important;}

/* Overlay: centered bar with clean left/right fades */
:root{--facts-alpha:.68;--facts-fade-w:130px;--facts-bar-w:min(1160px,92vw);}
.mw-facts--overlay{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:var(--facts-bar-w);pointer-events:none;z-index:6;}
.mw-facts--overlay .mw-facts__list{position:relative;background:rgba(4,148,218,var(--facts-alpha));border-radius:0;overflow:visible;pointer-events:auto;}
.mw-facts--overlay .mw-facts__list::before,
.mw-facts--overlay .mw-facts__list::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--facts-fade-w);pointer-events:none;
}
.mw-facts--overlay .mw-facts__list::before{left:calc(-1 * var(--facts-fade-w));background:linear-gradient(to right,rgba(4,148,218,0) 0%,rgba(4,148,218,var(--facts-alpha)) 100%);}
.mw-facts--overlay .mw-facts__list::after{right:calc(-1 * var(--facts-fade-w));background:linear-gradient(to left,rgba(4,148,218,0) 0%,rgba(4,148,218,var(--facts-alpha)) 100%);}

/* =========================================================
   METRO — Tiles + Parallax
   ========================================================= */
:root{
  --tiles-bg:#e4e4e4;--tiles-top-nudge:-5px;--tiles-pad-top:22px;--tiles-pad-bot:22px;--seam-overlap:60px;
  --para-min-h:380px;--para-pad-v:40px;
}
.tabbed-boxes .nav-wrapper,.tabbed-boxes .nav-wrapper .nav-box{display:none !important;height:0 !important;padding:0 !important;margin:0 !important;}
.tabbed-boxes{
  position:relative;margin-top:var(--tiles-top-nudge) !important;
  padding:var(--tiles-pad-top) 0 calc(var(--tiles-pad-bot) + var(--seam-overlap)) !important;margin-bottom:calc(-1 * var(--seam-overlap)) !important;background:var(--tiles-bg);
}
.tabbed-boxes::before{content:"";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);top:0;bottom:0;width:100vw;background:var(--tiles-bg);pointer-events:none;}
.tabbed-boxes .boxes-wrapper{margin:0 !important;padding:0 !important;}
.contentblock_container{margin:0 !important;padding:0 !important;}
.tabbed-boxes + section,.tabbed-boxes + div,.tabbed-boxes + [role="row-section"]{
  margin-top:0 !important;padding-top:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;
}
.tabbed-boxes + section::before,.tabbed-boxes + section::after,
.tabbed-boxes + div::before,.tabbed-boxes + div::after,
.tabbed-boxes + [role="row-section"]::before,.tabbed-boxes + [role="row-section"]::after{content:none !important;display:none !important;}

.shop-now-section.bg-parallax{
  position:relative;min-height:var(--para-min-h);padding:var(--para-pad-v) 0;background-position:center center;background-size:cover;background-attachment:fixed;overflow:hidden;
}
.shop-now-section.bg-parallax > a,.shop-now-section.bg-parallax .btn{display:none !important;}
.shop-now-section.bg-parallax > .container,.shop-now-section.bg-parallax > .container-fluid{min-height:inherit;margin:0 !important;padding:0 !important;}

/* kill the white spacer row above parallax */
.desktop > .page-content.container.onecolumn > .row > [class*="col-"]::after{content:none !important;display:none !important;height:0 !important;background:transparent !important;border:0 !important;}
.desktop > .page-content.container.onecolumn > .row,
.desktop > .page-content.container.onecolumn > .row > [class*="col-"]{margin:0 !important;padding:0 !important;background:transparent !important;}
.desktop > .page-content.container.onecolumn > .row::before,
.desktop > .page-content.container.onecolumn > .row::after{content:none !important;display:none !important;height:0 !important;background:transparent !important;border:0 !important;}

/* knobs: exact window height + content offset inside it */
:root{
  --sectionH:600px; --offset:1px;
  --barw:66vw; --op:.30; --opw:30%; --fade:.3; --fadeStart:75%; --blur:1.2px; --logoInset:18vw;
}
.shop-now-section{
  position:relative;background-size:cover;background-position:center;
  height:var(--sectionH) !important;min-height:0 !important;display:grid;grid-template-rows:var(--offset) 1fr;padding:0;color:#111;overflow:visible;
}
.shop-now-section .container{grid-row:2;align-self:end;z-index:1;width:100%;margin:0;padding:0;box-sizing:border-box;}
.text-wrapper{max-width:1200px;margin:0;padding:0 max(16px,3vw);text-align:left}
.shop-now-section .text-wrapper .headline,
.shop-now-section .text-wrapper h1,
.shop-now-section .text-wrapper h2{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.1;font-size:clamp(20px,4vw,30px);margin:0 0 16px;color:#e4e4e4!important;text-shadow:0 2px 10px rgba(0,0,0,.35)
}
.brand-strip{position:relative;margin-top:10px;left:50%;transform:translateX(-50vw);width:min(var(--barw),1200px);display:block;overflow:visible!important}
.brand-strip::before{
  content:"";position:absolute;inset:-10px 0;border-radius:0;
  background:linear-gradient(90deg,rgba(255,255,255,var(--op)) 0%,rgba(255,255,255,var(--op)) var(--opw),rgba(255,255,255,var(--fade)) var(--fadeStart),rgba(255,255,255,0) 100%);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.28));-webkit-backdrop-filter:blur(var(--blur)) saturate(120%);backdrop-filter:blur(var(--blur)) saturate(120%);pointer-events:none
}
.shop-now-section .brand-logos{
  position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,2.2vw,30px);padding:16px clamp(22px,3vw,32px);margin:0!important;box-sizing:border-box;overflow:visible
}
.shop-now-section .brand-logos::before{content:"";flex:0 0 clamp(160px,var(--logoInset),420px);height:1px}
.shop-now-section .brand-logo{height:clamp(30px,4.4vw,54px);width:auto;max-width:100%;display:block;image-rendering:-webkit-optimize-contrast;filter:drop-shadow(0 1px 0 rgba(0,0,0,.05))}
.btn.btn-white{margin-top:18px;font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:600}

/* responsive logo-row tweaks */
@media (max-width:1400px){:root{--logoInset:16vw;} }
@media (max-width:1100px){:root{--logoInset:10vw;} }
@media (max-width:900px){:root{--logoInset:6vw;} }
@media (max-width:700px){.shop-now-section .brand-logos::before{flex-basis:0 !important;} }
@media (max-width:1100px){.shop-now-section .brand-logos{gap:clamp(10px,1.6vw,20px);} .shop-now-section .brand-logo{height:clamp(28px,4vw,52px);} .brand-strip{width:min(82vw,1100px);} }
@media (max-width:800px){.shop-now-section .brand-logos{gap:12px;} .shop-now-section .brand-logo{height:32px;} .brand-strip{width:min(92vw,1100px);} }

/* Parallax: blue bar across the bottom edge */
.shop-now-section.bg-parallax{
  position: relative; /* already set, but safe */
}

.shop-now-section.bg-parallax::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%); /* lets us use full-bleed width */
  bottom:0;
  width:100vw;                 /* spans the viewport */
  height:4px;                  /* thickness of the line (tweak) */
  background:var(--evo-brand-primary);
  z-index:5;                   /* above the image, below overlay chips (z:6) */
  pointer-events:none;
}

/* ========== PATCH: center blue-nav links + remove gap under nav ========== */

/* 1) NAV: hard-center the link group regardless of helpers */
.header-full .headersection-menu.mw-topnav > .container,
.header-full .headersection-menu.mw-topnav > .container > .row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap: var(--nav-gap) !important;
}

/* keep children from stretching / killing ml-auto/mr-auto tricks */
.header-full .headersection-menu.mw-topnav > .container > .row > *{
  flex:0 0 auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* shrink the actual link group to its content and center it */
.header-full .headersection-menu.mw-topnav .headermenu_container{
  display:block !important;
  width:max-content !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* keep “Shop All” + Additional links inline, no self-centering conflicts */
.header-full .headersection-menu.mw-topnav
  .headermenu_container > :is(.cd-dropdown-wrapper, .additional_links){
  display:inline-flex !important;
  gap: var(--nav-gap) !important;
  vertical-align:middle !important;
}

/* neutralize any justify-* utilities that try to spread the row */
.header-full .headersection-menu.mw-topnav
  :is(.justify-content-between,.justify-content-start,.justify-content-end){
  justify-content:center !important;
}
.header-full .headersection-menu.mw-topnav :is(.ml-auto,.mr-auto){
  margin:0 !important;
}

/* 2) GAP KILLER: remove stray bottom padding/margins on the nav wrapper */
.header-full .headersection-menu.mw-topnav,
.header-full .headersection-menu.mw-topnav > .container,
.header-full .headersection-menu.mw-topnav > .container > .row,
.header-full .headersection-menu.mw-topnav .row-wrapper{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* also zero-out the first content block after the header if the theme adds spacing */
header .header-full + *{ margin-top:0 !important; }
header .header-full + *[role="row-section"],
header .header-full + .page-content,
header .header-full + .content-wrapper,
header .header-full + .zonecontent{
  padding-top:0 !important;
  border-top:0 !important;
}

/* If you still see a thin white strip, your spacer may be a hair tall.
   Nudge the live spacer down a touch by reducing the header height by ~8px. */
:root{ --mw-header-h: 210px; } /* (was 160px in your working set) */
/* ========== end patch ========== */

/* GAP FIX — remove legacy spacer, rely only on body padding-top */
body::before{
  content:none !important;
  display:none !important;
  height:0 !important;
}

/* ==== MINICART: hard reset + tight two-line layout ==== */
.header-full .minicart_container .cart-btn > a.headermini{
  display: grid !important;
  grid-template-columns: var(--cart-icon-size) 1fr !important;
  grid-template-rows: min-content min-content !important;
  column-gap: var(--cart-gap-x) !important;
  row-gap: 0 !important;
  align-items: start !important;
  justify-items: start !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* icon spans both rows */
.header-full .minicart_container .cart-btn > a.headermini i,
.header-full .minicart_container .cart-btn > a.headermini svg{
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  width: var(--cart-icon-size) !important;
  height: var(--cart-icon-size) !important;
  margin: 0 !important;
}

/* GLOBAL reset on cart text nodes (theme adds floats/absolute/etc.) */
.header-full .minicart_container .cart-btn > a.headermini *{
  float: none !important;
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important;
  text-indent: 0 !important;
  max-width: none !important;
}

/* line 1 */
.header-full .minicart_container .cart-btn > a.headermini .minicart_count{
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  white-space: nowrap !important;
  font-size: var(--cart-title-size) !important;
  font-weight: var(--cart-title-weight) !important;
  line-height: var(--cart-line-height) !important;
  color: #fff !important;
}

/* line 2 */
.header-full .minicart_container .cart-btn > a.headermini .minicart_total{
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  white-space: nowrap !important;
  font-size: var(--cart-total-size) !important;
  font-weight: var(--cart-total-weight) !important;
  line-height: var(--cart-line-height) !important;
  margin-top: var(--cart-tighten-y) !important;
  color: #fff !important;
}

/* keep “Total:” label even if theme modifies text */
.header-full .minicart_container .cart-btn > a.headermini .minicart_total::before{
  content: "Total: " !important;
}

/* knobs (leave if you like current spacing) */
:root{
  --cart-line-height: 1.05;  /* 1.00–1.12 */
  --cart-tighten-y: -6px;    /* -2px to -7px */
}

/* Customer Tools drawer should sit above the fixed header */
.customertools.open{
  position: fixed !important;            /* escape any parent stacking contexts */
  top: 0; right: 0; bottom: 0; left: auto !important;
  width: max-content !important;
  z-index: 120000 !important;            /* higher than header & blue nav */
  pointer-events: none;                  /* wrapper itself doesn't eat clicks */
}

.customertools.open > .customertools-container{
  position: relative !important;         /* keep theme’s sizing */
  z-index: 120010 !important;            /* the panel itself sits on top */
  pointer-events: auto;                  /* clickable again */
  filter: drop-shadow(-10px 0 24px rgba(0,0,0,.25));
}

/* Fallbacks in case the template uses a different class name */
.customer-tools.open,
.customer-tools.open > .customer-tools-container{
  z-index: 120000 !important;
}

/* SEARCH OVERLAY — predictable open/close without stealing clicks */

/* Closed: invisible, inert, off the stacking context */
.searchtools{
  position: fixed !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: opacity .18s ease;  /* smooth fade only */
}

/* Open: visible and above everything */
.searchtools.open,
.searchtools.show,
.searchtools.in,
.searchtools[aria-hidden="false"],
.searchtools.mw--closing {              /* keep high z-index during fade-out */
  z-index: 120000 !important;
}

/* Visible state */
.searchtools.open,
.searchtools.show,
.searchtools.in,
.searchtools[aria-hidden="false"]{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep the close button clickable and easy to hit */
.searchtools .close-panel{
  position: absolute !important;
  top: 10px; right: 12px;
  width: 36px; height: 36px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 120010 !important;
}
.searchtools .close-panel *{ pointer-events: none !important; }

/* Optional: stop background page scroll while open */
body.mw-search-open{ overflow: hidden !important; }

.brand-logos img:first-child{
  height: clamp(40px, 6vw, 72px);
}
@media (max-width: 700px){
  .brand-logos img:first-child{ height: clamp(34px, 5.5vw, 56px); }
}

/* ==== Brand strip height knobs ==== */
:root{
  /* Vertical padding inside the white strip (top & bottom) */
  --brand-pad-y: 5px;          /* was 16px — smaller = shorter bar */

  /* Horizontal padding inside the strip */
  --brand-pad-x: clamp(22px, 3vw, 32px);

  /* Soft white strip “glow” bleed; reduces the extra height from the overlay */
  --brand-strip-bleed: 6px;     /* was 10px — smaller = shorter bar */
}

/* Apply the knobs */
.shop-now-section .brand-logos{
  padding: var(--brand-pad-y) var(--brand-pad-x);
}

.brand-strip::before{
  inset: calc(-1 * var(--brand-strip-bleed)) 0;
}

/* Keep the logo row on one line */
.shop-now-section .brand-logos{
  flex-wrap: nowrap !important;
}

/* Smoothly reduce the spacer + tighten gaps before it would wrap */
@media (max-width: 1600px){
  :root{ --logoInset: 14vw; }  /* was 18vw */
  .shop-now-section .brand-logos{ gap: clamp(12px, 1.6vw, 24px); }
  .shop-now-section .brand-logo{ height: clamp(30px, 4.6vw, 58px); }
}

@media (max-width: 1450px){
  :root{ --logoInset: 12vw; }
  .shop-now-section .brand-logos{ gap: clamp(10px, 1.4vw, 22px); }
  .shop-now-section .brand-logo{ height: clamp(28px, 4.2vw, 56px); }
}

@media (max-width: 1250px){
  :root{ --logoInset: 10vw; }
}

/* you already have:
   @media (max-width:1100px){ --logoInset:10vw; ...tighten gaps/heights... }
   @media (max-width:900px){  --logoInset: 6vw; }
   @media (max-width:700px){  .brand-logos::before{ flex-basis:0 } }
*/

/* ===== METRO — Featured tiles (tall 2:3), centered labels, curved sheen ===== */

/* band + knobs */
.tabbed-boxes.mw-featured-tiles{
  --band-bg:#eceeef;
  --tile-gap:clamp(14px,1.4vw,22px);
  --tile-ratio:2 / 3;                 /* tall portrait (576×864 style) */
  padding:10px 0 24px !important;
  position:relative;
  background:transparent !important;
}

/* full-bleed base color under the band */
.tabbed-boxes.mw-featured-tiles::before{
  content:"";
  position:absolute; inset:0;
  left:50%; transform:translateX(-50%);
  width:100vw; background:var(--band-bg);
  z-index:0; pointer-events:none;
}

/* curved sheen + faint bottom falloff (sits above base, below tiles) */
.tabbed-boxes.mw-featured-tiles::after{
  content:"";
  position:absolute; inset:0;
  left:50%; transform:translateX(-50%);
  width:100vw; z-index:1; pointer-events:none;
  background:
    /* main swoop */
    radial-gradient(140% 116px at 50% -66px,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.44) 38%,
      rgba(255,255,255,0) 70%),
    /* hairline echo to accent curvature */
    radial-gradient(170% 78px at 50% -24px,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0) 85%),
    /* subtle bottom darkening */
    linear-gradient(to bottom,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.09) 94%,
      rgba(0,0,0,.16) 100%);
}

/* grid (4/3/2/1 columns) */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper{
  position:relative; z-index:2; /* above sheen */
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  grid-auto-flow:row dense;
  gap:var(--tile-gap) !important;
  width:100% !important; margin:0 !important; padding:0 !important;
  height:auto !important; overflow:visible !important;
}
@media (max-width:1200px){
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width:900px){
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:560px){
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper{
    grid-template-columns:repeat(1, minmax(0,1fr)) !important;
  }
}

/* flatten Owl wrappers & kill any inline heights/backgrounds */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper :is(.owl-carousel,.owl-stage-outer,.owl-stage){
  display:contents !important;
  background:transparent !important;
  width:auto !important; margin:0 !important; padding:0 !important;
  transform:none !important; overflow:visible !important;
}
.tabbed-boxes.mw-featured-tiles .boxes-wrapper [style*="height"]{
  height:auto !important;
}
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item{
  float:none !important; width:auto !important; margin:0 !important;
}
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > div{
  display:contents !important; /* card becomes the grid item */
}

/* ===== THE CARD — flex-center content, image pinned behind ===== */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:var(--tile-ratio) !important;
  height:auto !important;
  background:transparent !important; border:0 !important;
  border-radius:5px !important;
  overflow:hidden !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease;
}

/* put the image under the label and make it fill */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > * img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  z-index:0 !important;
  transform:none !important; /* no zoom */
  display:block !important;
}

/* label: center no matter what the theme calls it */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *
  :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
  position:relative !important;        /* sits in the flex center */
  z-index:2 !important;
  margin:0 !important;
  padding:0 .6em !important;
  max-width:90% !important;
  text-align:center !important;
  color:#fff !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 10px rgba(0,0,0,.45) !important;
  opacity:1 !important;
}

/* nuke any leftover top/left offsets the theme injects */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *
  :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
  inset:auto !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important;
}

/* gentle hover */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *:hover{
  transform:translateY(-10px);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}

/* =========================
   A) TITLE: hidden by default; fade in on hover
   ========================= */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *
  :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
  opacity: 0 !important;
  transform: translateY(4px) !important;       /* tiny slide up */
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events: none !important;              /* no click stealing */
}

/* show on hover (keeps centering from previous rules) */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *:hover
  :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Accessibility: if you want it always visible on touch, add a helper:
   <div class="tabbed-boxes mw-featured-tiles mw-show-titles"> … */
.tabbed-boxes.mw-featured-tiles.mw-show-titles .boxes-wrapper .owl-item > *
  :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
  opacity: 1 !important;
  transform: none !important;
}

/* =========================
   B) SHEEN: ensure nothing hides it + make the arc stronger
   ========================= */

/* Kill any theme backgrounds sitting above our ::before/::after band */
.tabbed-boxes.mw-featured-tiles,
.tabbed-boxes.mw-featured-tiles .row,
.tabbed-boxes.mw-featured-tiles [class*="container"],
.tabbed-boxes.mw-featured-tiles .boxes-wrapper{
  background: transparent !important;
}

/* Put our band layers on top of those wrappers, but below tiles */
.tabbed-boxes.mw-featured-tiles{ position: relative; z-index: 0; }
.tabbed-boxes.mw-featured-tiles::before{ z-index: 1; }  /* base color */
.tabbed-boxes.mw-featured-tiles::after { z-index: 2; }  /* sheen */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper{ z-index: 3; } /* tiles */

/* Stronger curved highlight so it’s clearly not a flat gradient */
.tabbed-boxes.mw-featured-tiles::after{
  background:
    /* main swoop (brighter) */
    radial-gradient(146% 130px at 50% -70px,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.52) 36%,
      rgba(255,255,255,0)   70%),

    /* echo line to emphasize curvature */
    radial-gradient(175% 86px at 50% -26px,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,0)   85%),

    /* gentle bottom falloff */
    linear-gradient(to bottom,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.09) 94%,
      rgba(0,0,0,.16) 100%);
}

/* ====== HARDEN THE BAND LAYERS & KILL ANY THEME BG ABOVE IT ====== */
.tabbed-boxes.mw-featured-tiles,
.tabbed-boxes.mw-featured-tiles .row,
.tabbed-boxes.mw-featured-tiles [class*="container"],
.tabbed-boxes.mw-featured-tiles .boxes-wrapper {
  background: transparent !important;
}

.tabbed-boxes.mw-featured-tiles {
  position: relative;
  z-index: 0;
}

/* base band color layer (if used elsewhere) */
.tabbed-boxes.mw-featured-tiles::before {
  z-index: 1;
}

/* sheen overlay */
.tabbed-boxes.mw-featured-tiles::after {
  z-index: 2;
}

/* tiles wrapper above it all */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper {
  z-index: 3;
}

/* ====== CURVED SHEEN AS SVG (precise “reflection” arc) ====== */
/* knobs */
.tabbed-boxes.mw-featured-tiles {
  --sheen-height: 240px;  /* height of the glossy arc area  */
  --sheen-opacity: .95;   /* overall strength of highlight  */
}

/* replace the previous ::after background with this */
.tabbed-boxes.mw-featured-tiles::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(1.15);
  transform-origin: left top;
  width: 100vw;
  pointer-events: none;

  /* SVG draws the curved highlight; second layer = bottom falloff */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='white' stop-opacity='0.90'/><stop offset='0.45' stop-color='white' stop-opacity='0.45'/><stop offset='0.80' stop-color='white' stop-opacity='0'/></linearGradient></defs><path d='M0,0 C25,35 75,35 100,0 V24 H0 Z' fill='url(%23g)'/></svg>")
      center top / 100% var(--sheen-height) no-repeat,
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.09) 94%,
      rgba(0,0,0,.16) 100%
    );

  opacity: var(--sheen-opacity);
}

/* Optional: if something above still covers the sheen,
   we can move the sheen in front of the wrapper instead: */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper::before {
  content: none; /* enable below if needed (see note) */
}

/* =========================
   FROSTED GLASS HOVER (image only)
   ========================= */

/* Overlay layer that sits above the image (z:1) and below the title (z:2) */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;                           /* image is z:0; title is z:2 */
  pointer-events:none;                 /* don't block clicks */
  background:rgba(255,255,255,.02);    /* tiny tint to sell the “frost” */
  opacity:0;                           /* hidden by default */
  transition:opacity .2s ease, backdrop-filter .2s ease;
  /* in supporting browsers this blurs whatever is behind the overlay */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Hover: turn the overlay on, applying the blur behind it */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *:hover::before{
    opacity:1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* Fallback for browsers without backdrop-filter:
   blur the image itself a touch and scale it so edges don’t show */
@supports not (backdrop-filter: blur(1px)){
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > * img{
    transition: filter .22s ease, transform .22s ease !important;
  }
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *:hover img{
    filter: blur(2.5px) brightness(.98);
    transform: scale(1.02) !important;  /* avoid blurred edge reveal */
  }
}

/* (Optional) If you want the image to always transition smoothly
   even in modern browsers, keep the transition on the img too: */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > * img{
  transition: filter .22s ease, transform .22s ease !important;
}

/* Stronger, clearer title on hover */
.tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *:hover
  :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
  /* soft glow + a crisp faux “stroke” with 4 offset shadows */
  text-shadow:
  0 4px 24px rgba(0,0,0,.80),
  0 0 14px rgba(0,0,0,.75),
  0 0 4px  rgba(0,0,0,1),
  0 1px 1px  rgba(0,0,0,.95),
  1px 0 1px  rgba(0,0,0,.95),
  0 -1px 1px rgba(0,0,0,.95),
  -1px 0 1px rgba(0,0,0,.95),
  2px 0 0   rgba(0,0,0,.85),
  -2px 0 0  rgba(0,0,0,.85),
  0 2px 0   rgba(0,0,0,.85),
  0 -2px 0  rgba(0,0,0,.85);
}

/* ---------- Base colors (edit hex values if needed) ---------- */
.menu-panel a.menu-item{
  display:flex; align-items:center;
  gap:6px; padding:8px 12px;
  border-radius:8px; text-decoration:none;
  color:#0f172a; background:transparent;
}
.menu-panel a.menu-item:hover{ background:#f1f5f9; }

/* ---------- Make all menu text smaller (strong override) ---------- */
.menu-panel,
.menu-panel a,
.menu-panel li > a,
.menu-panel .menu-item,
.menu-panel .menu-item a,
.menu-panel .submenu a,
.menu-panel a span{
  font-size:13px !important;
  line-height:1.2 !important;
}

/* ---------- SEE ALL: square tile painted on <li>, text above ---------- */
/* Adjust these three to change size and placement */
.see-all-menuitem{ /* row container */
  position:relative !important;
  border-bottom:0 !important;
  margin-top:6px !important;
}

/* tile background
.see-all-menuitem::before{
  content:"";
  position:absolute;
  width:180px;             /* <- tile width */
  height:42px;             /* <- tile height */
  left:0;                  /* align to left of column (change to 50% with translateX(-50%) to center) */
  top:50%;
  transform:translateY(-50%);
  background:#e9eef5;
  border:1px solid rgba(15,23,42,.16);
  border-radius:0;         /* square corners */
  z-index:0;
  pointer-events:none;
}
.see-all-menuitem:hover::before{ background:#dfe6f0; }  */

/* link sits above the tile */
.see-all-menuitem > a,
a.see-all-menuitem{
  position:relative;
  z-index:1;
  display:inline-block;    /* change to block to span full column */
  min-height:42px;         /* keep in sync with tile height */
  line-height:1;
  padding: calc((42px - 1em)/2) 12px; /* vertical center + side padding */
  margin:0;

  white-space:nowrap;
  text-decoration:none;
  color:#0f172a;

  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  text-align:left !important;
}

/* focus outline for keyboard users */
.see-all-menuitem > a:focus-visible,
a.see-all-menuitem:focus-visible{
  outline:2px solid #0ea5e9;
  outline-offset:2px;
}

/* Optional: kill any theme dividers on that row */
.see-all-menuitem::after{ display:none; }

/* Make the overall panel an anchoring context */
.menu-panel{ position:relative; }



/*--------------------------------------------------
---------OLD SHOP ALL MENU HELPER HERE---------------
----------------------------------------------------- */



/* -------- Customer Portal: tagline -------- */
.portal-tagline{
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  margin-top: 0px;        /* tightened gap below headline */
  margin-bottom: 16px;
  color: #e4e4e4;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Make portal line / bullets readable on the parallax */
.shop-now-section .portal-tagline,
.shop-now-section .text-wrapper ul,
.shop-now-section .text-wrapper li{
  color: #f5f5f5 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

/* -------- Customer Portal: horizontal gradient login button -------- */
.portal-login-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 9999px;
  margin-bottom: 30px; /* spacing above logo strip */

  /* light gray outer stroke, like your mock */
  border: 1px solid rgba(255,255,255,.55);

  /* horizontal gradient: brighter on left, darker on right */
  background: linear-gradient(
    to right,
    #047fba 0%,   /* left: brighter blue */
    #000000 100%  /* right: deeper blue */
  );

  color: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;

  /* softer, flatter shadow */
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}

/* Hover: slightly brighter, but still flat */
.portal-login-btn:hover{
  background: linear-gradient(
    to right,
    #0594d8 0%,
    #04649a 100%
  );
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* -------- Customer Portal: headline underline -------- */
.shop-now-section .headline{
  position: relative;
  display: inline-block;  /* so the line sizes off the text width */
  padding-bottom: 4px;    /* little breathing room above line */
  margin-bottom: 2px;     /* tightened gap above tagline */
}

/* thin blue line slightly longer than the text */
.shop-now-section .headline::after{
  content: "";
  position: absolute;
  left: 60%;
  transform: translateX(-50%);
  bottom: 0;

  width: 127%;                        /* 100% = exact text width; bump for longer */
  height: 1px;                        /* thickness of the line */
  background: var(--evo-brand-primary, #0494da);
  border-radius: 999px;               /* soft ends */
}

:root{
  --mw-footer-gray-deep: #444444;
  --mw-footer-blue: #383838;
  --mw-footer-blue: #096592;
  --mw-footer-text: #f9fafb;
}
/* =========================
   METRO — Footer main band
   ========================= */
footer.footer .footersection-1{
  position: relative;
  padding: 48px 0 32px;
  color: var(--mw-footer-text);
  font-family: "Montserrat", system-ui, sans-serif;
  overflow: hidden;
  /* Desktop: Photoshop background + solid blue fallback */
  background:
    var(--mw-footer-blue)
    url("https://us.evocdn.io/dealer/1598/content/media/My_Theme/footer/footer-bg-dark.jpg")
    left center / cover no-repeat;
}
/* We no longer need the ::before wedge, so make sure it's disabled */
footer.footer .footersection-1::before{
  content: none !important;
}
/* Ensure all inner content sits above the background image */
footer.footer .footersection-1 > .container,
footer.footer .footersection-1 .row-wrapper,
footer.footer .footersection-1 .row{
  position: relative;
  z-index: 1;
}
/* Logo column */
footer.footer .footersection-1 img.footer-logo{
  max-width: 260px;
  height: auto;
  display: block;
  margin: 0 0 0 0;
  position: relative;
  left: -65px;
  top: -35px;
}
/* Override EvoX CSS variable that controls h4 size at theme level */
footer.footer .footersection-1 {
  --evo-font-size-h4: 19px;
  --evo-font-size-h5: 19px;
}

/* Headings in footer menus — locked against all page-level overrides */
footer.footer .footersection-1 h4,
footer.footer .footersection-1 h5,
footer.footer .footersection-1 .menulinks_container .quicklinks .title {
  margin: 0 0 14px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mw-footer-text) !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
/* Lists */
footer.footer .footersection-1 ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.footer .footersection-1 li{
  margin: 3px 0;
}
/* Links */
footer.footer .footersection-1 a{
  color: var(--mw-footer-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}
footer.footer .footersection-1 a:hover{
  text-decoration: underline;
}
/* =========================
   Footer – slim social / copyright bar
   ========================= */
footer.footer .footersection-2{
  padding: 4px 0 2px;
}
footer.footer .footersection-2 [id^="socialmediapartial_"],
footer.footer .footersection-2 [id^="copyright_"]{
  padding-top: 0;
  padding-bottom: 0;
}
footer.footer .footersection-2 p{
  margin: 0;
}

/* old footer CSS goes here */

/* Center the whole section */
.mws-cap-title,
.mws-cap-intro,
.mws-cap-list {
  max-width: 1200px;       /* controls the max width of the block */
  margin-left: auto;
  margin-right: auto;      /* centers horizontally */
}

/* Title */
.mws-cap-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

/* Intro paragraph */
.mws-cap-intro {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  padding: 0 1rem;         /* some breathing room on mobile */
}

/* Make the UL behave like a multi-column grid */
.mws-cap-list {
  list-style: none;
  padding: 0;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  padding: 0 1rem;         /* side padding so it doesn’t hit the screen edges */
}

/* Individual items */
.mws-cap-item h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.mws-cap-item p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  color: #444;
}

/* Knob: move the whole portal + logo block up/down inside parallax */
:root{
  --portal-block-nudge-y: 290px;   /* try -30px or +30px */
}

.shop-now-section .text-wrapper{
  transform: translateY(var(--portal-block-nudge-y));
}

/* ============================================
   HOME – Capabilities overlay band on parallax
   ============================================ */

/* Row (or column) that contains the "Your Complete..." block */
.home-cap-overlay-row {
  position: relative;
  z-index: 20;

  /* Pull the whole band UP over the parallax */
  margin-top: 0;   /* you’ve tuned this already */

  /* NOTE: leave margin-bottom at 0 for now.
     The white gap we’re seeing comes from the parent wrapper,
     not from this element’s bottom margin. */
  margin-bottom: 0;

  /* Breathing room inside the band */
  padding-top: 20px;
  padding-bottom: 10px;
}

/* Frosted white strip behind the content */
.home-cap-overlay-row::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100vw;            /* full-bleed across the viewport */
  height: 100%;
  z-index: -1;
  pointer-events: none;

  /* transparency + shadow */
  background: rgba(255, 255, 255, 0.60);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);

  /* thin separator line at the very top */
  border-top: 1px solid rgba(0, 0, 0, 0.4);

  /* subtle “frosted glass” effect where supported */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Optional: slightly tighten inner max-width for nice alignment */
.home-cap-overlay-row .mws-cap-title,
.home-cap-overlay-row .mws-cap-intro,
.home-cap-overlay-row .mws-cap-list {
  max-width: 1180px;
}

/* Tighten gap between intro line and blue column headings */
.home-cap-overlay-row .mws-cap-intro {
  margin-bottom: 13px;
}

.home-cap-overlay-row .mws-cap-list {
  margin-top: 0;
}

/* ============================================
   HOME – Capabilities text contrast tweaks
   ============================================ */

/* Main title: "Your Complete Welding & Gas Partner" */
.home-cap-overlay-row .mws-cap-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Blue column headings (Industrial & Specialty Gases, etc.) */
.home-cap-overlay-row .mws-cap-item h3,
.home-cap-overlay-row .mws-cap-item h3 a {
  color: #0272ad;          /* slightly darker blue */
  font-weight: 650;
  text-shadow: none;
}

/* Body copy inside the columns: keep crisp and dark */
.home-cap-overlay-row .mws-cap-item p {
  color: #333333;
}

/* Reduce vertical gaps in the Why Choose Metro section */
.home-cap-overlay-row .mws-cap-title {
  margin-bottom: 10px !important;     /* pull the intro line closer */
}

.home-cap-overlay-row .mws-cap-intro {
  margin-bottom: 22px !important;     /* pull the 4 columns up a bit */
}

/* ============================================
   HOME – pull the bottom content (Popular Categories)
   up to cover the white gap below the parallax
   ============================================ */

/* Don’t do this on mobile where stacking is tighter */
@media (max-width: 991px) {
  section.zonebottom {
    margin-top: 0;
  }
}

/* HOME – remove the empty “desktop” spacer between zonetop & zonebottom
body.ex-home .zonetop + .desktop {
  display: none !important;
} */

/* Keep footer from sliding off to the right on non-home pages,
   but don't change its normal width/layout */
footer {
  overflow-x: hidden;   /* safety: no horizontal scroll */
}

body:not(.ex-home) footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;   /* just in case something's translating it */
}

/* Home page – visually pull the brands row up closer to the parallax */
body.ex-home .home-brands-row {
  margin-top: -40px;   /* tweak: try -20, -40, -60, etc. */
}

/* Normalize JUST the brands text + wrapper, not every HTML block */
body.ex-home .home-brands-row .htmlcontent_container {
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  max-width: 1180px;
  text-align: left;    /* change to center if you want */
}

.page-content.container.onecolumn {
    margin-top: -660px !important;   /* or whatever value you liked in DevTools */
}

.zonebottom {
    padding-top: 255px;
}

/* Heading block for Browse By Brand */
.home-brands-title {
    text-align: center;
    padding: 30px 0 5px;              /* top space from the parallax, small bottom */
}

/* Actual text inside that block */
.home-brands-title h1,
.home-brands-title h2,
.home-brands-title h3,
.home-brands-title p {
    margin: 0;                        /* kill the big default margin under the text */
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── BRANDS SECTION: theme refresh ── */
.home-brands-title {
  background: #e8eaed !important;
  padding: 36px 0 8px !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
}

.home-brands-title h1,
.home-brands-title h2,
.home-brands-title h3,
.home-brands-title p {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: #1a1d23 !important;
}

.home-brands-slider {
  background: #e8eaed !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 20px 0 36px !important;
  position: relative !important;
}

/* Fade edges left and right */
.home-brands-slider::before,
.home-brands-slider::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 120px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.home-brands-slider::before {
  left: 0 !important;
  background: linear-gradient(to right, #e8eaed 0%, transparent 100%) !important;
}
.home-brands-slider::after {
  right: 0 !important;
  background: linear-gradient(to left, #e8eaed 0%, transparent 100%) !important;
}

/* Dim logos at rest, full on hover */
.home-brands-slider img {
  filter: grayscale(20%) !important;
  transition: filter 0.2s ease !important;
  opacity: 0.85 !important;
}
.home-brands-slider img:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

.zonebottom,
.zonebottom [role="row-section"] {
  background: #e8eaed !important;
}

/* ── ZONEBOTTOM SPACING ── */
.zonebottom [role="row-section"]:first-of-type {
  margin-bottom: -20px !important;
}

@media (max-width: 575px) {
  .zonebottom { padding-top: 60px; }
}
@media (min-width: 576px) and (max-width: 991px) {
  .zonebottom { padding-top: 110px; }
}

/* ── HOME CTA: defer entirely to inline widget styles ── */
.zonebottom .home-cta-block {
  background: transparent;
  padding: 0;
  margin-top: 0;
}
.zonebottom .home-cta {
  max-width: 100%;
  margin: 0;
}
.zonebottom .home-cta h2,
.zonebottom .home-cta p,
.zonebottom .home-cta-buttons,
.zonebottom .home-cta-btn {
  all: unset;
}

/* ── BRANDS SLIDER: fading bottom line ── */
.zonebottom .home-brands-slider::after {
  content: "";
  display: block;
  height: 1.5px;
  max-width: 1100px;
  margin: 5px auto 55px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,0.45),
    rgba(0,0,0,0)
  );
}

/* ── ZONEBOTTOM ROW SPACING ── */
.zonebottom [role="row-section"].align-items-center {
  margin-bottom: 10px !important;
}

/* =========================================
   MOBILE – Popular Categories tiles (2x2)
   ========================================= */
@media (max-width: 560px) {

  /* 2 columns instead of one long stack */
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;                 /* tighten gaps a bit */
  }

  /* Make each tile more square and smaller on phones */
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *{
    aspect-ratio: 1 / 1 !important;       /* roughly square */
  }

  /* Slightly smaller label text so it doesn’t wrap like crazy */
  .tabbed-boxes.mw-featured-tiles .boxes-wrapper .owl-item > *
    :is(.title,.box-title,.bannertext,.heading,.overlay-title,.caption,.text,h1,h2,h3,[class*="title"],[class*="caption"]){
    font-size: 0.8rem !important;
    padding: 0 .4em !important;
  }
}

/* Popular Categories – hide leftover Owl nav/dot controls on mobile */
@media (max-width: 991.98px){
  .tabbed-boxes.mw-featured-tiles .owl-nav,
  .tabbed-boxes.mw-featured-tiles .owl-prev,
  .tabbed-boxes.mw-featured-tiles .owl-next,
  .tabbed-boxes.mw-featured-tiles .owl-dots {
    display: none !important;
    visibility: hidden !important;
  }
}

/* =========================================
   MOBILE – Parallax + "Why Choose Metro" card
   ========================================= */
@media (max-width: 767.98px) {

  /* Parallax minimum height */
  :root{
    --sectionH: 540px;   /* tweak up/down as needed */
  }

  .shop-now-section,
  .shop-now-section.bg-parallax{
    height: auto !important;
    min-height: var(--sectionH) !important;
    overflow: visible !important;
  }

  /* --- Hide portal content on the parallax for mobile --- */
  .shop-now-section .brand-strip,
  .shop-now-section .portal-login-btn,
  .shop-now-section .headline,
  .shop-now-section .portal-tagline,
  .shop-now-section .text-wrapper ul,
  .shop-now-section .text-wrapper li{
    display: none !important;
  }

  /* Cancel the desktop transform */
  .shop-now-section .text-wrapper{
    transform: none !important;
    padding-top: 0 !important;
  }

  /* === This is the important change: target the row itself === */
  .home-cap-overlay-row{
    /* less negative than desktop so it sits LOWER in the image */
    margin-top: 65px !important;   /* make this -190 / -230 to fine-tune */
    margin-bottom: 20px !important;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  /* Floating card look on mobile */
  .home-cap-overlay-row::before{
    width: 92vw;
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(0,0,0,.35);
  }

  /* Center inner content and keep it narrow */
  .home-cap-overlay-row .mws-cap-title,
  .home-cap-overlay-row .mws-cap-intro,
  .home-cap-overlay-row .mws-cap-list{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 2×2 grid for the four capability items */
  .home-cap-overlay-row .mws-cap-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
  }

  /* Tighter mobile typography */
  .home-cap-overlay-row .mws-cap-title{
    font-size: 1.35rem;
    margin-bottom: 0.5rem !important;
  }

  .home-cap-overlay-row .mws-cap-intro{
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 1.1rem !important;
  }

  .home-cap-overlay-row .mws-cap-item h3{
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .home-cap-overlay-row .mws-cap-item p{
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
  }

   /* 1) Let the wrapper be a bit taller + never clip the card */
  .htmlcontent_container.mobile-widget-wrapper{
    padding-bottom: 26px !important;   /* room for the fade */
    overflow: visible !important;      /* don't chop shadows */
  }

  /* 2) Let the frosted background extend slightly BELOW the content
        so the drop shadow can fully fade out before the blue bar */
  .home-cap-overlay-row::before{
    height: calc(100% + 24px);         /* extend card “plate” downward */
  }
}

/* old mobile footer css */

/* ========================================= 
   DESKTOP HEADER SEARCH – diagonal bar + blue/gray bands
   ========================================= */
@media (min-width: 992px){

  /* Wrapper: positioning context */
  .header-full > .headersection-2 .widgetsearch.search{
    position: relative !important;
    overflow: visible !important;
    top: 0 !important;  /* kill old nudge */
  }

  /* Also remove any nudge on the column that contains it */
  .header-full > .headersection-2 .row > [class*="col"]:has(.widgetsearch.search){
    position: relative !important;
    top: 0 !important;
  }

  /* Main input: white bar with diagonal left/right using fixed px */
  .header-full > .headersection-2 .widgetsearch.search
    input.form-control,
  .header-full > .headersection-2 .widgetsearch.search
    input[type="text"]{
    position: relative;
    z-index: 1;

    height: 44px !important;
    line-height: 44px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;

    padding-left: 60px !important;   /* room for magnifier */
    padding-right: 40px !important;  /* room before blue band */

    /* Diagonal cuts on left & right edges – fixed pixel offsets */
    -webkit-clip-path: polygon(
      24px 0,
      100% 0,
      calc(100% - 24px) 100%,
      0 100%
    );
    clip-path: polygon(
      24px 0,
      100% 0,
      calc(100% - 24px) 100%,
      0 100%
    );
  }

  /* Hide the theme’s built-in search button & wrapper – Enter key only */
  .header-full > .headersection-2 .widgetsearch.search
    :is(.input-group-append,.input-group-btn,
        .input-group-append .btn,.input-group-btn .btn,
        button){
    display: none !important;
  }

  /* NEW: Search icon drawn via ::before (independent of the button) */
  .header-full > .headersection-2 .widgetsearch.search::before{
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;

    /* simple magnifying glass SVG */
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <circle cx='10' cy='10' r='6' fill='none' stroke='%23000000' stroke-width='2'/>\
  <line x1='14' y1='14' x2='20' y2='20' stroke='%23000000' stroke-width='2' stroke-linecap='round'/>\
</svg>")
      center / contain no-repeat;

    pointer-events: none;
    z-index: 2;  /* above the white bar, well left of the text */
  }

  /* Right-side blue + gray diagonal bands (your wedge) */
  .header-full > .headersection-2 .widgetsearch.search::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    /* pulled LEFT so they touch the clipped bar */
    right: -11px;
    width: 55px;

    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'>\
  <!-- blue band -->\
  <polygon fill='%230494da' points='18,40 36,40 76,0 58,0'/>\
  <!-- thin gray band to the right (tweak these points for width) -->\
  <polygon fill='%235b5b5b' points='35,40 43,40 83,0 75,0'/>\
</svg>")
      center / 100% 100% no-repeat;

    pointer-events: none;
    z-index: 0;  /* sits behind the input text area */
  }
}

/* Safety: override the old variable that was lifting the search up */
@media (min-width: 992px){
  :root{
    --search-nudge-y: 0px;
  }
}

/* Old EvoX v1 search dropdown CSS removed during v4 search engine update (Nov 2025) */

/* Old EvoX v1 search "categories on right" layout removed during v4 search engine update (Nov 2025) */

/* =========================================================
   v4 SEARCH ENGINE — Visual theming to match Shop All menu
   ----------------------------------------------------------
   Brings the search dropdown's visual language in line with
   the Shop All mega menu: brand blue accents, framed panel,
   cleaner section titles, hover states on cards and links.

   Reuses existing --mw tokens (defined in mega menu section)
   so colors stay in sync if Shop All theming changes.

   Desktop only — mobile search uses a different layout.
   ========================================================= */
@media (min-width: 992px){

  /* --- 1) Dropdown frame: 1px blue border like Shop All --- */
  #search-v2-dropdown{
    border: 1px solid var(--mw-blue) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  /* --- 2) Section titles: small-caps blue labels --- */
  /* Note: no padding-bottom or border-bottom — EvoX already
     adds its own separator between sections. Just style the
     text and use margin-bottom for spacing. */
  #search-v2-dropdown .search-v2__section-title{
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--mw-text-label) !important;
    margin-bottom: 10px !important;
  }

  /* --- 3) Right panel: subtle gray bg so categories feel like a distinct sidebar --- */
  /* Echoes Shop All's dark sidebar concept (categories live in a structurally
     differentiated area) but lighter so the dropdown doesn't feel heavy. */
  #search-v2-dropdown .search-v2__panel--right{
    background: #f5f5f5 !important;
    border-left: 1px solid var(--mw-card-bd) !important;
  }

  /* Each category card: lift hover effect like Shop All gas links */
  #search-v2-dropdown .search-v2__panel--right a,
  #search-v2-dropdown .search-v2__panel--right [class*="category"]{
    transition: background 0.15s ease,
                border-color 0.15s ease,
                color 0.12s ease,
                transform 0.15s ease !important;
  }

  #search-v2-dropdown .search-v2__panel--right a:hover,
  #search-v2-dropdown .search-v2__panel--right [class*="category"]:hover{
    background: var(--mw-blue-tint) !important;
    border-color: var(--mw-blue) !important;
    color: var(--mw-blue-dark) !important;
  }

  /* --- 4) Carousel arrows: cleaner, blue accent on hover --- */
  #search-v2-dropdown .owl-carousel .owl-nav .owl-prev,
  #search-v2-dropdown .owl-carousel .owl-nav .owl-next{
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid var(--mw-card-bd) !important;
    color: var(--mw-text-muted) !important;
    transition: background 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }

  #search-v2-dropdown .owl-carousel .owl-nav .owl-prev:hover,
  #search-v2-dropdown .owl-carousel .owl-nav .owl-next:hover{
    background: var(--mw-blue) !important;
    border-color: var(--mw-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(42, 159, 214, 0.3) !important;
  }

  /* Disabled state (when at the end of the carousel) */
  #search-v2-dropdown .owl-carousel .owl-nav .owl-prev.disabled,
  #search-v2-dropdown .owl-carousel .owl-nav .owl-next.disabled{
    opacity: 0.35 !important;
    cursor: not-allowed !important;
  }

  #search-v2-dropdown .owl-carousel .owl-nav .owl-prev.disabled:hover,
  #search-v2-dropdown .owl-carousel .owl-nav .owl-next.disabled:hover{
    background: #ffffff !important;
    border-color: var(--mw-card-bd) !important;
    color: var(--mw-text-muted) !important;
    box-shadow: none !important;
  }

/* --- 5) Product cards in carousel: PLP-style blue border on hover --- */
  /* Matches the product card hover treatment on category/PLP pages —
     crisp blue outline, no movement, no shadow. Clean and unambiguous. */
  #search-v2-dropdown .owl-carousel .owl-item .search-v2-product,
  #search-v2-dropdown .owl-carousel .owl-item a{
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    padding: 6px !important;
    transition: border-color 0.15s ease, color 0.12s ease !important;
  }

  #search-v2-dropdown .owl-carousel .owl-item .search-v2-product:hover,
  #search-v2-dropdown .owl-carousel .owl-item a:hover{
    border-color: var(--mw-blue) !important;
    background: var(--mw-blue-tint) !important;
  }

  /* Product name turns blue on hover for extra affordance */
  #search-v2-dropdown .owl-carousel .owl-item a:hover .search-v2-product__name,
  #search-v2-dropdown .owl-carousel .owl-item a:hover [class*="name"]{
    color: var(--mw-blue-dark) !important;
  }

  /* --- 6) "Recent searches" pills (Pfe, Lined, etc.) --- */
  #search-v2-trending-searches a,
  #search-v2-history a{
    transition: background 0.15s ease,
                border-color 0.15s ease,
                color 0.12s ease !important;
  }

  #search-v2-trending-searches a:hover,
  #search-v2-history a:hover{
    background: var(--mw-blue-tint) !important;
    border-color: var(--mw-blue) !important;
    color: var(--mw-blue-dark) !important;
  }
}

/* =========================================================
   v4 SEARCH ENGINE — Dropdown top padding fix
   ... */
@media (min-width: 992px){
  #search-v2-dropdown .search-v2__panel{
    padding-top: 48px !important;
  }
}

@media (min-width: 992px) {
  .additional_linkslist > li.menuitem { position: relative; }

  .additional_linkslist > li.menuitem > .dd-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    padding: 8px 0;
    min-width: 220px;
    text-align: left;
  }

  .additional_linkslist > li.menuitem.has-dd:hover > .dd-menu {
    display: block;
  }

  .additional_linkslist > li.menuitem > .dd-menu a {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    white-space: nowrap;
    color: #111;
  }

  .additional_linkslist > li.menuitem > .dd-menu a:hover {
    background: rgba(0,0,0,.06);
  }
}

/*======================================================================
  11. PAGE-SPECIFIC LAYOUTS (STUBS)
  ----------------------------------------------------------------------
  Use these as anchors for future page‑specific rules. Keep selectors
  narrow, e.g.:
      body.ex-account .account-page { ... }
      body.ex-pdp .product-detail { ... }
======================================================================*/

/* 11.xx – About Us: full-bleed hero under header
   -----------------------------------------------
   ABOUT US HERO
   -------------------------------------------------- */

/* Make the About hero break out of the content container */
.about-hero {
  position: relative;
  width: 100vw;                          /* span entire viewport width */
  margin-left: calc(50% - 50vw);         /* pull left edge to viewport edge */
  margin-right: calc(50% - 50vw);        /* pull right edge to viewport edge */
}

/* Optional: if there's a gap between hero and blue nav, nudge it up a bit */
.about-hero {
  margin-top: 0;                          /* try  -20px or -30px if needed */
}

/* The inner hero should just fill the wrapper */
.about-hero .hero-new {
  margin: 0;
}

/* Ensure the background image fills the hero height (we already have global
   .hero-new height rules, so just make sure boxes are 100% tall) */
.about-hero .hero-new .hero-box {
  position: relative;
  height: 100% !important;
}

.about-hero .hero-new .hero-box > img.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Remove any extra spacing above the first content row under the hero */
.page-content.container.onecolumn > .row:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ABOUT US HERO – pull up under the header */
.about-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* pull it up into the white gap under the header */
  margin-top: -99px;   /* tweak this: try -30, -50, etc until it touches */
}

/* ABOUT US – mobile hero spacing (no overlap, no white gap) */
@media (max-width: 991px) {

  /* Make sure breadcrumb row is gone on mobile */
  body.ex-name-aboutus .row-breadcrumb,
  body.ex-name-aboutus ol#breadcrumb.breadcrumb {
    display: none !important;
  }

  /* Don't let anything push the hero down */
  body.ex-name-aboutus .about-hero {
    margin-top: -20px !important;
  }

  /* Kill extra top padding/margin from the first row under the header */
  body.ex-name-aboutus .page-content.container.onecolumn > .row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* keep the inner hero flush inside the wrapper */
.about-hero .hero-new {
  margin: 0;
}

/* make sure the slide fills the hero height */
.about-hero .hero-new .hero-box {
  position: relative;
  height: 100% !important;
}
.about-hero .hero-new .hero-box > img.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ABOUT US hero: taller band so bottom doesn’t feel cropped */
@media (min-width: 992px){
  .about-hero .hero-new .owl-stage-outer{
    height: 596px !important;   /* try 640–700px to taste */
  }
}

/* Floating logo animation on About hero
   ------------------------------------- */
.about-hero .hero-new {
  position: relative; /* anchor for absolute video */
}

.about-hero .hero-logo-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* size: adjust to taste */
  width: 600px;
  max-width: 60vw;
  height: auto;

  z-index: 3;          /* above hero images */
  pointer-events: none;/* clicks pass through to page */
}

/* Hide breadcrumb ONLY on About Us page */
body.ex-name-aboutus ol#breadcrumb.breadcrumb {
  display: none !important;
}

/* ===========================================
   ABOUT US – CTA block
   Reuse home-page CTA styling down here
   =========================================== */

/* Gray band */
body.ex-name-aboutus .home-cta-block {
  background-color: #e7e7e7;   /* same as refined home CTA */
  padding: 35px 20px 45px;
  margin-top: 40px;            /* adjust if you want more/less gap above */
  text-align: center;
}

/* Inner content */
body.ex-name-aboutus .home-cta {
  max-width: 900px;
  margin: 0 auto;
}

/* Headline */
body.ex-name-aboutus .home-cta h2 {
  font-size: 28px;             /* refined size from home */
  margin: 0 0 6px;
  font-weight: 700;
}

/* Paragraph */
body.ex-name-aboutus .home-cta p {
  font-size: 16px;
  line-height: 1.45;
  margin: 0 auto 20px;
  max-width: 700px;
}

/* Buttons row */
body.ex-name-aboutus .home-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Buttons base */
body.ex-name-aboutus .home-cta-btn {
  display: inline-block;
  padding: 10px 24px;
  font-size: 16px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #0272ad;
}

/* Primary (filled) button */
body.ex-name-aboutus .home-cta-btn.primary {
  background-color: #0272ad;
  color: #ffffff;
}
body.ex-name-aboutus .home-cta-btn.primary:hover {
  background-color: #006da8;
  border-color: #006da8;
}

/* Outline button */
body.ex-name-aboutus .home-cta-btn.outline {
  background-color: transparent;
  color: #0272ad;
}
body.ex-name-aboutus .home-cta-btn.outline:hover {
  background-color: #d8ecf7;
}

/* ABOUT US – make CTA band full-width like home */
body.ex-name-aboutus .home-cta-block {
  position: relative;
  width: 100vw;                          /* span entire viewport width */
  margin-left: calc(50% - 50vw);         /* escape the centered container */
  margin-right: calc(50% - 50vw);
}

/* Optional: adjust spacing above/below on About page CTA */
body.ex-name-aboutus .home-cta-block {
  margin-top: 40px;      /* tweak if you want it closer/farther from content */
  margin-bottom: 0;
}

/* ABOUT US – full-width map band
   ---------------------------------------- */
body.ex-name-aboutus .about-map-band,
.about-map-band {
  position: relative;
  width: 100vw;                          /* go edge-to-edge */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  height: 400px;                         /* adjust to taste (hero-ish height) */
  margin-top: 0;                         /* no black band above */
  margin-bottom: 0;                      /* no black band below */
  overflow: hidden;
  background: transparent;
}

/* Remove spacing from neighbors above/below the map band */
body.ex-name-aboutus .about-map-band + * ,
.about-map-band + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.ex-name-aboutus .about-map-band {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Kill row/column padding around HTML widgets in the catalog grid */
/* Tighten only the catalog-grid row that contains the map */
body.ex-name-aboutus section.catalog-grid .row-section,
body.ex-name-aboutus section.catalog-grid .row-section > .row,
body.ex-name-aboutus section.catalog-grid .row-section .htmlcontent_container,
body.ex-name-aboutus section.catalog-grid .row-section .col-lg-12,
body.ex-name-aboutus section.catalog-grid .row-section .col-md-12,
body.ex-name-aboutus section.catalog-grid .row-section .col-sm-12 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* Theme adds spacing via --evo-row-spacing on role=row-section */
body.ex-name-aboutus section.catalog-grid [role="row-section"] {
  margin-bottom: 0 !important;
}

body.ex-name-aboutus section.catalog-grid {
  --evo-row-spacing: 0px;
}

/* Map background */
body.ex-name-aboutus .about-map-inner,
.about-map-inner {
  width: 100%;
  height: 100%;
  background-image: url("https://us.evocdn.io/dealer/1598/content/media/Content_Pages/About Us/map-parallax-dual-crop.jpg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* turn parallax ON here (desktop only) */
  background-attachment: fixed;
}

/* Disable parallax on tablets/phones (fixed is janky there) */
@media (max-width: 991.98px) {
  body.ex-name-aboutus .about-map-inner,
  .about-map-inner {
    background-attachment: scroll;
  }
}

/* Overlay container – LEFT side */
body.ex-name-aboutus .about-map-overlay,
.about-map-overlay {
  position: absolute;
  left: 400px;                 /* was right: 40px */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  padding: 28px 32px;
  border-radius: 4px;
  max-width: 480px;
  color: #fff;
  backdrop-filter: blur(3px);
}

/* Headline */
body.ex-name-aboutus .about-map-overlay h2,
.about-map-overlay h2 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: #0272ad;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Supporting text */
body.ex-name-aboutus .about-map-overlay p,
.about-map-overlay p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  opacity: 0.95;
}

/* ABOUT US – mobile layout: map on top, light card below */
@media (max-width: 767px){

  /* Let the section grow with its content */
  body.ex-name-aboutus .about-map-band,
  .about-map-band {
    height: auto;
  }

  body.ex-name-aboutus .about-map-inner,
  .about-map-inner {
    height: 260px;                /* map height on mobile */
    background-attachment: scroll;
  }

  /* Card BELOW the map */
  body.ex-name-aboutus .about-map-overlay,
  .about-map-overlay {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;

    max-width: 90%;
    margin: 20px auto 0;
    text-align: center;

    background: #f2f2f2;          /* light gray card */
    color: #333;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    backdrop-filter: none;        /* no blur needed on white */
  }

  body.ex-name-aboutus .about-map-overlay h2,
  .about-map-overlay h2 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;                  /* dark, high contrast */
    text-shadow: none;            /* remove dark-overlay styling */
  }

  body.ex-name-aboutus .about-map-overlay p,
  .about-map-overlay p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    opacity: 1;
  }
}

/* ABOUT US – remove empty zonebottom section under CTA */
body.ex-name-aboutus section.zonebottom:last-of-type {
  display: none !important;
}

/* 11.02 – Services
---------------------------------------------------------------*/

/* 11.02 – Services: full-bleed hero slideshow
   ------------------------------------------- */

body.ex-name-services .hero--services {
  position: relative;
  width: 100vw;                          /* edge-to-edge like About hero */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -56px;                     /* pull up under header (desktop) */

  min-height: var(--hero-h-desktop, 580px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5rem;

  overflow: hidden;
  color: #fff;
  text-align: center;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Slides wrapper */
body.ex-name-services .hero--services .hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Each slide */
body.ex-name-services .hero--services .hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: servicesHeroFade 16s infinite;
}

/* Replace these URLs with your 4 Services hero images */
body.ex-name-services .hero--services .hero__slide--1 {
  background-image: url("https://us.evocdn.io/dealer/1598/content/media/Content_Pages/Services/services-hero1.jpg");
  animation-delay: 0s;
}

body.ex-name-services .hero--services .hero__slide--2 {
  background-image: url("https://us.evocdn.io/dealer/1598/content/media/Content_Pages/Services/services-hero2.jpg");
  animation-delay: 4s;
}

body.ex-name-services .hero--services .hero__slide--3 {
  background-image: url("https://us.evocdn.io/dealer/1598/content/media/Content_Pages/Services/services-hero3.jpg");
  animation-delay: 8s;
}

body.ex-name-services .hero--services .hero__slide--4 {
  background-image: url("https://us.evocdn.io/dealer/1598/content/media/Content_Pages/Services/services-hero4.jpg");
  animation-delay: 12s;
}

/* Dark overlay for contrast */
body.ex-name-services .hero--services .hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.55)
  );
}

/* Content block */
body.ex-name-services .hero--services .hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 2rem 1.5rem;
}

body.ex-name-services .hero--services .hero__content h1 {
  font-size: clamp(2.4rem, 3vw + 1rem, 3.5rem);
  margin: 0 0 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.ex-name-services .hero--services .hero__content p {
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.25rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 40rem;
}

/* Optional CTA button */
body.ex-name-services .hero--services .hero__btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(4px);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

body.ex-name-services .hero--services .hero__btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

/* Crossfade animation just for Services hero */
@keyframes servicesHeroFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Thin blue bar at bottom of Services hero */
body.ex-name-services .hero--services::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px; /* adjust thickness if you want */
  background: var(--evo-brand-primary, #0494da);
  z-index: 1; /* above overlay, below text */
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  body.ex-name-services .hero--services {
    margin-top: -20px !important;
    min-height: var(--hero-h-tablet, 460px);
  }

  body.ex-name-services .hero--services .hero__content {
    padding: 1.75rem 1.25rem;
  }
}

@media (max-width: 575.98px) {
  body.ex-name-services .hero--services {
    min-height: var(--hero-h-mobile, 320px);
  }

  body.ex-name-services .hero--services .hero__content h1 {
    font-size: 2rem;
  }
}

/* Hide breadcrumb ONLY on Services pages */
body.ex-name-services ol#breadcrumb.breadcrumb {
  display: none !important;
}

/* 11.03 – Services content bands
   ------------------------------------------- */

/* Outer wrapper just controls bottom padding now */
body.ex-name-services .services-list {
  padding: 0 0 5rem;
}

/* Each band is full-width so the bg color reaches the edges */
body.ex-name-services .service-block {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  min-height: 360px; /* slightly shorter than before */
  display: flex;
  align-items: stretch;
}

/* Alternate subtle background per row */
body.ex-name-services .service-block:nth-child(odd) {
  background-color: #ffffff;
}

body.ex-name-services .service-block:nth-child(even) {
  background-color: #f5f7fa; /* light grey/blue tint */
}

/* Inner content area stays aligned with the site grid */
body.ex-name-services .service-block__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* Image / media column */
body.ex-name-services .service-block__media {
  flex: 0 0 36%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smaller, consistent images (good for vertical shots too) */
body.ex-name-services .service-block__media img {
  width: auto;              /* keep natural aspect ratio */
  height: auto;
  max-width: 420px;         /* controls how wide a landscape can get */
  max-height: 420px;        /* caps how tall a portrait can get */
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: block;
}

/* Text column */
body.ex-name-services .service-block__content {
  flex: 1;
}

body.ex-name-services .service-block__content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  color: #0494da;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.ex-name-services .service-block__content p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  color: #222;
}

body.ex-name-services .service-block__content ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  list-style: disc;
  color: #333;
}

body.ex-name-services .service-block__content li {
  margin-bottom: 0.25rem;
  font-size: 0.97rem;
}

/* Alternating left/right layout */
body.ex-name-services .service-block--image-left .service-block__inner {
  flex-direction: row; /* image left, text right */
}

body.ex-name-services .service-block--image-right .service-block__inner {
  flex-direction: row-reverse; /* image right, text left */
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  body.ex-name-services .service-block {
    min-height: auto;
  }

  body.ex-name-services .service-block__inner {
    flex-direction: column;
    gap: 1.75rem;
    padding: 3rem 1.5rem;
  }

  body.ex-name-services .service-block__media,
  body.ex-name-services .service-block__content {
    width: 100%;
  }

  body.ex-name-services .service-block__content h2 {
    font-size: 1.5rem;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  body.ex-name-services .service-block__inner {
    padding-inline: 1.25rem;
  }

  body.ex-name-services .service-block__content h2 {
    font-size: 1.35rem;
  }
}

/* 11.04 – GAS SOLUTIONS PAGE -
   ========================================================= */

/* GAS SOLUTIONS hero (SAFE CENTERING – NO MOBILE FLIP)*/

/* Hide breadcrumb ONLY on Gas Solutions page */
body.ex-name-gassolutions ol#breadcrumb.breadcrumb,
body.ex-name-gassolutions .row-breadcrumb{
  display: none !important;
}

/* ---- Break out of Bootstrap constraints (only this page) ---- */
body.ex-name-gassolutions .page-content.container.onecolumn{
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep the catalog-grid container from adding side constraints */
body.ex-name-gassolutions section.catalog-grid > .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.ex-name-gassolutions section.catalog-grid > .container > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.ex-name-gassolutions section.catalog-grid > .container > .row > [class*="col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Full-bleed hero band ---- */
body.ex-name-gassolutions .gas-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: #101010;

  /* tune this */
  margin-top: -15px;

  /* gutters */
  padding: 0 20px;
  box-sizing: border-box;

  /* ✅ safe centering: centers the child without changing its internal layout */
  display: flex;
  justify-content: center;
}

/* ✅ do NOT change the widget's display/positioning (prevents mobile flip)
   only constrain max width */
body.ex-name-gassolutions .gas-hero .periodic-table{
  width: min(1600px, 96vw);
  max-width: 1600px;
  margin: 0;            /* flex handles centering */
  padding: 0;
  box-sizing: border-box;
}

/* If EvoX nested a second .gas-hero inside the first, center that too */
body.ex-name-gassolutions .gas-hero > .gas-hero{
  width: min(1600px, 96vw);
  max-width: 1600px;
}

body.ex-name-gassolutions .gas-hero {
  margin-bottom: 0 !important;
}
body.ex-name-gassolutions .metro-gas-directory {
  margin-top: 0 !important;
  padding-top: 20px !important;
}



/* 11.05        --- Metro Product Page PDP (scoped) ---
---------------------------------------------------------------*/

/* PDP ONLY: remove the “Description” teaser near price */
html:has(.productimage_container) .product-description-in-summary,
html:has(.productimage_container) .product-description-in-summary *{
  display:none !important;
}

/* 1. THE TITLE: Professional Montserrat */
h1.product-name {
    font-family: 'Montserrat', sans-serif !important; /* Re-locking font */
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important; 
    color: #222 !important;
    line-height: 1.2 !important; /* Tighter line height helps vertical space */
    border-bottom: 2px solid #f0f0f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 8px !important; /* REDUCED: Pulls everything below it UP */
}

/* 2. THE ITEM CODE: Clean Neutral Badge */
.product-code-wrapper .product-item-spacing {
    background: #f8f9fa !important;
    color: #666 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border: 1px solid #e0e0e0 !important;
    display: inline-block !important;
}

/* 3. THE PRICE BOX: Lifted Position */
.product-shopping-actions-row {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    padding: 15px 20px !important; /* Slightly slimmer padding */
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 5px !important; /* REDUCED: Lifts the box closer to the title */
    gap: 8px !important;
}

/* 4. PRICE & UNIT TIGHTENING */
span.has-price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #222 !important; 
    display: inline-block !important;
    line-height: 1 !important;
}

/* Pulls the /E or /EA back to the price */
.product-shopping-actions-row .unit-price, 
.product-shopping-actions-row span:not(.has-price) {
    font-size: 16px !important;
    color: #666 !important;
    margin-left: -2px !important; /* Tightened from -5px to look more natural */
    font-weight: 600 !important;
}

/* 5. SECONDARY BUTTONS (Compare/List) */
.product-summary-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    border-top: 1px solid #eee !important;
    padding-top: 12px !important;
}

.product-summary-actions a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-decoration: none !important;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
}

/* 6. GLOBAL LIFT: Close the gap to breadcrumbs */
.row.row-wrapper.product-view-container {
    margin-top: -40px !important; /* Increased lift to pull the "floor" up */
}

/* Pull the price up slightly to align perfectly with the Brand Logo */
.product-shopping-actions-row {
    margin-top: -5px !important; 
    background: #fcfcfc !important; /* Extremely light grey to define the box */
    border-left: 3px solid #0099de !important; /* Adds a branded "accent" line on the left */
}


/* 11.06        --- Metro Gas Directory (scoped) ---
---------------------------------------------------------------*/

.metro-gas-directory{
  --bg: #0b0e14;
  --header-bg: #161b22;
  --card-bg: #2b3138;      /* was #1c2128 (a touch lighter = less harsh contrast) */
  --border: #3b424c;      /* was #30363d (slightly clearer edges) */
  --text-main: #c7d1db;    /* was #adbac7 (easier reading on dark cards) */
  --text-bright: #f0f6fc;
  --blue: #539bf5;
  --flammable: #d73a49;
  --inert: #2ea44f;
  --oxidizer: #f9826c;
  --toxic: #a371f7;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: var(--text-main);
  background: var(--bg);
  padding: 20px;
  box-sizing: border-box;
}
.metro-gas-directory *{ box-sizing: border-box; }

.metro-gas-directory header{ max-width: 1200px; margin: 0 auto 30px; text-align: center; }
.metro-gas-directory h1{ color: var(--text-bright); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; }

.metro-gas-directory #search{
  width: 100%;
  max-width: 700px;
  padding: 15px 25px;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 30px;
  color: var(--text-bright);
  font-size: 16px;
  outline: none;
}

.metro-gas-directory .legend{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  font-size: 13px;
}
.metro-gas-directory .legend-item{ display:flex; align-items:center; gap:8px; font-weight:bold; }
.metro-gas-directory .dot{ width:12px; height:12px; border-radius:2px; }
.metro-gas-directory .dot.flammable{ background:var(--flammable); }
.metro-gas-directory .dot.inert{ background:var(--inert); }
.metro-gas-directory .dot.oxidizer{ background:var(--oxidizer); }
.metro-gas-directory .dot.toxic{ background:var(--toxic); }

.metro-gas-directory .category-section{ max-width:1200px; margin:0 auto 15px; border-radius:4px; overflow:hidden; border:1px solid var(--border); }
.metro-gas-directory .category-header{ padding:15px 25px; background:#21262d; border-bottom:1px solid var(--border); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.metro-gas-directory .category-title{ font-weight:bold; color:var(--text-bright); text-transform:uppercase; font-size:1.1em; }
.metro-gas-directory .header-right{ display:flex; align-items:center; gap:15px; }
.metro-gas-directory .item-count{ font-size:.85em; opacity:.6; }
.metro-gas-directory .toggle-icon{ transition:transform .3s; font-size:.7em; }
.metro-gas-directory .category-header.open .toggle-icon{ transform:rotate(90deg); }
.metro-gas-directory .category-content{ display:none; padding:20px; background:var(--bg); grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:15px; }
.metro-gas-directory .category-content.active{ display:grid; }

.metro-gas-directory .gas-item{
  background:var(--card-bg);
  border-radius:4px;
  border:1px solid var(--border);
  border-left:5px solid #484f58;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:120px;
  overflow:hidden;
}
.metro-gas-directory .gas-item.flammable{ border-left-color:var(--flammable); }
.metro-gas-directory .gas-item.inert{ border-left-color:var(--inert); }
.metro-gas-directory .gas-item.oxidizer{ border-left-color:var(--oxidizer); }
.metro-gas-directory .gas-item.toxic{ border-left-color:var(--toxic); }

.metro-gas-directory .item-content-wrapper{ padding:15px; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.metro-gas-directory .gas-name{ font-weight:bold; color:var(--text-bright); font-size:.95em; }
.metro-gas-directory .un-number{ font-family:monospace; font-size:.8em; background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:3px; }
.metro-gas-directory .item-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.metro-gas-directory .part-code{ font-family:monospace; font-weight:bold; color:var(--blue); background:rgba(83,155,245,.1); padding:4px 10px; border-radius:4px; }
.metro-gas-directory .grade-tag{ font-size:.8em; font-style:italic; opacity:.7; text-align:right; }

/* =========================================================
   Metro Gas Directory — page-match overrides (scoped)
   Paste AFTER existing directory CSS
========================================================= */

/* 1) Blend into the page background (remove “separate section” feel) */
.metro-gas-directory{
  background: transparent;          /* was a solid dark panel */
  padding: 30px 0 60px;             /* less padding at sides; more “page section” */
}

/* If the widget/container on Evo adds white bg/padding, force full-width + reset */
.metro-gas-directory,
.metro-gas-directory *{
  box-sizing: border-box;
}

/* 2) Create a centered content column like the hero/table */
.metro-gas-directory header,
.metro-gas-directory #directory{
  max-width: 1180px;                /* adjust to match hero/table width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* 3) Heading style closer to hero (all caps, tighter, brighter) */
.metro-gas-directory h1{
  font-size: 26px;
  letter-spacing: 3px;
  margin: 0 0 14px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* 4) Legend: match the hero’s subtle “inline controls” vibe */
.metro-gas-directory .legend{
  gap: 18px;
  margin: 10px 0 18px;
  opacity: 0.92;
}
.metro-gas-directory .legend-item{
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 5) Search bar: a bit wider + more “hero control” styling */
.metro-gas-directory #search{
  max-width: 760px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(22,27,34,0.55);  /* translucent like it sits on the smoky bg */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(48,54,61,0.85);
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
}

/* 6) Category bars: a touch more “panel” like hero modules */
.metro-gas-directory .category-section{
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(48,54,61,0.85);
  background: rgba(16,20,26,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
  margin-bottom: 14px;
}

.metro-gas-directory .category-header{
  background: rgba(33,38,45,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px 22px;
}

.metro-gas-directory .category-title{
  font-size: 14px;
  letter-spacing: 1px;
}

/* 7) Content grid: slightly tighter spacing like the hero’s compact layout */
.metro-gas-directory .category-content{
  padding: 18px;
  gap: 12px;
}

/* 8) Gas cards: soften edges / match panels */
.metro-gas-directory .gas-item{
  border-radius: 10px;
  background: rgba(28,33,40,0.78);
  border: 1px solid rgba(48,54,61,0.85);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* 9) Optional: pull the whole directory closer to the hero above it */
.metro-gas-directory{
  margin-top: -18px; /* reduce the big gap between hero and directory */
}

/* 10) Mobile tweaks */
@media (max-width: 768px){
  .metro-gas-directory h1{ font-size: 20px; letter-spacing: 2px; }
  .metro-gas-directory #search{ max-width: 100%; }
  .metro-gas-directory .legend{ flex-wrap: wrap; }
  .metro-gas-directory .category-content{
    grid-template-columns: 1fr; /* single column */
  }
}

/* Improve directory title contrast on white background */
.metro-gas-directory h1{
  color: #1f2933;                 /* dark slate */
  text-shadow: none;              /* remove glow meant for dark bg */
  font-weight: 700;
}

/* Search bar contrast fix */
.metro-gas-directory #search{
  background: #e5e7eb;            /* light neutral gray */
  color: #111827;                 /* readable text */
  border: 1px solid #9ca3af;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Placeholder text */
.metro-gas-directory #search::placeholder{
  color: #6b7280;                 /* readable but subtle */
}

/* Lighten the background BEHIND the tiles */
.metro-gas-directory .category-content{
  background: #f3f4f6;             /* light neutral gray */
  border-top: 1px solid #d1d5db;   /* subtle divider */
  padding: 22px;
}

/* Optional: soften the transition from header to content */
.metro-gas-directory .category-header{
  border-bottom: none;
}

/* Make category color accents visible again */
.metro-gas-directory .gas-item{
  border-left-width: 8px;                  /* thicker */
  border-left-style: solid;
  border-color: rgba(0,0,0,0.18);          /* keep normal border */
}

/* Stronger accent colors + slight glow */
.metro-gas-directory .gas-item.flammable{
  border-left-color: #d73a49;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(215,58,73,0.25);
}
.metro-gas-directory .gas-item.inert{
  border-left-color: #2ea44f;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(46,164,79,0.25);
}
.metro-gas-directory .gas-item.oxidizer{
  border-left-color: #f9826c;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(249,130,108,0.25);
}
.metro-gas-directory .gas-item.toxic{
  border-left-color: #a371f7;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(163,113,247,0.25);
}

/* ===============================
   Restore mix badge + hover overlay
   (SCOPED to Metro directory)
================================ */

/* Ensure cards can be hover targets */
.metro-gas-directory .gas-item{
  position: relative;
  overflow: hidden;
}

/* The small “mix badge” (tooltip chip) */
.metro-gas-directory .gas-item.has-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: #21262d;
  color: #f0f6fc;
  border: 1px solid #539bf5;
  padding: 4px 10px;
  border-radius: 13px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  white-space: normal;
  max-width: 175px;
  text-align: right;

  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* On hover, hide the badge chip */
.metro-gas-directory .gas-item.has-tooltip:hover::after{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Full mix text overlay — hidden by default */
.metro-gas-directory .click-overlay{
  position: absolute;
  inset: 0;
  display: none;                  /* key */
  justify-content: center;
  align-items: center;
  padding: 15px;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5;
  z-index: 20;
  background: rgba(0,0,0,0.30);
  pointer-events: none;           /* so hover stays on the card */
}

/* Show overlay only on hover (and keep click behavior if you use it) */
.metro-gas-directory .gas-item.has-tooltip:hover .click-overlay,
.metro-gas-directory .gas-item.has-tooltip.clicked .click-overlay{
  display: flex;
}

/* Soft divider under hero */
.metro-gas-directory{
  border-top: 2px solid #e5e7eb;
}

/* Pull gas directory up into hero */
#htmlcontent_208371{
  margin-top: 18px;   /* adjust: try -40px to -80px */
}

.metro-gas-directory #directory{
  background: #ffffff;
  border-radius: 22px;
  padding: 36px 32px 40px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.14),
    0 8px 20px rgba(0,0,0,0.10);
  position: relative;
}

.metro-gas-directory #directory::before{
  content:"";
  position:absolute;
  inset:-48px;
  border-radius: 36px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.45) 25%,
      rgba(255,255,255,0.00) 55%
    );
  pointer-events:none;
  z-index:-1;
}

.metro-gas-directory .category-header{
  background: linear-gradient(to bottom, #4a4f57, #3e434b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 24px rgba(0,0,0,0.18);
}

/* Metro accent line under title area */
.metro-gas-directory header{
  position: relative;
  padding-bottom: 10px;
}

.metro-gas-directory header::after{
  content:"";
  display:block;
  width: 300px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(0,153,214,0),
    rgba(0,153,214,0.85),
    rgba(0,153,214,0)
  );
}

.metro-gas-directory::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,170,255,0.6),
    transparent
  );
}

/* Slightly darker / more premium card surface */
.metro-gas-directory .gas-item{
  background: linear-gradient(to bottom, #4a5058 0%, #3f454d 100%);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* --- GLASS HOVER (only for items that actually have tooltip/mix info) --- */
.metro-gas-directory .gas-item.has-tooltip{
  position: relative;
}

/* Put the normal content on layer 1 */
.metro-gas-directory .gas-item.has-tooltip .item-content-wrapper{
  position: relative;
  z-index: 1;
}

/* Glass layer on hover (layer 2) */
.metro-gas-directory .gas-item.has-tooltip::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
  background: rgba(255,255,255,0.06);        /* “frost” */
  backdrop-filter: blur(6px) saturate(120%); /* the actual glass */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  pointer-events:none;
}

/* Turn glass on during hover/clicked */
.metro-gas-directory .gas-item.has-tooltip:hover::before,
.metro-gas-directory .gas-item.has-tooltip.clicked::before{
  opacity: 1;
}

/* Keep the blue part-code badge ABOVE the glass (crisp) */
.metro-gas-directory .gas-item.has-tooltip .part-code{
  position: relative;
  z-index: 5;
}

/* Keep overlay text above glass too */
.metro-gas-directory .gas-item.has-tooltip .click-overlay{
  z-index: 4;                 /* your ref is z-index:20 already, which is fine */
  display: flex;              /* keep it from “jumping” */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

/* Only show the overlay on hover/clicked */
.metro-gas-directory .gas-item.has-tooltip:hover .click-overlay,
.metro-gas-directory .gas-item.has-tooltip.clicked .click-overlay{
  opacity: 1;
  visibility: visible;
}

/* Don’t let the old small tooltip chip fight the overlay */
.metro-gas-directory .gas-item.has-tooltip:hover::after,
.metro-gas-directory .gas-item.has-tooltip.clicked::after{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep product code above the glass overlay */
.metro-gas-directory .gas-item .item-foot{
  position: relative;     /* makes z-index apply */
  z-index: 30;            /* above .click-overlay (20) */
}

.metro-gas-directory .gas-item .part-code{
  position: relative;     /* extra safety */
  z-index: 31;
}

/* (optional) make the overlay more "glass" like, without hiding the badge */
.metro-gas-directory .click-overlay{
  z-index: 20; /* keep as-is from reference */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  background: rgba(0,0,0,0.28); /* keep your look, just tuned */
}

/* ===============================
   FIX hover: blur text only, keep .part-code crisp + on top
   (matches original product-page.html behavior)
================================ */

/* Make sure the card is the stacking context */
.metro-gas-directory .gas-item{
  position: relative;
  overflow: hidden;
}

/* The overlay ("glass") */
.metro-gas-directory .click-overlay{
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}

/* Blur ONLY the header/title area + grade tag (NOT the badge) */
.metro-gas-directory .gas-item.has-tooltip:hover .item-head,
.metro-gas-directory .gas-item.has-tooltip:hover .grade-tag{
  filter: blur(6px);
  opacity: 0.35;
  transition: filter .15s ease, opacity .15s ease;
}

/* IMPORTANT: do NOT blur the whole wrapper */
.metro-gas-directory .gas-item.has-tooltip:hover .item-content-wrapper{
  filter: none !important;
}

/* Keep product code badge above overlay and unblurred */
.metro-gas-directory .part-code{
  position: relative;
  z-index: 60;
  filter: none !important;
  opacity: 1 !important;
}

/* (Optional) if you liked the slight hover “lift” from the original */
.metro-gas-directory .gas-item.has-tooltip:hover .part-code{
  transform: translateY(10.5px);
}

/* ==========================================
   Restore 3-up tile grid (desktop)
   Paste at END so it overrides earlier rules
========================================== */

/* Give the directory a bit more room */
.metro-gas-directory header,
.metro-gas-directory #directory{
  max-width: 1280px;      /* was 1180 */
}

/* Make cards slightly narrower + allow 3 columns */
.metro-gas-directory .category-content{
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important; /* was 350px */
  gap: 14px; /* optional: tighten spacing */
}

/* Optional: if you want them a touch shorter like the original */
.metro-gas-directory .gas-item{
  min-height: 110px; /* was 120px */
}

/* Responsive: fall back to 2 columns sooner */
@media (max-width: 1024px){
  .metro-gas-directory .category-content{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  }
}
@media (max-width: 768px){
  .metro-gas-directory .category-content{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================
   Shorten hover glass overlay
   (leave product code visible)
========================================= */

.metro-gas-directory .click-overlay{
  top: 0;
  left: 0;
  right: 0;
  bottom: 42px;                 /* <<< key line — adjust if needed */
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px 18px;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.95em;
  line-height: 1.5;
  z-index: 20;
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Show overlay only on hover */
.metro-gas-directory .gas-item.has-tooltip:hover .click-overlay{
  display: flex;
}

/* =========================================================
   FINAL hover glass: fades out before the product code
   - Glass blur lives on ::before (short + masked)
   - Text lives on .click-overlay (no blur)
========================================================= */

.metro-gas-directory .gas-item.has-tooltip{
  position: relative;
  overflow: hidden;
}

/* 1) The GLASS layer (short + fades out) */
.metro-gas-directory .gas-item.has-tooltip::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  bottom: 44px;                 /* adjust to clear the part-code row */
  z-index: 10;
  opacity: 0;
  transition: opacity .18s ease;

  /* the "dark glass" look */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.22) 65%,
    rgba(0,0,0,0.00) 100%
  );

  /* the actual glass */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

  /* IMPORTANT: mask fade (prevents blur from visually "hard stopping") */
  -webkit-mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);

  pointer-events:none;
}

/* Turn glass on during hover/clicked */
.metro-gas-directory .gas-item.has-tooltip:hover::before,
.metro-gas-directory .gas-item.has-tooltip.clicked::before{
  opacity: 1;
}

/* 2) The overlay TEXT layer (no blur here) */
.metro-gas-directory .gas-item.has-tooltip .click-overlay{
  position:absolute;
  left:0; right:0; top:0;
  bottom: 44px;                 /* must match ::before */
  z-index: 20;

  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  text-align: center;

  background: none;             /* glass handled by ::before */
  pointer-events:none;
}

.metro-gas-directory .gas-item.has-tooltip:hover .click-overlay,
.metro-gas-directory .gas-item.has-tooltip.clicked .click-overlay{
  display: flex;
}

/* 3) Keep product code always above everything */
.metro-gas-directory .gas-item .item-foot{
  position: relative;
  z-index: 50;
}

.metro-gas-directory .gas-item .part-code{
  position: relative;
  z-index: 51;
}

/* Optional: hide the small chip when the full overlay shows */
.metro-gas-directory .gas-item.has-tooltip:hover::after,
.metro-gas-directory .gas-item.has-tooltip.clicked::after{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================
   GLOBAL tile hover (safe with mix overlay)
   - Adds subtle lift + shadow on ALL tiles
   - Does NOT affect your has-tooltip overlay logic
========================================= */

.metro-gas-directory .gas-item{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.metro-gas-directory .gas-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.18);
}

/* Optional: slightly stronger on mix tiles without breaking overlay */
.metro-gas-directory .gas-item.has-tooltip:hover{
  box-shadow: 0 16px 30px rgba(0,0,0,0.22);
}

/* 11.07 – INDUSTRIES PAGE
---------------------------------------------------------------*/

body[class*="ex-name-industries"] ol#breadcrumb.breadcrumb {
  display: none !important;
}

/* 11.08 – Content / Landing Pages (campaign blocks, hero variants)
---------------------------------------------------------------*/

/* 11.09 – Misc Utilities (one-off helpers that don't belong elsewhere)
---------------------------------------------------------------*/

/* 11.10 – Account / Customer Portal (dashboard, invoices, etc.)
---------------------------------------------------------------*/


/* ======================================================================*/
/* ======================================================================*/
/* ======================================================================
   METRO MEGA MENU REDESIGN — v3
   ...
   ====================================================================== */

:root {
  /* ============ UNCHANGED — middle column + helper card ============ */
  --mw-blue:       #2a9fd6;
  --mw-blue-dark:  #1a7db0;
  --mw-blue-mid:   #248fc2;
  --mw-blue-tint:  #eaf4fa;        /* warmed from #f0f7fb */
  --mw-blue-tint2: #f3f8fb;        /* warmed from #f5f9fc */
  --mw-card-bg:    #f6f9fb;        /* warmed from #f8fafb */
  --mw-card-bd:    #dce7ee;        /* warmed from #e8eff3 */
  --mw-text-muted: #6b7280;
  --mw-text-label: #1a7db0;

  /* ============ NEW — dark sidebar tokens (footer-matched) ============ */
  --mw-sb-bg:        #2d3438;      /* footer charcoal */
  --mw-sb-bg-active: #24292c;      /* slightly darker for active item */
  --mw-sb-bg-hover:  rgba(255,255,255,0.06);
  --mw-sb-text:      #c8ccce;      /* readable light-gray on dark */
  --mw-sb-text-hover:#ffffff;
  --mw-sb-text-active:#2a9fd6;     /* brand blue on active */
  --mw-sb-accent:    #2a9fd6;      /* left border on active */
  --mw-sb-seam:      inset -1px 0 0 rgba(0,0,0,0.4);  /* subtle edge between dark & light */
}

/* ============================================================
   SECTION 1 — Left sidebar (REWRITTEN for dark theme)
   ============================================================ */

/* The outer column itself — paint it dark */
ul.cd-dropdown-content {
  background: var(--mw-sb-bg) !important;
  box-shadow: var(--mw-sb-seam) !important;
}

/* Default state for category items */
.mw-topnav ul.cd-dropdown-content > li.mw-cat > a {
  color: var(--mw-sb-text) !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  padding-left: 15px !important;   /* adjust to your existing padding minus 3 */
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover state */
.mw-topnav ul.cd-dropdown-content > li.mw-cat:hover > a {
  color: var(--mw-sb-text-hover) !important;
  background: var(--mw-sb-bg-hover) !important;
}

/* Active state — uses :has() + class fallbacks from your v3 */
.mw-topnav ul.cd-dropdown-content > li.mw-cat.active > a,
.mw-topnav ul.cd-dropdown-content > li.mw-cat.is-active > a,
.mw-topnav ul.cd-dropdown-content > li.mw-cat.hover > a,
.mw-topnav ul.cd-dropdown-content > li.mw-cat:has(> ul.cd-secondary-dropdown:not(.is-hidden)) > a {
  color: var(--mw-sb-text-active) !important;
  background: var(--mw-sb-bg-active) !important;
  border-left-color: var(--mw-sb-accent) !important;
  font-weight: 500;
}

/* Chevron (the › on right side of sidebar items) — if styled by a pseudo-element,
   adjust this selector to match yours. If EvoX draws it via ::after on the <a>: */
.mw-topnav ul.cd-dropdown-content > li.mw-cat > a::after {
  color: var(--mw-sb-text) !important;      /* muted on dark */
  opacity: 0.5;
}
.mw-topnav ul.cd-dropdown-content > li.mw-cat:has(> ul.cd-secondary-dropdown:not(.is-hidden)) > a::after {
  color: var(--mw-sb-text-active) !important;
  opacity: 1;
}


/* ----------------------------------------------------------------------
   2. MIDDLE COLUMN — gas link hover states
   ---------------------------------------------------------------------- */

.cd-secondary-dropdown li.mw-gas-link > a {
  display: block !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  transition: background 0.15s ease, color 0.12s ease !important;
}

.cd-secondary-dropdown li.mw-gas-link > a:hover {
  background: var(--mw-blue-tint) !important;
  color: var(--mw-blue-dark) !important;
}

.cd-secondary-dropdown li.mw-popular > a {
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------------
   3. SUB-CATEGORY HEADERS — hook for later
   ---------------------------------------------------------------------- */

.cd-secondary-dropdown li.mw-subcat > a {
  /* intentionally empty for now */
}

/* ----------------------------------------------------------------------
   4. RIGHT-ZONE — Gas Directory helper card + CTA button
   ---------------------------------------------------------------------- */

@media (min-width: 1220px) {

  /* --- Wide-label categories (Industrial Mixture, Specialty Mixes, etc.)
         Forces consistent column widths so hover pills paint full cells
         and rows align across columns. Tag the parent <li class="mw-cat">
         in EvoX with "mw-wide-labels" to opt in. --- */

/* --- Wide-label categories — gas grid only, no helper card --- */

.mw-cat.mw-wide-labels ul.cd-secondary-dropdown {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
}

.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-gas-link {
  flex: 0 0 auto !important;
  width: 210px !important;
  box-sizing: border-box;
}

.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-gas-link > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Force the helper card into its own column */
.mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-right-zone-wrap {
  break-before: column !important;
  page-break-before: always !important;  /* legacy fallback */
}
  
  /* Spacer item — completely invisible, no border, no interaction */
.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-column-break {
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 500px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;   /* explicit kill of the @media rule */
  overflow: hidden !important;
  list-style: none !important;
}

.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-column-break,
.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-column-break * {
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-column-break a,
.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-column-break a:hover,
.mw-topnav .mw-cat.mw-wide-labels .cd-secondary-dropdown li.mw-column-break a:focus {
  pointer-events: none !important;
  cursor: default !important;
  border: 0 !important;
}
  
  /* --- Right-zone (helper card column) --- */
  
  .cd-secondary-dropdown li.mw-right-zone-wrap {
    order: 99;
    flex: 0 0 auto !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    align-self: flex-start !important;
    padding: 12px 0 !important;
    box-sizing: border-box;
  }

  .cd-secondary-dropdown li.mw-right-zone-wrap > a {
    display: none !important;
  }

  .mw-right-zone {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* --- Most Ordered (legacy styles, kept in case we reintroduce) --- */

  .mw-most-ordered {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .mw-zone-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mw-text-label);
    margin-bottom: 4px;
    padding: 0 8px;
  }

  .mw-product-card {
    display: block !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.15s ease;
  }

  .mw-product-card:hover {
    background: var(--mw-blue-tint) !important;
  }

  .mw-product-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
  }

  .mw-product-card:hover .mw-product-name {
    color: var(--mw-blue-dark);
  }

  .mw-product-desc {
    display: block;
    font-size: 11px;
    color: var(--mw-text-muted);
    line-height: 1.3;
  }

  /* --- Helper card (Gas Directory feature) --- */

  .mw-helper-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px !important;
    background: var(--mw-card-bg) !important;
    border: 1px solid var(--mw-card-bd) !important;
    border-left: 3px solid var(--mw-blue) !important;
    border-radius: 6px !important;
    color: #1f2937 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    margin-bottom: 10px;
  }

  .mw-helper-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mw-blue) !important;
    margin-bottom: 8px !important;
  }

  .mw-helper-body {
    color: #4b5563 !important;
    margin: 0 0 10px 0 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .mw-helper-body p {
    margin: 0 0 8px 0 !important;
    color: #4b5563 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* --- Bullet list (using divs to avoid EvoX's auto-applied .is-hidden
         on <ul> elements inside the menu tree) --- */

  .mw-helper-card .mw-helper-list {
    margin: 0 0 10px 0;
    padding: 0;
  }

  .mw-helper-card .mw-helper-item {
    position: relative;
    padding: 2px 0 2px 14px;
    margin: 0;
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.4;
  }

  .mw-helper-card .mw-helper-item::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--mw-blue);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
  }

  /* --- Phone line --- */

  .mw-helper-phone {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding-top: 8px !important;
    border-top: 1px solid var(--mw-card-bd);
    font-size: 12px !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
  }

  .mw-helper-phone:hover {
    color: var(--mw-blue) !important;
  }

  .mw-helper-phone strong {
    color: var(--mw-blue) !important;
    font-weight: 700 !important;
  }

  .mw-phone-icon {
    font-size: 13px !important;
    opacity: 0.9;
    flex-shrink: 0;
  }

  /* --- CTA button --- */

  .cd-secondary-dropdown li.mw-right-zone-wrap a.mw-cta-btn-link {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    background: var(--mw-blue) !important;
    color: #ffffff !important;
    text-align: center !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }

  .cd-secondary-dropdown li.mw-right-zone-wrap a.mw-cta-btn-link .mw-cta-arrow {
    display: inline-block !important;
    margin-left: 4px !important;
    transition: transform 0.15s ease;
  }

  .cd-secondary-dropdown li.mw-right-zone-wrap a.mw-cta-btn-link:hover {
    background: var(--mw-blue-mid) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
    transform: translateY(-1px);
  }

  .cd-secondary-dropdown li.mw-right-zone-wrap a.mw-cta-btn-link:hover .mw-cta-arrow {
    transform: translateX(2px);
  }

}

/* ----------------------------------------------------------------------
   5. MOBILE — hide desktop-only right-zone content
   ---------------------------------------------------------------------- */

.header-mobile .mw-helper-card {
  display: none !important;
}

.mw-topnav ul.cd-dropdown-content > li.mw-cat {
  border-bottom: none !important;
  border-top: none !important;
}

/* ---- Blue frame around the whole dropdown, for definition on dark pages ---- */
nav.cd-dropdown {
  border: 1px solid var(--mw-blue) !important;
}

.mw-topnav ul.cd-dropdown-content > li.mw-cat > a {
  letter-spacing: 0.02em;  /* very subtle */
}

/* ============================================================
   MEGA MENU WIDTH LOCK — overrides EvoX's JS-calculated inline width
   on the dropdown panel. EvoX writes `style="width: ..."` to 
   ul.cd-secondary-dropdown based on its own calculation, which gets
   thrown off when the top-nav item count changes.
   
   Original width with 6 nav items: 690.625px
   After adding "Our Brands" (7 items): 856px (broken layout)
   Lock to original to restore the intended gas grid + helper card layout.
   ============================================================ */
@media (min-width: 1220px) {
  .mw-topnav ul.cd-secondary-dropdown {
    width: 690px !important;
  }
}

/* ======================================================================
   END METRO MEGA MENU REDESIGN — v3
   ====================================================================== */

/* ============================================================
   Breadcrumb styling — Option B (zone only, no pill)
   evoX doesn't render the current page into the breadcrumb DOM,
   so we skip the pill to avoid highlighting the wrong thing.
   The page's <h1> heading serves as the "you are here" indicator.
   ============================================================ */

/* Outer wrapper — no background, just spacing */
.breadcrumbs_container {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Inner container gets the zone background, respects page width */
.breadcrumbs_container .inner {
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
}

/* The <ol> */
.breadcrumbs_container ol.breadcrumb,
ol#breadcrumb.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    font-size: 14px !important;
    font-family: var(--font-sans, inherit) !important;
    -webkit-font-smoothing: antialiased;
}

/* Individual crumbs */
.breadcrumbs_container ol.breadcrumb li {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

/* Replace evoX's default separator with a cleaner chevron */
.breadcrumbs_container ol.breadcrumb li + li::before {
    content: '›' !important;
    color: #D1D5DB !important;
    margin: 0 10px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* First crumb — no separator before it */
.breadcrumbs_container ol.breadcrumb li.breadcrumb_home::before,
.breadcrumbs_container ol.breadcrumb li:first-child::before {
    content: none !important;
    display: none !important;
}

/* Hide evoX's invisible chevron-left icon inside Home link */
.breadcrumbs_container ol.breadcrumb li.breadcrumb_home i,
.breadcrumbs_container ol.breadcrumb li.breadcrumb_home .fa {
    display: none !important;
}

/* Hide the truncation ellipsis element when evoX flags it hidden */
.breadcrumbs_container ol.breadcrumb li.short_breadcrumb_link.hide {
    display: none !important;
}

/* Crumb links */
.breadcrumbs_container ol.breadcrumb li a {
    color: #00A6D6 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 4px 0 !important;
    transition: color 0.15s ease !important;
    background: transparent !important;
}

.breadcrumbs_container ol.breadcrumb li a:hover {
    color: #0B86A8 !important;
    text-decoration: underline !important;
}

/* ============================================================================
   METRO WELDING - PUBLIC PRICING GATE
   ============================================================================
   PURPOSE: Hide all pricing, Add to Cart, and cart-related UI from anonymous
            (non-logged-in) visitors. Logged-in customers see EvoX's native
            behavior (their negotiated pricing, "Call for price" for off-file
            products). Preview mode bypasses the gate for testing.

   STATES:
     1. Anonymous visitor → all pricing hidden, "Call for price" shown
     2. Logged-in customer → EvoX native behavior (real pricing)
     3. Preview mode      → gate disabled, raw ERP output visible

   HOW IT WORKS:
     - EvoX adds .account-btn.logged-out or .account-btn.logged-in to the
       account button on every page. We use :has() to detect login state
       at the body level without any JS.
     - The companion footer JS adds .mw-preview-mode to <body> when the
       ?preview=mwtest token is active in sessionStorage.

   TO REMOVE WHEN ECOMMERCE IS FULLY LAUNCHED:
     - Delete this entire block from Global CSS
     - Delete the companion JS from the global footer
   ============================================================================ */


/* ---- 1. ANONYMOUS USER: hide pricing, cart, and add-to-cart elements ---- */

body:has(.account-btn.logged-out):not(.mw-preview-mode) .has-price,
body:has(.account-btn.logged-out):not(.mw-preview-mode) .price-label,
body:has(.account-btn.logged-out):not(.mw-preview-mode) .price-area .price-label,
body:has(.account-btn.logged-out):not(.mw-preview-mode) .buttons.group,
body:has(.account-btn.logged-out):not(.mw-preview-mode) .product-shopping-actions-prices,
body:has(.account-btn.logged-out):not(.mw-preview-mode) [id^="minicart_"] {
  display: none !important;
}


/* ---- 2. ANONYMOUS USER: force "Call for price" block visible ---- */
/* If EvoX renders a .price-call block, show it even when it would normally
   be hidden. Note: this only works if the block exists in the DOM. If it
   doesn't exist for a given product, the price slot will just be empty
   (the cart button is still hidden, so the UX is still safe). */

body:has(.account-btn.logged-out):not(.mw-preview-mode) .price-call,
body:has(.account-btn.logged-out):not(.mw-preview-mode) .live-pricing-fallback-option-callforprice {
  display: block !important;
}


/* ---- 3. ALWAYS: hide the $0.00 ERP bug regardless of state ---- */
/* When the ERP returns data-value="0" instead of a proper "no price"
   response, hide it so $0.00 never displays. Safety net for the bug
   while the ERP vendor fixes the API. */

.price-label.has-price[data-value="0"],
span.has-price[data-value="0"] {
  display: none !important;
}


/* ---- 4. PREVIEW MODE: indicator badge ---- */
/* Tiny persistent indicator so you (or the ERP vendor) always know that
   preview mode is active and what you're seeing isn't the public view.
   Click the X on the badge to exit preview mode. */

body.mw-preview-mode::before {
  content: "PREVIEW MODE — Public visitors do NOT see this";
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: #f59e0b;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 999999;
  pointer-events: none;
}


/* ---- 5. BROWSER COMPATIBILITY NOTE ----
   :has() requires Chrome 105+, Safari 15.4+, Firefox 121+ (all released
   before 2024). Older browsers will fail gracefully — they just won't
   apply the gating, defaulting to EvoX's native behavior. Acceptable
   trade-off given <1% of B2B users are on outdated browsers. */