/* Shared header improvements used across the staging storefront. */
@media (max-width: 900px) {
  .syx-header .syx-header-tools .syx-language {
    position: relative !important;
    display: block !important;
    order: -1;
    margin: 0 !important;
  }

  .syx-header .syx-header-tools .syx-language > summary {
    display: grid !important;
    place-items: center;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1px solid #dce4ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #09234d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer;
    list-style: none;
  }

  .syx-header .syx-header-tools .syx-language > summary::-webkit-details-marker { display: none; }

  .syx-header .syx-header-tools .syx-language > div {
    position: absolute !important;
    z-index: 10020 !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: min(310px, calc(100vw - 28px)) !important;
    padding: 10px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(7, 27, 58, .18) !important;
  }

  .syx-header .syx-header-tools .syx-language:not([open]) > div { display: none !important; }

  .syx-header .syx-header-tools .syx-language button {
    min-height: 48px !important;
    padding: 9px 10px !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #09234d !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-align: left !important;
    cursor: pointer;
  }
}

@media (max-width: 420px) {
  .syx-header .syx-header-inner { gap: 8px !important; }
  .syx-header .syx-logo { font-size: clamp(23px, 7vw, 29px) !important; }
  .syx-header .syx-header-tools { gap: 6px !important; }
  .syx-header .syx-header-tools > a,
  .syx-header .syx-header-tools .syx-language > summary,
  .syx-header .syx-mobile-menu > summary {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}