/* =========================================================
   v2.2.6 — Mobile Professional View
   Fixes the large white mobile overlay/blank area and calms the
   mobile hero so the first screen looks clean and premium.
   ========================================================= */

@media (max-width: 900px) {
  /* Closed mobile navigation must not reserve space or cover the hero. Older
     off-canvas rules kept the drawer in the viewport and could create a large
     white panel above the hero on some mobile Chrome/Admin Bar combinations. */
  .vlg-nav:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-110%) !important;
  }

  .vlg-nav.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 112px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(68dvh, 540px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    border: 1px solid rgba(216, 226, 238, .98) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 24px 70px rgba(7, 18, 36, .22) !important;
    backdrop-filter: blur(12px) saturate(140%);
    z-index: 5000 !important;
  }

  body.admin-bar .vlg-nav.is-open {
    top: calc(var(--wp-admin--admin-bar--height, 46px) + 112px) !important;
    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px) - 126px) !important;
  }

  .vlg-nav.is-open .vlg-nav-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 12px !important;
    margin: 0 !important;
  }

  .vlg-nav.is-open .vlg-category-menu,
  .vlg-nav.is-open .vlg-category-button,
  .vlg-nav.is-open .vlg-primary-menu {
    width: 100% !important;
    min-width: 0 !important;
  }

  .vlg-nav.is-open .vlg-category-button {
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 0 15px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .vlg-nav.is-open .vlg-primary-menu {
    display: grid !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .vlg-nav.is-open .vlg-primary-menu > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    text-decoration: none !important;
  }

  .vlg-nav.is-open .vlg-primary-menu > li.current-menu-item > a,
  .vlg-nav.is-open .vlg-primary-menu > li > a:hover,
  .vlg-nav.is-open .vlg-primary-menu > li > a:focus-visible {
    background: #fff7ed !important;
    color: #c76300 !important;
  }

  .vlg-nav.is-open .vlg-category-dropdown {
    position: static !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-height: min(52dvh, 420px) !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    overflow: auto !important;
    border: 1px solid rgba(216, 226, 238, .95) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .vlg-nav.is-open .vlg-category-menu.is-open .vlg-category-dropdown,
  .vlg-nav.is-open .vlg-category-button[aria-expanded="true"] + .vlg-category-dropdown {
    display: block !important;
  }

  .vlg-nav.is-open .vlg-cat-dropdown-list a,
  .vlg-nav.is-open .vlg-category-dropdown a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .vlg-mobile-backdrop:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    background: rgba(7, 18, 36, .28) !important;
    z-index: 4990 !important;
  }
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body.vlg-theme,
  body {
    background: #f5f7fb !important;
  }

  .vlg-site-header {
    margin-bottom: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .07) !important;
  }

  .vlg-main-header {
    background: #fff !important;
  }

  .vlg-main-header-inner {
    width: min(100% - 18px, var(--vlg-container, 1320px)) !important;
    min-height: 58px !important;
    padding-top: 5px !important;
    padding-bottom: 7px !important;
    gap: 7px !important;
  }

  .vlg-header-brand-row {
    min-width: 0 !important;
  }

  .vlg-mobile-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid #dbe5f1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05) !important;
  }

  .vlg-brand .custom-logo,
  .custom-logo {
    max-width: 150px !important;
    max-height: 34px !important;
  }

  .vlg-cart-link {
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .vlg-header-search {
    grid-column: 1 / -1 !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
  }

  .vlg-search {
    min-height: 40px !important;
    padding: 3px 4px 3px 11px !important;
    border-radius: 14px !important;
    border-color: #dfe7f1 !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .045) !important;
  }

  .vlg-search input[type="search"] {
    height: 30px !important;
    font-size: 13px !important;
  }

  .vlg-search button {
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  .vlg-home,
  main.vlg-home,
  .site-main.vlg-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .vlg-home > .vlg-container,
  .site-main.vlg-home > .vlg-container {
    width: min(100% - 18px, var(--vlg-container, 1320px)) !important;
    padding-top: 10px !important;
  }

  /* Calm, compact mobile hero. Desktop can still use the rich background image,
     but phone first screen should not look noisy or push content below the fold. */
  .vlg-home .vlg-hero,
  .site-main.vlg-home .vlg-hero,
  .vlg-hero {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 20px 18px 18px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    color: #fff !important;
    background-color: #071224 !important;
    background-image:
      linear-gradient(135deg, rgba(7,18,36,.98) 0%, rgba(17,31,53,.96) 56%, rgba(242,138,0,.82) 145%) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 16px 36px rgba(7, 18, 36, .16) !important;
  }

  .vlg-hero::before,
  .vlg-hero::after,
  .vlg-hero-view-premium-split::after,
  .vlg-hero-view-product-showcase::after,
  .vlg-hero-view-category-tiles::after {
    display: none !important;
    content: none !important;
  }

  .vlg-hero-content,
  .vlg-hero-content-card .vlg-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .vlg-hero .vlg-kicker {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #ffb45a !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: .10em !important;
    white-space: normal !important;
  }

  .vlg-hero h1 {
    max-width: 100% !important;
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    text-shadow: none !important;
  }

  .vlg-hero p {
    max-width: 100% !important;
    margin: 0 0 13px !important;
    color: rgba(238, 244, 252, .92) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .vlg-hero-actions {
    display: flex !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  .vlg-hero-actions .vlg-btn-primary,
  .vlg-hero-actions .vlg-btn,
  .vlg-hero .vlg-btn {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }

  .vlg-hero-actions .vlg-btn-ghost,
  .vlg-hero-benefits,
  .vlg-hero-showcase,
  .vlg-hero-category-tiles,
  .vlg-hero-payments {
    display: none !important;
  }

  .vlg-trust-grid {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .vlg-trust-item {
    background: #fff !important;
    border: 1px solid #dfe7f1 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
  }
}

@media (max-width: 390px) {
  .vlg-home .vlg-hero,
  .site-main.vlg-home .vlg-hero,
  .vlg-hero {
    padding: 18px 16px 16px !important;
    border-radius: 18px !important;
  }

  .vlg-hero h1 {
    font-size: clamp(26px, 8.4vw, 31px) !important;
  }
}