/* Semantic summary-before-form order, with the existing desktop side panel. */
.checkout-grid {
  grid-template-areas: "intro summary" "fields summary";
  row-gap: 0;
}
.checkout-intro { grid-area: intro; min-width: 0; }
#checkoutForm { grid-area: fields; min-width: 0; }
.checkout-summary { grid-area: summary; min-width: 0; }
.checkout-breakdown summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 650;
}
.checkout-breakdown summary::-webkit-details-marker { display: none; }
.checkout-breakdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin: 0 3px 4px;
}
.checkout-breakdown[open] summary::after {
  transform: rotate(225deg);
  margin-bottom: -3px;
}
.checkout-breakdown summary strong { margin-left: auto; font-size: 1.4rem; }
.checkout-breakdown-body { margin-top: .75rem; }
.checkout-summary .delivery-summary-note { margin: .5rem 0 0; }
@media (max-width: 820px) {
  .checkout-grid {
    grid-template-areas: "intro" "summary" "fields";
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .checkout-summary { margin-top: 0; }
  #checkoutForm { margin-top: 0; }
}