/* WEAVEMECH header wordmark: true-alpha PNG; crop only empty image margins in layout. */
html[lang] body .site-header[data-header] .brand.weavemech-brand {
  --weavemech-logo-width: 300px;
  width: var(--weavemech-logo-width);
  max-width: calc(100vw - 90px);
}
html[lang] body .site-header[data-header] .brand.weavemech-brand picture {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
html[lang] body .site-header[data-header] .brand.weavemech-brand img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2172 / 160;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 50% 51.6%;
  background: transparent;
}
@media (min-width: 641px) and (max-width: 980px) {
  html[lang] body .site-header[data-header] .brand.weavemech-brand { --weavemech-logo-width: 250px; }
}
@media (max-width: 640px) {
  html[lang] body .site-header[data-header] .brand.weavemech-brand { --weavemech-logo-width: 180px; }
}

/* Desktop homepage: a quieter header logo. */
@media (min-width: 981px) {
  html[lang] body:not(.guide-page) .site-header[data-header] .brand.weavemech-brand {
    --weavemech-logo-width: 250px;
  }
}

/* Keep product-image watermarks clear of the bottom edge on every screen size. */
body:not(.guide-page) .config-image-frame::after,
body:not(.guide-page) .visual-card-grid-views .visual-card > .protected-image-frame::after {
  bottom: clamp(12px, 1.25vw, 18px);
}

/* English is the default entry; the language selectors have been removed. */
html[lang] body .site-header[data-header].weavemech-header .site-nav { width: 130px; }
html[lang] body .site-header[data-header].weavemech-header {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
}
html[lang] body .site-header[data-header].weavemech-header .menu-toggle {
  grid-column: 2;
}
@media (max-width: 640px) {
  html[lang] body .site-header[data-header].weavemech-header {
    height: 40px;
    min-height: 40px;
    grid-template-rows: 32px;
    padding: 3px 4px 4px;
    row-gap: 0;
  }
  html[lang] body .site-header[data-header].weavemech-header .menu-toggle {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  html[lang] body .product-page-nav {
    top: 40px;
  }
  html[lang] body .hero,
  html[lang] body.mobile-language-hidden .hero {
    min-height: calc(100svh - 40px);
  }
}