/* Shirts4Christ v61.0 TEST — true uniform 50/50 Step 4 layout for online stores only. */
html body #payment-section.s4c-tip-step4 {
  display:block!important;
  width:min(1180px,calc(100vw - 40px))!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:22px auto!important;
  padding:0 24px 24px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #d7dfeb!important;
  border-radius:18px!important;
  box-shadow:0 10px 24px rgba(7,28,66,.07)!important;
  color:#082452!important;
}
html body #payment-section.s4c-tip-step4,
html body #payment-section.s4c-tip-step4 * { box-sizing:border-box!important; }
html body #payment-section.s4c-tip-step4 > .panel-title,
html body #payment-section.s4c-tip-step4 > .step-title,
html body #payment-section.s4c-tip-step4 > .muscle-blue-step-heading,
html body #payment-section.s4c-tip-step4 > .muscle-step2-title { display:none!important; }
html body #payment-section.s4c-tip-step4 > .s4c-step-heading {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  width:calc(100% + 48px)!important;
  max-width:none!important;
  min-height:66px!important;
  margin:0 -24px 22px!important;
  padding:14px 18px!important;
  background:#082452!important;
  color:#fff!important;
  border:0!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:none!important;
  text-transform:uppercase!important;
}
html body #payment-section.s4c-tip-step4 > .s4c-step-heading span {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#082452!important;
  font:900 18px/1 Arial,Helvetica,sans-serif!important;
  text-align:center!important;
  box-shadow:0 4px 10px rgba(0,0,0,.12)!important;
}
html body #payment-section.s4c-tip-step4 > .s4c-step-heading strong {
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  font:900 20px/1.15 Arial,Helvetica,sans-serif!important;
  letter-spacing:.02em!important;
}
html body #payment-section.s4c-tip-step4 .muscle-step4-two-column {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:28px!important;
  align-items:start!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}
html body #payment-section.s4c-tip-step4 .muscle-step4-left,
html body #payment-section.s4c-tip-step4 .muscle-step4-right {
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body #payment-section.s4c-tip-step4 .stripe-summary-box,
html body #payment-section.s4c-tip-step4 .stripe-card-box {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:100%!important;
  height:100%!important;
  margin:0!important;
  padding:18px!important;
  border:1px solid #d9e2ef!important;
  border-radius:14px!important;
  background:#fbfcfe!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html body #payment-section.s4c-tip-step4 h3 {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:0!important;
  color:#082452!important;
  background:transparent!important;
  border:0!important;
  font:900 20px/1.2 Arial,Helvetica,sans-serif!important;
  text-align:center!important;
}
html body #payment-section.s4c-tip-step4 .cart-summary-side {
  width:100%!important;
  max-width:100%!important;
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html body #payment-section.s4c-tip-step4 .order-items-summary {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px!important;
  overflow:hidden!important;
  border:1px solid #d7dfeb!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#082452!important;
  font:700 13px/1.35 Arial,Helvetica,sans-serif!important;
  text-align:left!important;
  white-space:normal!important;
}
html body #payment-section.s4c-tip-step4 .red-blue-total-row,
html body #payment-section.s4c-tip-step4 .red-blue-donation-row {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:10px 0!important;
  border:0!important;
  border-bottom:1px dashed #d4dce8!important;
  border-radius:0!important;
  background:transparent!important;
  color:#082452!important;
  font:800 14px/1.3 Arial,Helvetica,sans-serif!important;
  text-align:left!important;
}
html body #payment-section.s4c-tip-step4 .red-blue-total-row strong,
html body #payment-section.s4c-tip-step4 .red-blue-donation-row strong {
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  color:#082452!important;
  background:transparent!important;
  font:900 14px/1.3 Arial,Helvetica,sans-serif!important;
  white-space:nowrap!important;
}
html body #payment-section.s4c-tip-step4 .final-total-row {
  min-height:52px!important;
  padding-top:15px!important;
  border-bottom:0!important;
  color:#c9242d!important;
  font-size:22px!important;
  font-weight:900!important;
}
html body #payment-section.s4c-tip-step4 .final-total-row strong {
  color:#c9242d!important;
  font-size:22px!important;
  font-weight:900!important;
}
html body #payment-section.s4c-tip-step4 .stripe-brand-lockup {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  width:100%!important;
  margin:8px 0 12px!important;
  padding:0!important;
}
html body #payment-section.s4c-tip-step4 .stripe-logo-pill {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:86px!important;
  height:34px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:999px!important;
  background:#635bff!important;
  color:#fff!important;
  font:900 18px/1 Arial,Helvetica,sans-serif!important;
  letter-spacing:-.03em!important;
  box-shadow:0 8px 20px rgba(99,91,255,.22)!important;
}
html body #payment-section.s4c-tip-step4 .card-logo-row {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}
html body #payment-section.s4c-tip-step4 .card-logo {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:48px!important;
  height:29px!important;
  margin:0!important;
  padding:0 8px!important;
  border:1px solid #d7dfeb!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#082452!important;
  font:900 12px/1 Arial,Helvetica,sans-serif!important;
  box-shadow:0 4px 12px rgba(4,28,72,.08)!important;
}
html body #payment-section.s4c-tip-step4 .card-logo.visa{color:#1a3f9a!important}
html body #payment-section.s4c-tip-step4 .card-logo.mc{color:#cc1926!important}
html body #payment-section.s4c-tip-step4 .card-logo.amex{color:#0b70b7!important}
html body #payment-section.s4c-tip-step4 .card-logo.discover{color:#e87722!important}
html body #payment-section.s4c-tip-step4 .stripe-note {
  display:block!important;
  max-width:520px!important;
  margin:6px auto 12px!important;
  padding:0!important;
  color:#233d64!important;
  font:800 13px/1.45 Arial,Helvetica,sans-serif!important;
  text-align:center!important;
}
html body #payment-section.s4c-tip-step4 .stripe-secure-message {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  max-width:560px!important;
  margin:0 auto 10px!important;
  padding:10px 12px!important;
  border:1px solid #cfe0f5!important;
  border-radius:12px!important;
  background:#eef6ff!important;
  color:#082452!important;
  text-align:center!important;
}
html body #payment-section.s4c-tip-step4 .stripe-secure-message strong {
  color:#082452!important;
  font:900 13px/1.35 Arial,Helvetica,sans-serif!important;
}
html body #payment-section.s4c-tip-step4 .stripe-secure-message span {
  color:#284466!important;
  font:700 12px/1.35 Arial,Helvetica,sans-serif!important;
}
html body #payment-section.s4c-tip-step4 .stripe-pay-button {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  height:auto!important;
  margin:14px 0 0!important;
  padding:12px 16px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:12px!important;
  background:#f24a13!important;
  color:#fff!important;
  font:900 clamp(13px,2vw,16px)/1.25 Arial,Helvetica,sans-serif!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  text-transform:none!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
