/* v167: viewport stability and first-screen usability. Keeps the locked hero + left nav + content + AI layout. */

/* Native hidden must always win over legacy mobile display rules. */
.v167-viewport-stable [hidden],
.v167-viewport-stable .mobile-category-backdrop[hidden] {
  display: none !important;
}

/* A slightly shorter hero exposes more real buying content on first view. */
.v167-viewport-stable .trust-carousel {
  height: clamp(240px, 25vw, 300px) !important;
  min-height: 240px !important;
  max-height: 300px !important;
}

.v167-viewport-stable .hero-card {
  padding-top: clamp(15px, 2vw, 26px) !important;
  padding-bottom: 24px !important;
}

/* Do not stretch the navigation and chat to the height of the long catalog. */
.v167-viewport-stable .main-workspace {
  align-items: start !important;
}

.v167-viewport-stable .left-nav,
.v167-viewport-stable .ai-panel {
  align-self: start !important;
}

@media (min-width: 981px) {
  .v167-viewport-stable .left-nav {
    position: sticky !important;
    top: 88px !important;
    max-height: calc(100dvh - 104px) !important;
    overflow-y: auto !important;
  }

  .v167-viewport-stable .ai-panel {
    position: sticky !important;
    top: 88px !important;
    height: clamp(410px, calc(100dvh - 550px), 580px) !important;
    min-height: 410px !important;
    max-height: calc(100dvh - 104px) !important;
    grid-template-rows: auto minmax(130px, 1fr) auto auto auto auto auto !important;
    overflow: hidden !important;
  }

  .v167-viewport-stable .ai-panel .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .v167-viewport-stable .ai-support-strip article {
    padding: 7px 9px !important;
  }

  .v167-viewport-stable .lead-privacy-note {
    margin-block: 3px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }
}

/* Keep the full language set accessible without crushing the primary nav. */
@media (max-width: 1240px) and (min-width: 781px) {
  .v167-viewport-stable .topbar-inner {
    gap: 7px !important;
  }

  .v167-viewport-stable .topbar-nav {
    gap: 2px !important;
  }

  .v167-viewport-stable .topbar-nav > a,
  .v167-viewport-stable .topbar-policy-menu > summary {
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  .v167-viewport-stable .global-lang-switch > button:not(.active) {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .v167-viewport-stable .trust-carousel {
    height: auto !important;
    min-height: 360px !important;
    max-height: none !important;
  }

  .v167-viewport-stable .ai-panel {
    position: static;
  }

  /* Preserve the established off-canvas drawer. It must not take up space in
     the document flow while closed. */
  .v167-viewport-stable .left-nav {
    position: fixed !important;
  }
}

@media (max-width: 680px) {
  .v167-viewport-stable .trust-carousel {
    min-height: 390px !important;
  }

  .v167-viewport-stable .hero-card {
    grid-template-rows: auto 138px !important;
    padding: 13px 44px 52px 12px !important;
  }

  .v167-viewport-stable .hero-visual,
  .v167-viewport-stable .hero-visual img {
    height: 138px !important;
  }

  .v167-viewport-stable .ai-panel {
    height: 520px !important;
    min-height: 520px !important;
    grid-template-rows: auto minmax(150px, 1fr) auto auto auto auto auto !important;
    overflow: hidden !important;
  }

  .v167-viewport-stable .ai-panel .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}