/* Responsive fixes on top of the Divi layout (loaded after Divi's per-page CSS).
   Divi breakpoints: tablet <= 980px, phone <= 767px. */

/* ---- Homepage: hero fills the screen (no white band under it on tablets/phones) ---- */
body.home .et_pb_section_0 {
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- Homepage: store buttons (Constantia, Clear water, East Rand Mall, The Glen) ----
   Divi puts each fixed-width (190px) button in a 25%-wide column, so they overlap into one bar
   around 1024px and drift apart on wide screens, and a fixed 131px indent leaves them out of line
   with the Dynamic Vision SA button on tablets/phones. A grid of 190px tracks keeps them evenly
   spaced and aligned with that button at every width. */
body.home .et_pb_section_0 .et_pb_row_1 {
  display: grid !important;
  grid-template-columns: repeat(4, 190px);
  gap: 12px;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 133px !important;
}
body.home .et_pb_section_0 .et_pb_row_1 > .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
body.home .et_pb_section_0 .et_pb_row_1 .et_pb_button_module_wrapper {
  margin: 0 !important;
}
body.home .et_pb_section_0 .et_pb_row_1 .et_pb_button {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 980px) {
  body.home .et_pb_section_0 .et_pb_row_1 {
    grid-template-columns: repeat(2, 190px);
    padding-left: 36px !important;
  }
}

@media (max-width: 767px) {
  /* one column, the same width as the Dynamic Vision SA button above */
  body.home .et_pb_section_0 .et_pb_row_1 {
    grid-template-columns: 232px;
    padding-left: 18px !important;
  }
}

/* ---- Store pages: feedback popup ---- */
/* The send button sat off-centre because of CF7's (never shown) spinner beside it. */
.wpcf7 .wpcf7-spinner {
  display: none;
}

@media (max-width: 767px) {
  /* Name and Mall side by side are too narrow on a phone - stack them */
  .wpcf7 .row {
    flex-direction: column;
    gap: 12px;
  }
}