/* V100-23 — responsive desktop header: prevent navigation/actions overlap */
@media (min-width: 1024px) {
  #site-header > div:nth-child(2) {
    width: 100% !important;
    max-width: 1480px !important;
    padding-inline: clamp(14px, 1.7vw, 28px) !important;
    gap: 10px !important;
  }

  #site-header > div:nth-child(2) > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  #site-header > div:nth-child(2) > div:first-child > nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #site-header > div:nth-child(2) > div:first-child > nav > ul {
    gap: 0 !important;
  }

  #site-header > div:nth-child(2) > div:first-child > nav > ul > li > button,
  #site-header > div:nth-child(2) > div:first-child > nav > ul > li > a {
    padding-inline: clamp(6px, .6vw, 11px) !important;
    font-size: clamp(11px, .82vw, 13px) !important;
  }

  #site-header > div:nth-child(2) > div:last-child {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-inline-start: 6px;
    background: var(--canvas);
  }

  #site-header > div:nth-child(2) > div:last-child > button {
    padding-inline: 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

/* Between tablet and compact desktop, the full 11-item desktop menu simply
   cannot fit safely beside account/cart. Use the existing compact nav instead
   of allowing items to overlap. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #site-header > div:nth-child(2) > div:first-child > nav {
    display: none !important;
  }

  #site-header > nav {
    display: block !important;
  }
}

/* Compact laptops: keep the complete desktop menu, but give the account/cart
   buttons guaranteed space and slightly tighten typography. */
@media (min-width: 1280px) and (max-width: 1439px) {
  #site-header > div:nth-child(2) > div:first-child > nav > ul > li > button,
  #site-header > div:nth-child(2) > div:first-child > nav > ul > li > a {
    padding-inline: 6px !important;
    font-size: 11px !important;
  }

  #site-header > div:nth-child(2) > div:last-child > button {
    padding-inline: 8px !important;
  }
}