/** Shopify CDN: Minification failed

Line 110:12 Unexpected "{"
Line 110:21 Expected ":"
Line 118:12 Unexpected "{"
Line 118:21 Expected ":"
Line 123:12 Unexpected "{"
Line 123:21 Expected ":"
Line 124:12 Unexpected "{"
Line 124:21 Expected ":"
Line 135:12 Unexpected "{"
Line 135:21 Expected ":"
... and 12 more hidden warnings

**/
.contact-form--wrapper {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 20px;
}

.contact-form--map-box {
    height: var(--media_height);
    border-radius: var(--card_radius);
}

.section-contact-form .no-container .contact-form--map-box {
    border-radius: 0;
}

.contact-form--content {
    width: 100%;
    margin: 0 auto;    
    padding: 0 15px;
    
}

.contact-form--wrapper.style-contact-form .contact-form--content {
    max-width: 700px;
}

.contact-form--spam-detection {
    padding-top: 20px;
}

.contact-form--map-content {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(var(--image_overlay_background), var(--image_overlay_opacity));
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 15px;
    pointer-events: none;
}

.contact-form--map-heading {
    color: var(--image_overlay_heading);
}

.contact-form--map-desc {
    padding-top: 10px;
}
.contact-form--map-desc ,
.contact-form--map-desc * {
    color: var(--image_overlay_text);
}

@media (min-width:768px) {
    .contact-form--wrapper.style-both {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .contact-form--content {
        padding: 2rem 4rem;
    }
    .contact-form--map-content {
        padding: 20px;
    }
}

@media (min-width:1025px) {
    .no-container .contact-form--wrapper.style-both .contact-form--content {
        padding: 0 2rem;
    }
    .contact-form--map-content {
        padding: 30px;
    }
}

@media (min-width:1200px) {
    .no-container .contact-form--wrapper.style-both .contact-form--content {
        padding: 0 4rem;
    }
}

@media (min-width:1441px) {
    .no-container .contact-form--wrapper.style-both .contact-form--content {
        padding: 0 7rem;
    }
}
/* =========================================
   Contact form: 2 columns per row (DESKTOP ONLY)
   Force the field rows into 2 columns even if theme CSS overrides it
   ========================================= */
@media (min-width: 769px){
  /* Force the two "row wrappers" to be 2-column grids on desktop */
  .section-{{ section.id }}-contact .contact--form .form-grid-2{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100%;
  }

  /* Keep success/error messages full width */
  .section-{{ section.id }}-contact .contact--form .form--message{
    width: 100%;
  }

  /* Keep textarea and button full width */
  .section-{{ section.id }}-contact .contact--form .form-group--full,
  .section-{{ section.id }}-contact .contact--form .submit-btn{
    width: 100%;
  }
}
/* =========================================================
   FORCE: Contact form fields in 2 columns on DESKTOP ONLY
   (beats theme CSS by using higher specificity + !important)
   ========================================================= */
@media (min-width: 769px){

  /* Make the form itself the 2-col grid */
  .section-{{ section.id }}-contact form#ContactForm.contact--form{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  /* Flatten the existing wrappers so their children become grid items */
  .section-{{ section.id }}-contact form#ContactForm.contact--form > .form-grid-2{
    display: contents !important;
  }

  /* Full-width rows (span both columns) */
  .section-{{ section.id }}-contact form#ContactForm.contact--form > input[type="hidden"],
  .section-{{ section.id }}-contact form#ContactForm.contact--form > .form--message,
  .section-{{ section.id }}-contact form#ContactForm.contact--form > .form-group--full,
  .section-{{ section.id }}-contact form#ContactForm.contact--form > .submit-btn{
    grid-column: 1 / -1 !important;
  }

  /* Safety: if any form-group gets forced full width by theme */
  .section-{{ section.id }}-contact form#ContactForm.contact--form .form-group{
    width: 100% !important;
    margin: 0 !important;
  }
}