/*
Theme Name: VM Machines
Theme URI: https://vmmachines.com/
Description: VM Machines premium presentation theme built on top of free Hello Elementor, with the approved Idea 1 product mega menu and built-in header menu editor.
Author: VM Machines
Version: 2.0.1
Template: hello-elementor
Text Domain: vm-machines
*/
:root{--vm-blue:#1268c9;--vm-blue-dark:#0b4f9e;--vm-text:#17243a;--vm-muted:#68758a;--vm-border:#dfe6ef;--vm-container:1280px}html{scroll-behavior:smooth}body{color:var(--vm-text);background:#fff}a{color:inherit}.vm-container{width:min(100% - 40px,var(--vm-container));margin-inline:auto}.vm-site-header{position:relative;z-index:1000;background:rgba(255,255,255,.98);border-bottom:1px solid #e7ebf1;box-shadow:0 2px 12px rgba(15,35,65,.045)}
.vm-header-inner{min-height:74px;display:flex;align-items:center;gap:22px}
.vm-brand{flex:0 0 auto;display:inline-flex;align-items:center;text-decoration:none;line-height:0;padding:3px 0}
.vm-brand{min-width:0}.vm-brand .custom-logo-link{display:inline-flex;align-items:center;line-height:0;text-decoration:none}.vm-brand .custom-logo{display:block;width:auto;max-width:150px;max-height:40px;height:auto;object-fit:contain}
.vm-brand-text{font-size:23px;font-weight:800;letter-spacing:-.7px;color:#173f76}
.vm-main-nav{flex:1 1 auto;display:flex;justify-content:flex-end;align-self:stretch}
.vm-main-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;height:100%}
.vm-main-menu>li{height:100%;display:flex;align-items:center;position:relative}
.vm-main-menu>li>a,.vm-menu-toggle{position:relative;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:0;border-radius:7px;background:transparent;color:#14233b;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:color .18s ease,background .18s ease}
.vm-main-menu>li>a:hover,.vm-menu-toggle:hover{color:#1268c9;background:#f5f8fc}
.vm-main-menu>li>a::after,.vm-products-item>.vm-menu-toggle::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;border-radius:2px;background:#1268c9;transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.vm-main-menu>li>a:hover::after{transform:scaleX(1)}
.vm-products-item{position:static}
.vm-products-item.is-open>.vm-menu-toggle,.vm-products-item:hover>.vm-menu-toggle,.vm-products-item:focus-within>.vm-menu-toggle{color:#1268c9;background:#f3f7fc}
.vm-products-item.is-open>.vm-menu-toggle::after,.vm-products-item:hover>.vm-menu-toggle::after,.vm-products-item:focus-within>.vm-menu-toggle::after{transform:scaleX(1)}
.vm-menu-arrow{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.vm-products-item.is-open .vm-menu-arrow,.vm-products-item:hover .vm-menu-arrow,.vm-products-item:focus-within .vm-menu-arrow{transform:rotate(225deg) translate(-1px,-1px)}
.vm-header-search{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;border-left:1px solid #e5e9ef;color:#16253d;text-decoration:none}
.vm-header-search svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.vm-header-search:hover{color:#1268c9}
.vm-quote-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 19px;border-radius:8px;background:linear-gradient(135deg,#b70e25,#d51a35);color:#fff!important;font-size:13.5px;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(183,14,37,.16);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.vm-quote-button:hover{background:linear-gradient(135deg,#a50d22,#c9152d);transform:translateY(-1px);box-shadow:0 8px 19px rgba(183,14,37,.2)}
.vm-quote-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px}
.vm-quote-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.vm-mobile-toggle{display:none;margin-left:auto;width:42px;height:42px;border:1px solid #dfe6ef;border-radius:8px;background:#fff;cursor:pointer}
.vm-mobile-toggle span,.vm-mobile-toggle::before,.vm-mobile-toggle::after{content:"";display:block;width:19px;height:2px;margin:4px auto;background:#1268c9;border-radius:2px}

/* Idea 1 — compact category-first mega menu */
.vm-products-item { position: static; }

.vm-mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    width: min(1080px, calc(100vw - 36px));
    transform: translateX(-50%);
    display: none;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 1001;
}

.vm-products-item.is-open .vm-mega-menu { display: block; }

.vm-mega-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid var(--vm-border);
    border-top: 1px solid var(--vm-border);
    transform: translateX(-50%) rotate(45deg);
}

.vm-mega-inner {
    position: relative;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    height: 370px;
    overflow: hidden;
    border: 1px solid var(--vm-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(18, 59, 120, .16);
}

.vm-mega-categories {
    min-width: 0;
    padding: 9px;
    background: #f8fafc;
    border-right: 1px solid var(--vm-border);
    overflow-y: auto;
    scrollbar-width: thin;
}

.vm-mega-category {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    margin: 1px 0;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #17243a;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.vm-mega-category:hover,
.vm-mega-category.is-active {
    color: #fff;
    background: #1268c4;
}

.vm-mega-category-thumb {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
}

.vm-mega-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-mega-category-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.vm-mega-category-arrow {
    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.vm-mega-products {
    min-width: 0;
    padding: 18px 20px;
    overflow: hidden;
}

.vm-mega-panel { height: 100%; }

.vm-mega-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

.vm-mega-heading h3 {
    margin: 0;
    color: #14233b;
    font-size: 18px;
    line-height: 1.25;
}

.vm-mega-heading p {
    margin: 3px 0 0;
    color: var(--vm-muted);
    font-size: 11px;
}

.vm-mega-view-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0d61b6;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.vm-mega-view-all:hover { text-decoration: underline; }

.vm-mega-main-grid { display: block; }

.vm-mega-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.vm-mega-product {
    position: relative;
    min-width: 0;
    height: 235px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--vm-border);
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.vm-mega-product:hover,
.vm-mega-product:focus-visible {
    transform: translateY(-2px);
    border-color: #b9d2ed;
    box-shadow: 0 9px 22px rgba(18, 70, 120, .11);
}

.vm-mega-product-image {
    height: 166px;
    flex: 0 0 166px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f7f9fb;
}

.vm-mega-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.vm-mega-product-name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 7px 25px;
    color: #17243a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.vm-mega-product-cta {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translate(-50%, 6px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #1268c4;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.vm-mega-product:hover .vm-mega-product-cta,
.vm-mega-product:focus-visible .vm-mega-product-cta {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vm-mega-product:focus-visible { outline: 2px solid #1268c4; outline-offset: 2px; }

.vm-mega-promo { display: none !important; }

.vm-site-main{min-height:55vh}.vm-site-footer{margin-top:60px;padding:48px 0 24px;background:#0d2446;color:#fff}.vm-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}.vm-footer-title{margin:0 0 12px;font-size:16px;font-weight:800}.vm-footer-text,.vm-footer-list{color:rgba(255,255,255,.76);font-size:13px;line-height:1.7}.vm-footer-list{list-style:none;margin:0;padding:0}.vm-footer-list li+li{margin-top:6px}.vm-footer-list a{color:inherit;text-decoration:none}.vm-footer-list a:hover{color:#fff}.vm-footer-bottom{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.62);font-size:12px}.vm-elementor-content{width:100%}

.vm-product-category-page{padding:44px 0 70px;background:#fff}
.vm-category-breadcrumb{margin-bottom:14px;color:var(--vm-muted);font-size:12px}
.vm-category-breadcrumb a{color:#1768c7;text-decoration:none}
.vm-category-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.vm-category-hero h1{margin:0;color:#122342;font-size:34px;line-height:1.15}
.vm-category-count{margin:8px 0 0;color:var(--vm-muted);font-size:14px}
.vm-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vm-category-card{overflow:hidden;border:1px solid var(--vm-border);border-radius:12px;background:#fff;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.vm-category-card:hover{transform:translateY(-3px);border-color:#c7d8eb;box-shadow:0 12px 28px rgba(18,70,120,.10)}
.vm-category-card-image{aspect-ratio:1.25/1;display:grid;place-items:center;background:#f6f9fc;overflow:hidden}
.vm-category-card-image img{width:100%;height:100%;object-fit:contain}
.vm-category-card-body{padding:13px 14px 15px}
.vm-category-card-body h2{margin:0;color:#17243a;font-size:15px;line-height:1.3}
.vm-category-card-body span{display:inline-block;margin-top:8px;color:#1768c7;font-size:12px;font-weight:800}
.vm-category-empty{padding:35px;border:1px dashed var(--vm-border);border-radius:12px;color:var(--vm-muted);text-align:center}
@media (max-width:900px){.vm-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vm-category-hero{align-items:flex-start;flex-direction:column}}
@media (max-width:600px){.vm-category-grid{grid-template-columns:1fr}.vm-category-hero h1{font-size:28px}}
@media (min-width:901px){.vm-products-item:hover .vm-mega-menu,.vm-products-item:focus-within .vm-mega-menu,.vm-mega-menu:hover{display:block}}@media (max-width:1150px){.vm-header-inner{gap:10px}.vm-main-menu>li>a,.vm-menu-toggle{padding-inline:9px;font-size:13px}.vm-mega-inner{grid-template-columns:285px minmax(0,1fr)}.vm-mega-main-grid{grid-template-columns:minmax(0,1fr) 220px}.vm-mega-product{grid-template-columns:85px minmax(0,1fr)}.vm-mega-product-image{width:82px;height:80px}}@media (max-width:900px){.vm-container{width:min(100% - 28px,var(--vm-container))}.vm-main-nav,.vm-quote-button{display:none}.vm-mobile-toggle{display:block}.vm-main-nav.is-mobile-open{position:absolute;top:100%;inset-inline:0;display:block;padding:10px 14px 16px;background:#fff;border-top:1px solid var(--vm-border);box-shadow:0 18px 35px rgba(15,23,42,.12)}.vm-main-nav.is-mobile-open .vm-main-menu{display:block}.vm-main-menu>li>a,.vm-menu-toggle{width:100%;justify-content:space-between;min-height:48px}.vm-mega-menu{position:static;padding:8px 0;box-shadow:none;border:0}.vm-mega-inner{grid-template-columns:1fr;height:auto;min-height:0}.vm-mega-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:250px;border-right:0;border-bottom:1px solid var(--vm-border)}.vm-mega-products{padding:14px}.vm-mega-main-grid{grid-template-columns:1fr}.vm-mega-promo{min-height:240px}.vm-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.vm-brand .custom-logo{max-width:130px;max-height:34px}.vm-mega-categories{grid-template-columns:1fr;max-height:260px}.vm-mega-product-grid{grid-template-columns:1fr}.vm-mega-product{grid-template-columns:105px minmax(0,1fr)}.vm-mega-heading{align-items:flex-start;flex-direction:column;gap:5px}.vm-footer-grid{grid-template-columns:1fr}}

/* V1.6 visual override: compact, premium Idea 1 */
@media (min-width: 901px) {
  .vm-mega-menu { padding: 8px 0 14px; }
  .vm-mega-inner { grid-template-columns: 300px minmax(0,1fr); height: 420px; border-radius: 16px; }
  .vm-mega-categories { padding: 12px 10px; }
  .vm-mega-category { min-height: 47px; margin-bottom: 4px; padding: 5px 9px; grid-template-columns: 38px minmax(0,1fr) 14px; }
  .vm-mega-category-thumb { width: 36px; height: 36px; border-radius: 8px; }
  .vm-mega-category-name { font-size: 12px; }
  .vm-mega-products { padding: 18px 18px 16px; }
  .vm-mega-heading { margin-bottom: 12px; }
  .vm-mega-heading h3 { font-size: 19px; }
  .vm-mega-main-grid { grid-template-columns: minmax(0,1fr) 205px; gap: 14px; height: calc(100% - 51px); }
  .vm-mega-product-grid { gap: 10px; }
  .vm-mega-product { grid-template-columns: 40% minmax(0,1fr); min-height: 0; padding: 6px; }
  .vm-mega-product-image { width: 100%; height: 100%; min-height: 78px; }
  .vm-mega-product-name { padding: 8px 9px 32px; font-size: 12px; }
  .vm-mega-product-cta { right: 8px; bottom: 7px; }
  .vm-mega-promo { min-height: 0; padding: 17px; border-radius: 12px; }
  .vm-mega-promo h4 { font-size: 18px; }
  .vm-mega-promo p { font-size: 11px; margin-top: 8px; }
  .vm-mega-promo-image { height: 112px; }
  .vm-mega-promo-image img { max-height: 112px; }
  .vm-mega-promo-button { padding: 9px 13px; font-size: 11px; }
}

@media (max-width: 1180px){
    .vm-header-inner{gap:12px}
    .vm-brand .custom-logo{max-width:130px;max-height:34px}
    .vm-main-menu>li>a,.vm-menu-toggle{padding-inline:9px;font-size:13px}
    .vm-main-menu>li>a::after,.vm-products-item>.vm-menu-toggle::after{left:9px;right:9px}
    .vm-quote-button{padding-inline:15px}
}

@media (max-width: 1100px) {
    .vm-mega-menu { width: min(980px, calc(100vw - 28px)); }
    .vm-mega-inner { grid-template-columns: 245px minmax(0, 1fr); }
    .vm-mega-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .vm-mega-product { height: 225px; }
    .vm-mega-product-image { height: 155px; flex-basis: 155px; }
}
@media (max-width: 900px) {
    .vm-mega-menu {
        position: static;
        width: auto;
        transform: none;
        margin: 5px 0 0;
    }
    .vm-mega-menu::before { display: none; }
    .vm-mega-inner {
        grid-template-columns: 1fr;
        height: auto;
        max-height: calc(100vh - 145px);
    }
    .vm-mega-categories {
        max-height: 210px;
        border-right: 0;
        border-bottom: 1px solid var(--vm-border);
    }
    .vm-mega-products { overflow-y: auto; }
    .vm-mega-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .vm-mega-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vm-mega-product { height: 190px; }
    .vm-mega-product-image { height: 125px; flex-basis: 125px; }
}


/* Elementor / WordPress compatibility */
.admin-bar .vm-site-header { margin-top: 0; }
.vm-page-content { width: 100%; }
.vm-page-content > article { width: 100%; }
.elementor-editor-active .vm-mega-menu { pointer-events: auto; }