/* WellnessShop Blocks — Form block styles
   Edit this file to adjust the appearance of the [wsb/form] block.
   Markup structure generated by render_form():
   <section class="wsb-form">
     <div class="wsb-form__inner">
       <div class="wsb-form__image"><img src="..." alt="" /></div>
       <h2 class="wsb-form__title">Title</h2>
       <div class="wsb-form__description">Description HTML</div>
       <div class="wsb-form__form">[Form shortcode output]</div>
     </div>
   </section>
*/

.wsb-form {
  padding: 32px;
    background: #D8F5FF;
}

.wsb-form__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.wsb-form__image img {
  max-width: 100%;
  height: auto;
  display: block;
    position: relative;
}

.wsb-form__image{
    position: sticky;
    top: 32px;
}

.wsb-form__title {
    margin: 0;
    color: #000 !important;
    font-size: 40px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 120% !important;
}

.wsb-form__description {
    color: #000 !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 136% !important;
    margin: 8px 0 36px;
}

/* Small screens */
@media (max-width: 800px) {
    .wsb-form__image{ display: none; }
  .wsb-form__inner { grid-template-columns: 1fr; }
    .wsb-form__title { font-size: 32px !important; }
}