/*
  VEXA mobile UX patch.
  Scope: mobile homepage compactness and mobile navigation containment only.
*/

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  html.vexa-mobile-menu-open,
  body.vexa-mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: none;
  }

  .site-header {
    z-index: 120 !important;
  }

  html.vexa-mobile-menu-open .site-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header .fixed.inset-0.z-50 {
    z-index: 130 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 82% 6%, rgba(8, 117, 255, 0.18), transparent 20rem),
      linear-gradient(180deg, rgba(2, 7, 13, 0.99), rgba(3, 10, 18, 0.985)) !important;
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
  }

  .site-header .fixed.inset-0.z-50 > *:not([aria-label="Close navigation backdrop"]) {
    position: relative;
    z-index: 2;
  }

  .site-header .fixed.inset-0.z-50 button[aria-label="Close navigation backdrop"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    padding: 0;
    background: transparent;
  }

  .site-header .fixed.inset-0.z-50 .mobile-nav-link,
  .site-header .fixed.inset-0.z-50 .btn-primary,
  .site-header .fixed.inset-0.z-50 .btn-secondary {
    position: relative;
    z-index: 5 !important;
  }

  .site-header .mobile-nav-link {
    padding: 13px 0;
    font-size: clamp(1.18rem, 5.8vw, 1.85rem);
    line-height: 1.05;
  }

  .site-header .fixed.inset-0.z-50 .btn-primary,
  .site-header .fixed.inset-0.z-50 .btn-secondary {
    min-height: 46px;
    padding-inline: 18px;
  }

  .cart-toast {
    top: 92px;
    z-index: 140;
  }

  .hero-shell {
    overflow: hidden;
  }

  .hero-shell,
  .hero-layout {
    min-height: auto !important;
  }

  .hero-layout {
    width: min(100% - 24px, 1220px) !important;
    gap: 16px !important;
    padding-block: 24px 18px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero-title {
    max-width: 7.4em;
    font-size: clamp(2.45rem, 12.6vw, 3.45rem) !important;
    line-height: 0.94 !important;
  }

  .hero-lead {
    max-width: 31rem;
    margin-top: 12px !important;
    font-size: 0.98rem !important;
    line-height: 1.52 !important;
  }

  .hero-copy .mt-6 {
    margin-top: 16px !important;
  }

  .hero-shell .btn-primary,
  .hero-shell .btn-secondary {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .hero-trust-row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding-bottom: 3px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    font-size: 12px !important;
  }

  .hero-trust-row::-webkit-scrollbar {
    display: none;
  }

  .hero-trust-row span {
    flex: 0 0 auto;
  }

  .hero-visual-wrap {
    height: clamp(172px, 47vw, 224px) !important;
    margin-top: -6px !important;
  }

  .hero-scene {
    min-height: 0 !important;
  }

  .hero-art-shell {
    top: 50% !important;
    right: -7% !important;
    width: 108% !important;
  }

  .hero-stage-glow {
    inset: 18% 8% 8% 18%;
    filter: blur(20px);
    opacity: 0.7;
  }

  .hero-blueprint,
  .hero-dna-corner,
  .hero-crosshair,
  .hero-reflection,
  .hero-artifact-field,
  .hero-shell canvas {
    display: none !important;
  }

  .hero-shell + section {
    width: min(100% - 24px, 1180px) !important;
    margin-top: 0 !important;
    padding-block: 10px !important;
  }

  .hero-shell + section > div {
    gap: 10px !important;
    padding: 12px !important;
  }

  .hero-shell + section > .glass-panel {
    display: flex !important;
    gap: 0 !important;
    overflow-x: auto !important;
    padding: 0 !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hero-shell + section > .glass-panel::-webkit-scrollbar {
    display: none;
  }

  .hero-shell + section > .glass-panel > div {
    min-width: 188px;
    flex: 0 0 188px;
    scroll-snap-align: start;
    border-bottom: 0 !important;
    padding: 12px !important;
  }

  .section-wrap {
    width: min(100% - 24px, 1180px) !important;
    padding-block: 28px !important;
  }

  .section-wrap .mb-8 {
    margin-bottom: 18px !important;
  }

  .section-title {
    font-size: clamp(1.82rem, 8.8vw, 2.42rem) !important;
    line-height: 1.04 !important;
  }

  .section-copy {
    margin-top: 10px !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .category-grid,
  .product-grid,
  .timeline-grid {
    gap: 12px !important;
  }

  body.vexa-home-mobile .category-grid,
  body.vexa-home-mobile .product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.vexa-home-mobile .category-grid::-webkit-scrollbar,
  body.vexa-home-mobile .product-grid::-webkit-scrollbar {
    display: none;
  }

  body.vexa-home-mobile .category-grid .category-card {
    flex: 0 0 min(82vw, 304px);
    scroll-snap-align: start;
  }

  body.vexa-home-mobile .product-grid .product-card {
    flex: 0 0 min(82vw, 318px);
    scroll-snap-align: start;
  }

  body.vexa-home-mobile .category-grid .category-card:nth-child(n + 6),
  body.vexa-home-mobile .product-grid .product-card:nth-child(n + 6),
  body.vexa-home-mobile .timeline-grid .timeline-card:nth-child(n + 4),
  body.vexa-home-mobile .vexa-mobile-secondary-section {
    display: none !important;
  }

  .category-card,
  .timeline-card,
  .tool-card {
    min-height: auto !important;
    padding: 14px !important;
  }

  .category-card-head {
    margin-bottom: 12px !important;
  }

  .category-card h3 {
    margin-bottom: 7px !important;
    font-size: 1rem !important;
  }

  .category-card p {
    margin-bottom: 10px !important;
    font-size: 0.84rem !important;
    line-height: 1.42 !important;
  }

  .category-link {
    padding-top: 10px !important;
  }

  .product-card .p-5,
  .product-card .p-6 {
    padding: 14px !important;
  }

  .product-image-stage--card {
    aspect-ratio: 1.08 / 1;
  }

  .tool-card {
    display: grid;
    gap: 10px;
  }

  .metric-card {
    gap: 12px !important;
    padding: 16px !important;
  }

  .metric-card strong {
    font-size: clamp(1.75rem, 10vw, 2.65rem) !important;
  }

  .compliance-panel {
    width: min(100% - 24px, 1180px) !important;
    padding: 18px !important;
  }

  .compliance-panel .mt-7 {
    margin-top: 18px !important;
  }

  body.vexa-home-mobile .compliance-panel .mt-7 > div:nth-child(n + 4) {
    display: none !important;
  }

  .compliance-panel h2,
  .section-wrap h2.text-3xl,
  .section-wrap h2.text-4xl {
    font-size: clamp(1.75rem, 8.2vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  .section-wrap .p-7,
  .section-wrap .p-8 {
    padding: 18px !important;
  }

  .site-footer {
    margin-top: 34px !important;
  }

  .site-footer .py-12 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .site-footer .gap-10 {
    gap: 20px !important;
  }
}

@media (max-width: 430px) {
  .hero-layout {
    padding-block: 20px 14px !important;
  }

  .hero-title {
    font-size: clamp(2.25rem, 12vw, 3.05rem) !important;
  }

  .hero-lead {
    font-size: 0.93rem !important;
  }

  .hero-shell .btn-primary,
  .hero-shell .btn-secondary {
    width: 100%;
  }

  .hero-visual-wrap {
    height: clamp(156px, 44vw, 194px) !important;
  }

  .section-wrap {
    padding-block: 24px !important;
  }
}

@media (max-width: 340px) {
  .ruo-topline {
    min-height: 80px;
    padding-inline: 12px;
  }

  .hero-title {
    font-size: 2.12rem !important;
  }

  .hero-visual-wrap {
    height: 194px !important;
  }

  .site-header .mobile-nav-link {
    font-size: 1.1rem;
  }
}