body {
  background:#f7f6f1
}
.checkout-page {
  padding:42px 0 76px
}
.checkout-heading {
  margin-bottom:22px
}
.checkout-heading h1 {
  font:700 2.45rem 'Playfair Display';
  color:#263a2f;
  margin:5px 0
}
.checkout-heading p {
  color:#78827b;
  margin:0
}
.checkout-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:19px;
  align-items:start
}
.checkout-main {
  display:grid;
  gap:15px
}
.checkout-card,.checkout-summary {
  background:#fff;
  border:1px solid #e8e9e1;
  border-radius:18px;
  box-shadow:0 7px 25px #6541260a
}
.checkout-card {
  padding:23px
}
.checkout-step {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px
}
.checkout-step>span {
  width:29px;
  height:29px;
  border-radius:9px;
  background:#f0eadf;
  color:#654126;
  display:grid;
  place-items:center;
  font-size:.73rem;
  font-weight:700;
  flex:none
}
.checkout-step h2 {
  font:700 1.08rem 'DM Sans',sans-serif;
  color:#293c31;
  margin:2px 0
}
.checkout-step p {
  font-size:.74rem;
  color:#879087;
  margin:3px 0
}
.checkout-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.checkout-fields label,.checkout-card>label,.address-panel>label {
  display:grid;
  gap:6px;
  font-size:.75rem;
  color:#4e5e53;
  font-weight:600;
  margin-bottom:12px
}
.checkout-fields .full-field {
  grid-column:1/-1
}
.checkout-page input:not([type=radio]),.checkout-page select,.checkout-page textarea {
  width:100%;
  border:1px solid #e2e6df;
  border-radius:9px;
  padding:11px 12px;
  background:white;
  color:#29372f;
  font:400 .82rem 'DM Sans',sans-serif
}
.checkout-page input:focus,.checkout-page select:focus,.checkout-page textarea:focus {
  outline:3px solid #155b4619;
  border-color:#77927e
}
.delivery-options {
  display:grid;
  gap:10px
}
.delivery-option {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #e4e8e0;
  border-radius:13px;
  padding:14px;
  cursor:pointer;
  transition:.16s
}
.delivery-option:hover {
  border-color:#bba88c;
  background:#fdfbf7
}
.delivery-option:has(input:checked) {
  border-color:#654126;
  background:#faf6ef;
  box-shadow:0 0 0 2px #65412614
}
.delivery-option input {
  position:absolute;
  opacity:0
}
.option-check {
  height:18px;
  width:18px;
  border:1px solid #c8cec6;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none
}
.delivery-option input:checked+.option-check {
  border:5px solid #654126
}
.option-copy {
  flex:1
}
.option-copy b,.option-copy small {
  display:block
}
.option-copy b {
  font-size:.84rem;
  color:#304237
}
.option-copy small {
  font-size:.7rem;
  color:#838d85;
  margin-top:3px
}
.option-badge,.relay-pill,.manual-pill {
  border-radius:20px;
  background:#eee8da;
  color:#684d2d;
  padding:6px 9px;
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.05em
}
.option-badge.manual {
  background:#edf1eb;
  color:#59715d
}
.address-panel {
  margin-top:15px;
  border:1px solid #e8e7de;
  border-radius:13px;
  background:#fdfdfa;
  padding:16px
}
.delivery-panel-head {
  display:flex;
  align-items:center;
  gap:10px
}
.provider-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#155b46;
  color:white;
  font-weight:700
}
.provider-icon.manual-icon {
  background:#e9dfcc;
  color:#654126
}
.delivery-panel-head>div {
  flex:1
}
.delivery-panel-head b,.delivery-panel-head small {
  display:block
}
.delivery-panel-head b {
  font-size:.83rem;
  color:#2d4135
}
.delivery-panel-head small {
  font-size:.67rem;
  color:#89918a;
  margin-top:2px
}
.relay-pill {
  background:#e7efe8;
  color:#2b6745
}
.manual-pill {
  background:#f1ebdc
}
.provider-description {
  font-size:.73rem;
  line-height:1.6;
  color:#768178;
  margin:12px 0
}
.optional {
  color:#9aa198;
  font-weight:400
}
.relay-status,.manual-status {
  display:flex;
  gap:9px;
  align-items:flex-start;
  background:#f1f5f0;
  border-radius:10px;
  padding:11px;
  margin-top:7px
}
.status-dot {
  height:8px;
  width:8px;
  border-radius:50%;
  background:#c39b4b;
  margin:4px 0 0 2px;
  flex:none
}
.relay-status b,.relay-status small,.manual-status b,.manual-status small {
  display:block
}
.relay-status b,.manual-status b {
  font-size:.71rem;
  color:#4f604f
}
.relay-status small,.manual-status small {
  font-size:.67rem;
  line-height:1.5;
  color:#818c82;
  margin-top:3px
}
.manual-status {
  background:#f7f1e5;
  display:block
}
.manual-status small {
  margin-top:4px
}
.field-error {
  font-size:.72rem;
  color:#9b5034;
  margin-top:8px
}
.checkout-summary {
  padding:21px;
  position:sticky;
  top:95px
}
.summary-title {
  padding-bottom:14px;
  border-bottom:1px solid #eceee8
}
.summary-title h2 {
  font:700 1.2rem 'Playfair Display';
  color:#293d31;
  margin:5px 0
}
.checkout-items {
  max-height:245px;
  overflow:auto
}
.checkout-item {
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #f0f1ed
}
.checkout-item img {
  width:47px;
  height:47px;
  object-fit:cover;
  border-radius:9px
}
.checkout-item div {
  flex:1
}
.checkout-item b,.checkout-item small {
  display:block
}
.checkout-item b {
  font-size:.74rem
}
.checkout-item small {
  font-size:.67rem;
  color:#8a938b
}
.checkout-item strong {
  font-size:.72rem
}
.summary-line,.summary-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  font-size:.78rem
}
.summary-line span {
  color:#7b867d
}
.summary-total {
  border-top:1px solid #eceee8;
  margin-top:4px;
  padding-top:14px;
  font-weight:700;
  font-size:.88rem
}
.summary-total b {
  font-size:1.05rem;
  color:#293d31
}
.fee-note,.secure-note {
  font-size:.67rem;
  line-height:1.55;
  color:#89918a
}
.checkout-submit {
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-top:11px;
  padding:13px 16px
}
.checkout-message {
  border-radius:9px;
  padding:10px;
  background:#f9ece6;
  color:#8f5138;
  font-size:.73rem;
  margin:10px 0
}
.success-page {
  min-height:65vh;
  padding:55px 16px;
  background:#f7f6f1;
  display:grid;
  place-items:center
}
.success-card {
  width:min(570px,100%);
  background:white;
  border:1px solid #e8e9e1;
  border-radius:23px;
  padding:38px;
  text-align:center;
  box-shadow:0 15px 45px #65412612
}
.success-check {
  width:54px;
  height:54px;
  margin:0 auto 17px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8f1e9;
  color:#286546;
  font-size:1.5rem
}
.success-card h1 {
  font:700 2.2rem 'Playfair Display';
  color:#283d31;
  margin:10px 0
}
.success-card>p {
  color:#748078;
  line-height:1.7
}
.success-order,.success-delivery {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-top:1px solid #edf0e9;
  text-align:left
}
.success-order span {
  font-size:.75rem;
  color:#818c83
}
.success-order b {
  color:#654126
}
.success-delivery {
  justify-content:flex-start;
  gap:11px;
  margin-bottom:19px
}
.success-icon {
  width:34px;
  height:34px;
  border-radius:9px;
  background:#f0eadf;
  color:#654126;
  display:grid;
  place-items:center
}
.success-delivery b,.success-delivery small {
  display:block
}
.success-delivery b {
  font-size:.78rem
}
.success-delivery small {
  font-size:.68rem;
  color:#849087;
  margin-top:3px
}
.success-link {
  margin-left:13px;
  color:#654126;
  font-weight:700;
  font-size:.8rem
}
.success-demo {
  display:block;
  color:#9a9f99;
  font-size:.65rem;
  margin-top:21px
}
@media(max-width:950px) {
  .checkout-layout {
    grid-template-columns:minmax(0,1fr) 310px;
    gap:12px
  }
  .checkout-card {
    padding:18px
  }
  .checkout-summary {
    padding:17px
  }
}
@media(max-width:750px) {
  .checkout-page {
    padding:28px 0 55px
  }
  .checkout-layout {
    grid-template-columns:1fr
  }
  .checkout-summary {
    position:static;
    grid-row:auto
  }
  .checkout-heading h1 {
    font-size:2rem
  }
}
/* Keeps the order summary and payment action after delivery details on phones. */
.login-required-dialog {
  width:min(440px,calc(100% - 28px));
  padding:0;
  border:1px solid #e8e9e1;
  border-radius:22px;
  color:#29372f;
  box-shadow:0 24px 80px #10271f45
}
.login-required-dialog::backdrop { background:#14251dcc; backdrop-filter:blur(3px) }
.login-required-content { padding:28px }
.login-required-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:15px;
  border-radius:15px;
  background:#f4ead6;
  color:#654126;
  font-size:1.35rem
}
.login-required-content h2 { margin:4px 0 8px; color:#193e31; font:700 1.5rem 'Playfair Display',serif }
.login-required-content p { margin:0; color:#718077; font-size:.9rem; line-height:1.6 }
.login-required-actions { display:grid; gap:10px; margin-top:21px }
.login-required-actions .btn { text-align:center; text-decoration:none }
.login-required-actions button { font:inherit; cursor:pointer }
.login-required-close {
  position:absolute;
  top:12px;
  right:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f2f4f0;
  color:#45574b;
  font-size:1.2rem;
  cursor:pointer
}
@media(max-width:500px) {
  .checkout-fields {
    grid-template-columns:1fr;
    gap:0
  }
  .checkout-fields .full-field {
    grid-column:auto
  }
  .checkout-card {
    padding:16px
  }
  .checkout-summary {
    padding:16px
  }
  .success-card {
    padding:28px 20px
  }
  .success-card h1 {
    font-size:1.9rem
  }
  .option-badge {
    font-size:.55rem;
    padding:5px 7px
  }
}
/* Explains the short inventory reservation placed before online payment. */
.stock-hold-note {
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin:14px 0 10px;
  padding:13px;
  border:1px solid #ead8b6;
  border-radius:12px;
  background:#fff9ed
}
.stock-hold-icon {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:9px;
  background:#f4e7cc;
  color:#805d2e
}
.stock-hold-note h3 {
  margin:1px 0 5px;
  color:#60472c;
  font-size:.76rem
}
.stock-hold-note p {
  margin:0;
  color:#756b5d;
  font-size:.68rem;
  line-height:1.55
}
.stock-hold-note strong {
  color:#60472c
}
@media(max-width:500px) {
  .stock-hold-note {
    padding:11px
  }
  .stock-hold-note p {
    font-size:.67rem
  }
}
/* Presents Ibadan delivery, rider, and pickup methods as distinct choices. */
.ibadan-method-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:14px
}
.ibadan-method-options .delivery-option {
  align-items:flex-start;
  padding:12px
}
.ibadan-method-options .option-copy b {
  font-size:.75rem
}
.ibadan-method-options .option-copy small {
  line-height:1.45
}
.pickup-note {
  display:grid;
  gap:3px;
  margin:12px 0;
  padding:13px;
  border:1px solid #dfe8df;
  border-radius:11px;
  background:#f1f6f0;
  color:#506958;
  font-size:.75rem;
  line-height:1.55
}
.pickup-note b {
  color:#285b41
}
@media(max-width:650px) {
  .ibadan-method-options {
    grid-template-columns:1fr
  }
  .ibadan-method-options .delivery-option {
    align-items:center
  }
}