/* 4377: force the editorial hero into image-first / copy-second flow on phone layouts. */
@media screen and (max-width: 1200px), screen and (pointer: coarse) {
  #f-theme .banlulu-editorial__hero,
  #f-theme .banlulu-contact-intro__hero {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
  }
  #f-theme .banlulu-editorial__hero > .banlulu-editorial__hero-media,
  #f-theme .banlulu-contact-intro__hero > .banlulu-contact-intro__hero-media,
  #f-theme .banlulu-editorial__hero > .banlulu-editorial__hero-copy,
  #f-theme .banlulu-contact-intro__hero > .banlulu-editorial__hero-copy {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
  }
  #f-theme .banlulu-editorial__hero > .banlulu-editorial__hero-media,
  #f-theme .banlulu-contact-intro__hero > .banlulu-contact-intro__hero-media {
    order: 1 !important;
  }
  #f-theme .banlulu-editorial__hero > .banlulu-editorial__hero-copy,
  #f-theme .banlulu-contact-intro__hero > .banlulu-editorial__hero-copy {
    order: 2 !important;
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }
  #f-theme .banlulu-editorial__hero > .banlulu-editorial__hero-media img,
  #f-theme .banlulu-contact-intro__hero > .banlulu-contact-intro__hero-media img {
    display: block !important;
    width: 100% !important;
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    object-fit: cover !important;
  }
}

/* Keep the contact form container aligned with the editorial content on phones. */
@media screen and (max-width: 1200px), screen and (pointer: coarse) {
  #f-theme .f-contact-form > .container,
  #f-theme .f-contact-form f-contact,
  #f-theme .f-contact-form .f-row {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #f-theme .f-contact-form .f-row { display: block !important; }
  #f-theme .f-contact-form .f-contact-form__main,
  #f-theme .f-contact-form .f-contact-form__info,
  #f-theme .f-contact-form .banlulu-contact-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Desktop/tablet contact page density adjustments. */
@media screen and (min-width: 768px) {
  #f-theme .banlulu-contact-intro__hero-media {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  #f-theme .banlulu-contact-intro__hero-media img {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    object-fit: cover !important;
  }
  #f-theme .f-contact-form > .container {
    width: min(1200px, calc(100% - 120px)) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Correct nested mobile width: apply the side gutter only once at the outer container. */
@media screen and (max-width: 1200px), screen and (pointer: coarse) {
  #f-theme .f-contact-form > .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }
  #f-theme .f-contact-form > .container f-contact,
  #f-theme .f-contact-form > .container .f-row {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Ensure the contact intro image is short on desktop and tablet viewports. */
@media screen and (min-width: 768px) and (max-width: 1600px) {
  #f-theme .banlulu-contact-intro__hero-media {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
  #f-theme .banlulu-contact-intro__hero-media img {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

/* Final mobile contact width override: neutralize theme grid column ratios. */
@media screen and (max-width: 1200px), screen and (pointer: coarse) {
  #f-theme section.f-contact-form > div,
  #f-theme section.f-contact-form > div > f-contact,
  #f-theme section.f-contact-form > div > f-contact > .f-row,
  #f-theme section.f-contact-form .f-contact-form__main,
  #f-theme section.f-contact-form .f-contact-form__info {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #f-theme section.f-contact-form > div {
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #f-theme section.f-contact-form .f-contact-form__form-fields,
  #f-theme section.f-contact-form .f-contact-form__form-fields > * {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
}

/* Structural contact-page sizing overrides for theme 4377. */
.banlulu-contact-hero-media {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}
.banlulu-contact-hero-media img {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  object-fit: cover !important;
}
.banlulu-contact-form-shell {
  width: min(1200px, calc(100% - 120px)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media screen and (max-width: 1200px), screen and (pointer: coarse) {
  .banlulu-contact-hero-media,
  .banlulu-contact-hero-media img {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
  }
  .banlulu-contact-form-shell {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }
  .banlulu-contact-form-shell > f-contact,
  .banlulu-contact-form-shell > f-contact > .f-row,
  .banlulu-contact-form-shell .f-contact-form__main,
  .banlulu-contact-form-shell .f-contact-form__info {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
}

/* Desktop composition: copy on the left, image on the right. */
@media screen and (min-width: 768px) and (pointer: fine) {
  #f-theme .banlulu-editorial__hero,
  #f-theme .banlulu-contact-intro__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  #f-theme .banlulu-editorial__hero-copy,
  #f-theme .banlulu-contact-intro__hero-copy { order: 1 !important; }
  #f-theme .banlulu-editorial__hero-media,
  #f-theme .banlulu-contact-intro__hero-media { order: 2 !important; }
}

/* Final alignment: use the native container once and equalize the desktop hero columns. */
.banlulu-contact-form-shell {
  width: 100% !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}
@media screen and (min-width: 768px) and (pointer: fine) {
  #f-theme .banlulu-contact-intro__hero {
    min-height: 360px !important;
    height: 360px !important;
    align-items: stretch !important;
  }
  #f-theme .banlulu-contact-intro__hero-copy {
    height: 360px !important;
    min-height: 360px !important;
    justify-content: flex-start !important;
    padding-top: 56px !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
  }
  #f-theme .banlulu-contact-hero-media,
  #f-theme .banlulu-contact-hero-media img {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
  }
}
@media screen and (max-width: 1200px), screen and (pointer: coarse) {
  .banlulu-contact-form-shell {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Center the desktop contact copy vertically beside the image. */
@media screen and (min-width: 768px) and (pointer: fine) {
  #f-theme .banlulu-contact-intro__hero-copy {
    justify-content: center !important;
    align-self: stretch !important;
  }
}

/* Make the desktop contact hero a single equal-height row with no image-column gap. */
@media screen and (min-width: 768px) and (pointer: fine) {
  #f-theme .banlulu-contact-intro__hero {
    height: 300px !important;
    min-height: 300px !important;
    align-items: stretch !important;
  }
  #f-theme .banlulu-contact-intro__hero-copy,
  #f-theme .banlulu-contact-hero-media,
  #f-theme .banlulu-contact-hero-media img {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    box-sizing: border-box !important;
  }
  #f-theme .banlulu-contact-hero-media {
    overflow: hidden !important;
  }
  #f-theme .banlulu-contact-hero-media img {
    display: block !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  #f-theme .banlulu-contact-intro__hero-copy {
    justify-content: center !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Contact hero final equal-height desktop row. */
@media screen and (min-width: 768px) {
  #f-theme .banlulu-contact-intro__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    height: 430px !important;
    min-height: 430px !important;
    align-items: stretch !important;
  }
  #f-theme .banlulu-contact-intro__hero-copy,
  #f-theme .banlulu-contact-hero-media {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    box-sizing: border-box !important;
  }
  #f-theme .banlulu-contact-intro__hero-copy {
    display: flex !important;
    justify-content: center !important;
    align-self: stretch !important;
    background: #e5eeea !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  #f-theme .banlulu-contact-hero-media {
    overflow: hidden !important;
  }
  #f-theme .banlulu-contact-hero-media img {
    display: block !important;
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    object-fit: cover !important;
  }
}