:root {
  --echo-mobile-nav-height: 68px;
  --echo-mobile-gutter: 12px;
  --echo-mobile-red: #ef3340;
  --echo-mobile-surface: #11161d;
  --echo-mobile-panel: #171d25;
  --echo-mobile-line: rgba(255,255,255,.12);
}

@media (max-width: 820px) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 132px;
  }

  body.echo-mobile-v2 {
    padding-bottom: calc(var(--echo-mobile-nav-height) + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background: #07090d;
  }

  body.echo-mobile-v2 .em-construction-notice,
  body.echo-mobile-v2 .echo-construction-notice {
    min-height: 28px !important;
    padding: 6px 12px !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
    letter-spacing: .045em !important;
  }

  body.echo-mobile-v2 .em-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--echo-mobile-line);
    background: rgba(8,11,15,.97) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    backdrop-filter: blur(14px);
  }

  body.admin-bar.echo-mobile-v2 .em-site-header { top: 46px; }

  body.echo-mobile-v2 .em-header-main {
    min-height: 58px !important;
    padding: 8px var(--echo-mobile-gutter) !important;
  }

  body.echo-mobile-v2 .em-brand img {
    display: block;
    width: clamp(132px, 42vw, 172px) !important;
    max-height: 42px !important;
    object-fit: contain;
    object-position: left center;
  }

  body.echo-mobile-v2 .em-mobile-header-actions {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
  }

  body.echo-mobile-v2 .echo-mobile-account-link,
  body.echo-mobile-v2 .em-mobile-cart-link,
  body.echo-mobile-v2 .em-mobile-menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    border: 1px solid var(--echo-mobile-line) !important;
    background: var(--echo-mobile-surface) !important;
    color: #fff !important;
  }

  body.echo-mobile-v2 .echo-mobile-global-tools {
    display: block !important;
    padding: 0 var(--echo-mobile-gutter) 9px !important;
  }

  body.echo-mobile-v2 .echo-mobile-global-search {
    grid-template-columns: 19px minmax(0,1fr) 40px !important;
    min-height: 44px !important;
    padding: 3px 3px 3px 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px !important;
    background: #141a21 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  body.echo-mobile-v2 .echo-mobile-global-search:focus-within {
    border-color: rgba(239,51,64,.8) !important;
    box-shadow: 0 0 0 3px rgba(239,51,64,.12) !important;
  }

  body.echo-mobile-v2 .echo-mobile-global-search input {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: var(--echo-mobile-red) !important;
    font-size: 16px !important;
  }

  body.echo-mobile-v2 .echo-mobile-global-search input::placeholder {
    color: #c9a4a8 !important;
    -webkit-text-fill-color: #c9a4a8 !important;
    opacity: 1 !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-photo {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--echo-mobile-line);
    background: #07090d !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-photo::before {
    height: clamp(184px, 50vw, 224px) !important;
    background-position: center top !important;
    background-size: cover !important;
    opacity: 1 !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-photo::after {
    top: 132px !important;
    height: 100px !important;
    opacity: .7 !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-stack {
    padding: clamp(172px, 47vw, 210px) var(--echo-mobile-gutter) 18px !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-intro {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    padding: 12px 12px 8px !important;
    border: 1px solid var(--echo-mobile-line);
    border-bottom: 0;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(180deg,rgba(21,27,35,.98),rgba(14,19,25,.98));
    text-align: left !important;
    text-shadow: none !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-intro > span {
    color: #ff7d86 !important;
    font-size: .57rem !important;
    letter-spacing: .12em !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-intro h1 {
    margin-top: 4px !important;
    font-size: clamp(1.45rem, 7vw, 1.8rem) !important;
    line-height: 1 !important;
  }

  body.echo-mobile-v2 .em-mobile-commerce-intro p {
    margin-top: 5px !important;
    color: #b8c0ca !important;
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }

  body.echo-mobile-v2 .em-mobile-vehicle-shell {
    position: relative;
    z-index: 2;
    margin: 0 !important;
  }

  body.echo-mobile-v2 .em-mobile-home-vehicle {
    min-height: 76px !important;
    margin: 0 !important;
    border: 1px solid rgba(239,51,64,.45) !important;
    border-top-color: rgba(255,255,255,.08) !important;
    border-radius: 0 0 15px 15px !important;
    background: linear-gradient(135deg,#171d25,#11161d) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.24) !important;
  }

  body.echo-mobile-v2 .em-mobile-home-vehicle .em-mobile-vehicle-icon {
    background: rgba(239,51,64,.13) !important;
    color: #ff5964 !important;
  }

  body.echo-mobile-v2 .em-mobile-merch {
    margin-top: 20px !important;
  }

  body.echo-mobile-v2 .em-mobile-merch-head {
    align-items: end !important;
    margin-bottom: 10px !important;
  }

  body.echo-mobile-v2 .em-mobile-merch-head h2 {
    font-size: 1.12rem !important;
    line-height: 1.05 !important;
  }

  body.echo-mobile-v2 .em-mobile-merch-head > a {
    color: #ff707a !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
  }

  body.echo-mobile-v2 .em-mobile-system-rail {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 134px !important;
    overflow: hidden !important;
    border: 1px solid var(--echo-mobile-line) !important;
    border-radius: 12px !important;
    background: #0d1117 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
    isolation: isolate !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile > span {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    height: 100% !important;
    overflow: hidden !important;
    background-color: #0d1117 !important;
    background-position: center !important;
    background-size: cover !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile > span::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg,rgba(5,8,12,.04) 18%,rgba(5,8,12,.38) 55%,rgba(5,8,12,.96) 100%),
      linear-gradient(90deg,rgba(239,51,64,.13),transparent 44%) !important;
    pointer-events: none !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.015) !important;
    transition: transform .28s ease, filter .28s ease !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile strong {
    position: absolute !important;
    z-index: 2 !important;
    left: 8px !important;
    right: 7px !important;
    bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(.59rem,2.7vw,.7rem) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.9) !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile::after {
    content: "SHOP SYSTEM  →" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 8px !important;
    bottom: 9px !important;
    color: #ff6b75 !important;
    font-size: clamp(.41rem,1.75vw,.49rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
  }

  body.echo-mobile-v2 .em-mobile-system-tile:first-child {
    border-color: rgba(239,51,64,.62) !important;
  }

  body.echo-mobile-v2 .echo-fluids-system-tile > span {
    background-image: url("fluids-maintenance-card.webp") !important;
  }

  body.echo-mobile-v2 .echo-fluids-system-tile img {
    opacity: 0 !important;
  }

  @media (hover: hover) {
    body.echo-mobile-v2 .em-mobile-system-tile:hover {
      border-color: rgba(239,51,64,.7) !important;
      transform: translateY(-2px) !important;
    }

    body.echo-mobile-v2 .em-mobile-system-tile:hover img {
      transform: scale(1.06) !important;
      filter: saturate(1.08) contrast(1.03) !important;
    }
  }

  body.echo-mobile-v2 .em-mobile-product-merch ul.products,
  body.echo-mobile-v2 .em-results ul.products,
  body.echo-mobile-v2 .woocommerce ul.products,
  body.echo-mobile-v2 ul.products.columns-2,
  body.echo-mobile-v2 ul.products.columns-3,
  body.echo-mobile-v2 ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.echo-mobile-v2 ul.products li.product,
  body.echo-mobile-v2 .em-product-card {
    display: grid !important;
    grid-template-columns: minmax(124px,39%) minmax(0,1fr) !important;
    min-height: 190px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--echo-mobile-line) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg,#171d25,#10151b) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  }

  body.echo-mobile-v2 ul.products li.product .em-product-media,
  body.echo-mobile-v2 .em-product-card .em-product-media {
    width: 100% !important;
    min-height: 190px !important;
    border: 0 !important;
    border-right: 1px solid var(--echo-mobile-line) !important;
    border-radius: 0 !important;
    background: #f4f5f6 !important;
  }

  body.echo-mobile-v2 ul.products li.product .em-product-media img,
  body.echo-mobile-v2 .em-product-card .em-product-media img {
    width: 100% !important;
    height: 100% !important;
    padding: 14px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  body.echo-mobile-v2 ul.products li.product .em-product-body,
  body.echo-mobile-v2 .em-product-card .em-product-body {
    display: flex !important;
    min-width: 0 !important;
    padding: 12px !important;
    flex-direction: column !important;
  }

  body.echo-mobile-v2 .em-product-meta {
    margin-bottom: 6px !important;
    font-size: .56rem !important;
  }

  body.echo-mobile-v2 ul.products li.product h2,
  body.echo-mobile-v2 .em-product-card h2 {
    display: -webkit-box !important;
    margin: 0 0 8px !important;
    overflow: hidden !important;
    font-size: .81rem !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body.echo-mobile-v2 .em-product-fitment {
    min-height: 24px !important;
    margin: 0 0 7px !important;
  }

  body.echo-mobile-v2 .echo-fitment-badge {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: .55rem !important;
    white-space: nowrap !important;
  }

  body.echo-mobile-v2 .em-product-price {
    margin-top: auto !important;
    font-size: 1rem !important;
  }

  body.echo-mobile-v2 .em-product-action {
    min-height: 36px !important;
    margin-top: 9px !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    font-size: .63rem !important;
  }

  body.echo-mobile-v2 .em-mobile-brand-rail {
    display: flex !important;
    gap: 9px !important;
    padding: 1px 2px 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.echo-mobile-v2 .em-mobile-brand-rail::-webkit-scrollbar { display: none; }

  body.echo-mobile-v2 .em-mobile-brand-tile {
    width: 126px !important;
    min-width: 126px !important;
    height: 76px !important;
    padding: 10px !important;
    border: 1px solid var(--echo-mobile-line) !important;
    border-radius: 12px !important;
    background: #121820 !important;
    scroll-snap-align: start;
  }

  body.echo-mobile-v2 .em-mobile-brand-tile img {
    max-width: 102px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  body.echo-mobile-v2 .em-mobile-brand-tile .em-brand-label {
    margin-top: 4px !important;
    font-size: .52rem !important;
  }

  body.echo-mobile-v2 .em-catalog-head {
    padding-block: 16px !important;
  }

  body.echo-mobile-v2 .em-catalog-head-row {
    gap: 12px !important;
  }

  body.echo-mobile-v2 .em-catalog-brand-plate {
    min-height: 64px !important;
    padding: 8px 12px !important;
  }

  body.echo-mobile-v2 .em-catalog-filter-dock-wrap,
  body.echo-mobile-v2 .em-mobile-catalog-tools,
  body.echo-mobile-v2 .em-catalog-layout {
    padding-inline: var(--echo-mobile-gutter) !important;
  }

  body.echo-mobile-v2 .em-catalog-filter-dock {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 13px !important;
  }

  body.echo-mobile-v2 .em-catalog-filter-controls {
    gap: 7px !important;
  }

  body.echo-mobile-v2 .em-results {
    scroll-margin-top: 126px;
  }

  body.echo-mobile-v2 .em-results > h1,
  body.echo-mobile-v2 .em-results > h2,
  body.echo-mobile-v2 .em-results .woocommerce-result-count {
    margin-bottom: 10px !important;
  }

  body.echo-mobile-v2 .em-mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    min-height: var(--echo-mobile-nav-height) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    border-top: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(9,12,16,.97) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(15px);
  }

  body.echo-mobile-v2 .em-mobile-bottom-nav a {
    min-width: 0 !important;
    min-height: 60px !important;
    color: #aab2bd !important;
  }

  body.echo-mobile-v2 .em-mobile-bottom-nav a.is-current {
    color: #fff !important;
    background: linear-gradient(180deg,rgba(239,51,64,.16),transparent) !important;
  }

  body.echo-mobile-v2 .em-mobile-bottom-nav a.is-current::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--echo-mobile-red);
  }

  body.echo-mobile-v2 .echo-cookie-consent {
    right: 9px !important;
    bottom: calc(var(--echo-mobile-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
    width: calc(100% - 18px) !important;
    padding: 12px !important;
    border-radius: 13px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.48) !important;
  }

  body.echo-mobile-v2 .echo-cookie-consent h2 {
    margin: 3px 0 4px !important;
    font-size: 1rem !important;
  }

  body.echo-mobile-v2 .echo-cookie-consent p {
    font-size: .69rem !important;
    line-height: 1.35 !important;
  }

  body.echo-mobile-v2 .echo-cookie-consent__actions {
    margin-top: 9px !important;
  }
}

@media (max-width: 390px) {
  body.echo-mobile-v2 ul.products li.product,
  body.echo-mobile-v2 .em-product-card {
    grid-template-columns: 120px minmax(0,1fr) !important;
  }

  body.echo-mobile-v2 ul.products li.product .em-product-body,
  body.echo-mobile-v2 .em-product-card .em-product-body {
    padding: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}


@media (min-width: 821px) {
  body.echo-mobile-v2 .em-system-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.echo-mobile-v2 .em-system-card {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 220px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 16px !important;
    background: #0d1117 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
    isolation: isolate !important;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease !important;
  }

  body.echo-mobile-v2 .em-system-card .em-system-art {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #0d1117 !important;
  }

  body.echo-mobile-v2 .em-system-card .em-system-art::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg,rgba(4,7,10,.03) 18%,rgba(4,7,10,.34) 52%,rgba(4,7,10,.97) 100%),
      linear-gradient(90deg,rgba(239,51,64,.13),transparent 42%) !important;
    pointer-events: none !important;
  }

  body.echo-mobile-v2 .em-system-card .em-system-art img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.01) !important;
    transition: transform .32s ease, filter .32s ease !important;
  }

  body.echo-mobile-v2 .em-system-card > strong {
    position: absolute !important;
    z-index: 2 !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 42px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1rem,1.35vw,1.25rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.9) !important;
  }

  body.echo-mobile-v2 .em-system-card::after {
    content: "SHOP SYSTEM  →" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 18px !important;
    bottom: 18px !important;
    color: #ff6b75 !important;
    font-size: .61rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .1em !important;
  }

  body.echo-mobile-v2 .em-system-card > span:not(.em-system-art) {
    display: none !important;
  }

  body.echo-mobile-v2 .em-fluid-system-card .em-system-art {
    background-image: url("fluids-maintenance-card.webp") !important;
    background-position: center !important;
    background-size: cover !important;
  }

  body.echo-mobile-v2 .em-fluid-system-card .em-system-art img {
    opacity: 0 !important;
  }

  body.echo-mobile-v2 .em-system-card:hover,
  body.echo-mobile-v2 .em-system-card:focus-visible {
    border-color: rgba(239,51,64,.75) !important;
    box-shadow: 0 20px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(239,51,64,.16) !important;
    transform: translateY(-5px) !important;
  }

  body.echo-mobile-v2 .em-system-card:hover .em-system-art img,
  body.echo-mobile-v2 .em-system-card:focus-visible .em-system-art img {
    filter: saturate(1.08) contrast(1.04) !important;
    transform: scale(1.065) !important;
  }
}