.contact {
    background: #333333;
        /* dark panel */
        color: rgb(242, 239, 221);
        /* label/body text */
        padding: 28px;
}


.contact img {
  max-width: 100%;
}
.contact .title {
  text-align: center;
  margin-bottom: 20px;
}
.contact .form__message {
  align-items: flex-start;
}
.contact .icon-success {
  margin-top: 2px;
}
.contact .field {
  margin-bottom: 15px;
height: 45px;
    padding: 0 15px !important;
    font-size: 17px;
    border-radius: 0;
    border: 2px solid #e9e9e9;
    background: #fff;
    color: #1c1919;
    box-shadow: none !important;
    width: 100%;

    flex-grow: 1;
    text-align: left;
    margin: var(--inputs-border-width);
    transition: box-shadow var(--duration-short) ease;
}
.contact .field__info {
  margin-bottom: 20px;
}


@media screen and (min-width: 960px) {
  .contact .field {
    margin-bottom: 20px;
  }
  .contact .field__info {
    margin-bottom: 30px;
  }
}
.contact__button {
  margin-top: 30px;
  text-align: center;
}
.contact__button .button {
  padding-left: 50px;
  padding-right: 50px;
}

.contact .label {
    color: #fff;
        text-transform: uppercase;
        font-family: Korolev, sans-serif !important;
        margin-bottom: 0px;

        position: static !important;
            transform: none !important;
            font-weight: 800;
            letter-spacing: 0.1em;
            margin: 0 0 8px;
            white-space: nowrap;
            /* keep SUBJECT on one line */
            line-height: 1;
        
            align-self: flex-start;
            /* ensure it hugs the left edge */
            text-align: left;
        
            font-size: 19px;
}

@media screen and (min-width: 960px) {
  .contact__button {
    margin-top: 40px;
  }
}
@media screen and (min-width: 960px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
  }
}
@media screen and (min-width: 960px) {
  .contact .title {
    margin-bottom: 30px;
  }
}
/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */




/* stacked label + white input (safely scoped) */
.contact-panel .field--stacked,
.field--stacked {
    /* remove the second selector if you want it panel-only */
    background: transparent;
    margin-bottom: 22px;
}

/* kill Shopline's floating label/border for this field */
.contact-panel .field--stacked::before,
.contact-panel .field--stacked::after,
.field--stacked::before,
.field--stacked::after {
    content: none !important;
    box-shadow: none !important;
}

/* label above input */
.contact-panel .field--stacked .field__label,
.field--stacked .field__label {
    position: static !important;
    transform: none !important;
    margin: 0 0 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgb(242, 239, 221);
    /* cream like the screenshot */
}

/* white input block */
.contact-panel .field--stacked .field__input,
.field--stacked .field__input {
    background: #fff !important;
    color: #1c1919;
    border: 0 !important;
    border-radius: 0 !important;
    height: 48px;
    /* adjust 44–56px to taste */
    padding: 10px 16px;
    box-shadow: none !important;
}

/* textarea variant (if you stack that too) */
.contact-panel .field--stacked .text-area.field__input,
.field--stacked .text-area.field__input {
    min-height: 180px;
    height: auto;
    padding: 12px 16px;
}

/* keep placeholder visible (optional) */
.field--stacked .field__input::placeholder {
    opacity: 1;
    color: #666;
}

/* prevent float-up triggers */
.field--stacked .field__input:focus~.field__label,
.field--stacked .field__input:not(:placeholder-shown)~.field__label,
.field--stacked .field__input:-webkit-autofill~.field__label {
    transform: none !important;
}