/* ==========================================
   SHOPPING ADD POLISH V1
   Compact en consistent met overige blokken
   ========================================== */


/* ------------------------------------------
   KAART
   ------------------------------------------ */

.shopping-v1-add-card {
  padding: 24px 30px !important;

  border-radius: 24px !important;
}


/* Titel gebruikt al onze algemene
   shopping-typografie. */

.shopping-v1-add-card h2 {
  margin: 0 !important;
}


/* Ondertitel */
.shopping-v1-add-card > p {
  margin:
    6px
    0
    16px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}


/* ------------------------------------------
   FORMULIER
   ------------------------------------------ */

.shopping-v1-add-form {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: stretch !important;

  gap: 10px !important;
}


/* Invoerveld */
.shopping-v1-input {
  width: 100% !important;

  min-height: 48px !important;
  height: 48px !important;

  box-sizing: border-box !important;

  padding:
    0
    16px !important;

  border-radius: 15px !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
}


.shopping-v1-input::placeholder {
  font-size: 15px !important;

  color:
    rgba(90, 80, 72, .56) !important;
}


/* Toevoegen-knop */
.shopping-v1-add-form
.shopping-v1-primary {
  min-height: 48px !important;
  height: 48px !important;

  padding:
    0
    18px !important;

  border-radius: 15px !important;

  font-size: 15px !important;
  font-weight: 850 !important;

  white-space: nowrap !important;
}


/* ------------------------------------------
   PROGRESS LIJN
   ------------------------------------------ */

.shopping-v1-add-card
.shopping-v1-progress {
  height: 5px !important;

  margin-top: 14px !important;

  border-radius: 999px !important;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 650px) {

  .shopping-v1-add-card {
    padding:
      20px
      18px !important;
  }


  .shopping-v1-add-form {
    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }


  /*
   * Mobiel iets groter houden vanwege
   * comfortabele touch-targets.
   */
  .shopping-v1-input {
    min-height: 50px !important;
    height: 50px !important;

    font-size: 16px !important;
  }


  .shopping-v1-input::placeholder {
    font-size: 16px !important;
  }


  .shopping-v1-add-form
  .shopping-v1-primary {
    width: 100% !important;

    min-height: 50px !important;
    height: 50px !important;

    font-size: 15px !important;
  }
}