.postcode-housenumber-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
    max-width: 520px; /* match your checkout row width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px; /* adds spacing below */
    position: relative;
    top: 0;
    box-sizing: border-box;
}


.wc-block-components-address-form__postcode,
.wc-block-components-address-form__housenumber {
    flex: 1 1 160px;
    min-width: 100px;
    margin-bottom: 0 !important;
    position: relative;
    max-width: 210px;
}

@media (max-width: 650px) {
    .postcode-housenumber-flex {
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
    }
    .wc-block-components-address-form__postcode,
    .wc-block-components-address-form__housenumber {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }
    .postcode-housenumber-flex input,
    .postcode-housenumber-flex label {
        width: 100% !important;
        max-width: 100% !important;
    }
}


.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}



/* Postcode + huisnummer responsive grid */
.postcode-housenumber-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 520px) {
  .postcode-housenumber-grid {
    grid-template-columns: 1fr minmax(120px, 220px);
  }
}

/* Result occupies the full row under the two inputs */
#postcodeapi-result {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}



.postcode-housenumber-grid .wc-block-components-text-input:first-child {
    margin-top: 16px !important;
}