/* RapidPro Sports — EasyStore storefront look (per-site; NOT in the shared package).
 * Columns + spacing live here for now; move to the SP Page Builder storefront addon
 * later to manage them by click instead of CSS. Scoped to EasyStore pages only. */
.com-easystore .easystore-grid{grid-template-columns:repeat(3,1fr)!important;column-gap:32px;row-gap:12px}

/* Make the checkout's required-field gate visible as well as functional. */
.com-easystore .easystore-checkout-wrapper .form-control:required:invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, .12);
}
.com-easystore .easystore-checkout-wrapper .form-control:required:focus:invalid {
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18);
}
.com-easystore .easystore-checkout-wrapper .form-control:required:valid {
  border-color: #198754;
}

/* Desktop checkout: shipping, billing, and payment are parallel sections. */
@media (min-width: 1200px) {
  .com-easystore .easystore-checkout-steps-wrapper {
    display: flex !important;
  }
  .com-easystore .ese-checkout-column-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    width: 100%;
  }
  .com-easystore .ese-checkout-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }
  .com-easystore #ppadv-panel {
    width: min(100%, 540px) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 1199.98px) {
  .com-easystore .ese-checkout-column-grid,
  .com-easystore .ese-checkout-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

.com-easystore #ppadv-panel {
  width: min(100%, 540px) !important;
  margin: 0 auto !important;
}