html body #payment-section.s4c-tip-step4 .stripe-pay-button:disabled {
  opacity:.65!important;
  cursor:not-allowed!important;
}
html body #payment-section.s4c-tip-step4 .stripe-disclaimer {
  display:block!important;
  max-width:520px!important;
  margin:10px auto 0!important;
  padding:0!important;
  color:#3c526f!important;
  font:700 11px/1.4 Arial,Helvetica,sans-serif!important;
  text-align:center!important;
}

/* v61.0 TEST — hard visual lock to the actual rendered The Tip Step 4.
   The ID-qualified selectors intentionally outrank legacy store-level #payment-section !important rules. */
html body #payment-section.s4c-tip-step4 { position:relative!important; }
html body #payment-section.s4c-tip-step4 > .s4c-step-heading {
  font:900 20px/1.15 Arial,Helvetica,sans-serif!important;
  letter-spacing:.02em!important;
}
html body #payment-section.s4c-tip-step4 .muscle-step4-left,
html body #payment-section.s4c-tip-step4 .muscle-step4-right,
html body #payment-section.s4c-tip-step4 .stripe-summary-box,
html body #payment-section.s4c-tip-step4 .stripe-card-box {
  max-width:none!important;
}
html body #payment-section.s4c-tip-step4 .stripe-card-box { position:relative!important; }
html body #payment-section.s4c-tip-step4 .cart-summary-side {
  color:#34445e!important;
  font-weight:700!important;
}
html body #payment-section.s4c-tip-step4 .red-blue-total-row,
html body #payment-section.s4c-tip-step4 .red-blue-donation-row {
  margin:0!important;
  padding:10px 0!important;
  border:0!important;
  border-bottom:1px dashed #d4dce8!important;
  border-radius:0!important;
  background:transparent!important;
  color:#082452!important;
  text-align:left!important;
}
html body #payment-section.s4c-tip-step4 .red-blue-total-row strong,
html body #payment-section.s4c-tip-step4 .red-blue-donation-row strong {
  color:#082452!important;
  text-align:left!important;
}
html body #payment-section.s4c-tip-step4 .final-total-row {
  margin-top:12px!important;
  padding:12px 0 10px!important;
  border-top:2px solid rgba(0,0,0,.12)!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#c9242d!important;
  text-align:left!important;
}
html body #payment-section.s4c-tip-step4 .final-total-row strong {
  color:#c9242d!important;
  text-align:left!important;
}
html body #payment-section.s4c-tip-step4 .stripe-secure-message {
  flex-direction:column!important;
  box-shadow:0 8px 18px rgba(8,36,82,.08)!important;
}
html body #payment-section.s4c-tip-step4 .stripe-pay-button { margin-top:16px!important; }
html body #payment-section.s4c-tip-step4 #cartTotalSide,
html body #payment-section.s4c-tip-step4 #merchandiseTotal,
html body #payment-section.s4c-tip-step4 #paymentDonationTotal,
html body #payment-section.s4c-tip-step4 #donationTotal,
html body #payment-section.s4c-tip-step4 #step4ShippingTotal,
html body #payment-section.s4c-tip-step4 #shippingTotal {
  color:#082452!important;
  text-align:left!important;
}
html body #payment-section.s4c-tip-step4 #step4OrderTotal,
html body #payment-section.s4c-tip-step4 #orderTotal {
  color:#c9242d!important;
  text-align:left!important;
}

@media(max-width:900px){
  html body #payment-section.s4c-tip-step4 .muscle-step4-two-column{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  html body #payment-section.s4c-tip-step4,
  html body #payment-section.s4c-tip-step4{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    padding:0 16px 20px!important;
  }
  html body #payment-section.s4c-tip-step4 > .s4c-step-heading{
    width:calc(100% + 32px)!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
  }
  html body #payment-section.s4c-tip-step4 .stripe-summary-box,
  html body #payment-section.s4c-tip-step4 .stripe-card-box{padding:16px!important}
  html body #payment-section.s4c-tip-step4 .red-blue-total-row,
  html body #payment-section.s4c-tip-step4 .red-blue-donation-row{gap:10px!important;font-size:13px!important}
}
