.checkout-layout {
  grid-template-columns:minmax(0,1.45fr) minmax(23rem,.95fr);
}

.checkout-panel {
  position:static;
  max-height:none;
  overflow:visible;
}

.checkout-panel #cartSummary {
  padding-bottom:.8rem;
  border-bottom:1px solid var(--line);
}

.free-shipping-progress {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:.75rem;
  margin:1rem 0 .2rem;
  padding:.9rem 1rem;
  border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line));
  border-radius:.8rem;
  background:color-mix(in srgb,var(--blue) 7%,var(--soft));
  color:var(--ink);
}

.free-shipping-progress.is-earned {
  border-color:color-mix(in srgb,#168252 45%,var(--line));
  background:color-mix(in srgb,#3fb77b 10%,var(--soft));
}

.free-shipping-progress-icon {
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:1rem;
  font-weight:800;
}

.free-shipping-progress.is-earned .free-shipping-progress-icon {
  background:#168252;
}

.free-shipping-progress strong {
  display:block;
  line-height:1.35;
}

.free-shipping-progress p {
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}

.checkout-panel form {
  margin-top:1.25rem;
}

.checkout-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.checkout-field {
  display:block;
  min-width:0;
  margin:0;
  color:var(--ink);
  font-size:.94rem;
  font-weight:700;
}

.checkout-field-wide {
  grid-column:1 / -1;
}

.checkout-field > span {
  display:block;
  margin-bottom:.45rem;
}

.checkout-field small {
  color:var(--muted);
  font-size:.78rem;
  font-weight:500;
}

.checkout-field input,
.checkout-field select {
  width:100%;
  min-height:3.15rem;
  padding:.72rem .82rem;
  border:1px solid var(--line);
  border-radius:.7rem;
  background:var(--white);
  color:var(--ink);
  font:inherit;
  font-size:1rem;
}

.checkout-field input:focus-visible,
.checkout-field select:focus-visible {
  outline:3px solid color-mix(in srgb,var(--blue) 38%,transparent);
  outline-offset:2px;
  border-color:var(--blue);
}

.checkout-field select:disabled,
.checkout-field input:disabled {
  cursor:not-allowed;
  opacity:.65;
}

.honeypot-field {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.retry-districts {
  display:inline-flex;
  margin-top:1rem;
  font-size:.9rem;
}

.retry-districts[hidden] {
  display:none;
}

.checkout-status {
  min-height:1.5em;
  margin:.7rem 0 0;
  color:var(--muted);
  line-height:1.55;
}

.map-privacy {
  margin:.5rem 0 0;
  color:var(--muted);
  line-height:1.55;
}

.checkout-status.is-error {
  color:#b42318;
}

.delivery-map {
  position:relative;
  isolation:isolate;
  margin-top:1rem;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--blue) 16%,var(--line));
  border-radius:1.15rem;
  background:var(--white);
  box-shadow:0 1rem 2.6rem rgba(23,31,58,.1);
}

.delivery-map-canvas {
  display:block;
  width:100%;
  height:18rem;
  min-height:18rem;
  background:var(--soft);
}

.delivery-map-canvas:focus-visible {
  outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);
  outline-offset:-3px;
}

.delivery-map.is-geocoding .delivery-map-canvas {
  cursor:progress;
}

.delivery-map .leaflet-container {
  color:#1f2937;
  font-family:inherit;
  font-size:.78rem;
  cursor:grab;
  touch-action:none;
}

.delivery-map .leaflet-container:active {
  cursor:grabbing;
}

.delivery-map .leaflet-control-zoom.leaflet-bar {
  overflow:hidden;
  margin-top:.85rem;
  margin-right:.85rem;
  border:1px solid rgba(56,46,173,.15);
  border-radius:.9rem;
  background:rgba(255,255,255,.96);
  box-shadow:0 .55rem 1.4rem rgba(22,29,54,.18);
}

.delivery-map .leaflet-control-zoom a {
  display:grid;
  place-items:center;
  width:3.2rem;
  min-width:3.2rem;
  height:3.2rem;
  min-height:3.2rem;
  border:0;
  border-bottom:1px solid rgba(56,46,173,.12);
  background:transparent;
  color:#263044;
  font-family:inherit;
  font-size:1.45rem;
  font-weight:650;
  line-height:1;
  text-indent:0;
  text-decoration:none;
}

.delivery-map .leaflet-control-zoom a:last-child {
  border-bottom:0;
}

.delivery-map .leaflet-control-zoom a:hover,
.delivery-map .leaflet-control-zoom a:focus-visible {
  background:#f0efff;
  color:#3022bd;
}

.delivery-map .leaflet-control-zoom a:active {
  background:#e4e1ff;
}

.delivery-map .leaflet-control-zoom a.leaflet-disabled {
  background:#f4f5f8;
  color:#9aa1af;
}

.delivery-map .leaflet-control-attribution {
  color:#263044;
}

.delivery-map .leaflet-control-zoom a:focus-visible,
.delivery-map .leaflet-control-attribution a:focus-visible {
  outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);
  outline-offset:1px;
}

.delivery-map .leaflet-control-attribution {
  padding:.18rem .35rem;
  background:rgba(255,255,255,.9);
}

.delivery-map .leaflet-control-attribution a {
  color:#1c5ca8;
  text-decoration:underline;
  text-underline-offset:.14em;
}

.delivery-pin-shell {
  border:0;
  background:transparent;
  will-change:transform;
  backface-visibility:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.delivery-pin-dot {
  position:absolute;
  top:3px;
  left:50%;
  display:block;
  width:32px;
  height:32px;
  margin-left:-16px;
  transform:translateZ(0) rotate(-45deg);
  border:3px solid #fff;
  border-radius:50% 50% 50% 0;
  background:var(--blue);
  box-shadow:0 .35rem .75rem rgba(18,25,46,.32);
  will-change:transform;
}

.delivery-pin-shell.leaflet-drag-target,
.delivery-pin-shell.leaflet-marker-draggable,
.delivery-pin-shell.leaflet-zoom-animated {
  transition:none !important;
}

.delivery-pin-shell.leaflet-drag-target .delivery-pin-dot {
  box-shadow:0 .2rem .55rem rgba(18,25,46,.25);
}

.delivery-pin-dot::after {
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#fff;
}

.delivery-pin-shell.is-provisional .delivery-pin-dot {
  background:#59657a;
  opacity:.82;
}

.delivery-map p {
  margin:0;
  padding:.7rem .8rem;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.4;
}

.delivery-map a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:.18em;
}

.checkout-consent {
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin:1rem 0 .4rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.5;
}

.checkout-consent input {
  flex:none;
  width:1.2rem;
  height:1.2rem;
  margin-top:.1rem;
  accent-color:var(--blue);
}

.buy-order {
  margin-top:.75rem;
}

.online-payment-blocker {
  display:grid;
  gap:.3rem;
  margin:1rem 0 .2rem;
  padding:.9rem 1rem;
  border:1px solid color-mix(in srgb,#c2410c 42%,var(--line));
  border-radius:.8rem;
  background:color-mix(in srgb,#f97316 9%,var(--soft));
  color:var(--ink);
}

.online-payment-blocker strong {
  line-height:1.35;
}

.online-payment-blocker p {
  margin:0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}

.payment-hero .page-hero-layout {
  max-width:54rem;
}

.payment-layout {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(20rem,.75fr);
  align-items:start;
  gap:clamp(1.25rem,3vw,2.5rem);
}

.payment-layout[hidden] {
  display:none;
}

.payment-review,
.payment-summary {
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--line);
  border-radius:1.1rem;
  background:var(--white);
  box-shadow:0 1rem 2.5rem rgba(37,31,74,.06);
}

.payment-review h2,
.payment-summary h2 {
  margin:.35rem 0 1.25rem;
  font-size:clamp(1.55rem,3vw,2.15rem);
}

.payment-summary {
  position:sticky;
  top:calc(var(--header-height,5.5rem) + 1.25rem);
}

.payment-items {
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-block:1px solid var(--line);
}

.payment-items li {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}

.payment-items li+li {
  border-top:1px solid var(--line);
}

.payment-items li>span {
  display:grid;
  gap:.25rem;
  min-width:0;
}

.payment-items small {
  color:var(--muted);
  line-height:1.45;
}

.payment-items li>strong {
  flex:none;
  white-space:nowrap;
}

.payment-delivery {
  margin-top:1.5rem;
}

.payment-delivery h3 {
  margin:0 0 .75rem;
  font-size:1.15rem;
}

.payment-delivery dl {
  display:grid;
  gap:.75rem;
  margin:0 0 1rem;
}

.payment-delivery dl>div {
  display:grid;
  grid-template-columns:minmax(6rem,.32fr) minmax(0,1fr);
  gap:.75rem;
}

.payment-delivery dl>div[hidden] {
  display:none;
}

.payment-delivery dt {
  color:var(--muted);
  font-weight:600;
}

.payment-delivery dd {
  margin:0;
  overflow-wrap:anywhere;
}

.payment-summary .summary-line {
  padding:.7rem 0;
}

.payment-summary .summary-total {
  margin-top:.25rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}

.payment-unavailable {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  margin:1.25rem 0;
  padding:1rem;
  border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));
  border-radius:.85rem;
  background:color-mix(in srgb,var(--blue) 7%,var(--soft));
}

.payment-unavailable[hidden],
.payment-pay[hidden] {
  display:none;
}

.payment-lock {
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:1rem;
}

.payment-unavailable strong {
  display:block;
  margin-bottom:.2rem;
}

.payment-unavailable p {
  margin:0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.55;
}

.payment-test-mode {
  display:grid;
  gap:.18rem;
  margin:1.25rem 0 .85rem;
  padding:.9rem 1rem;
  border:1px solid color-mix(in srgb,#d97706 40%,var(--line));
  border-radius:.85rem;
  background:color-mix(in srgb,#f59e0b 10%,var(--soft));
}

.payment-test-mode[hidden] {
  display:none;
}

.payment-test-mode span,
.payment-status {
  color:var(--muted);
  font-size:.86rem;
  line-height:1.5;
}

.payment-pay {
  width:100%;
  margin:.4rem 0 .8rem;
  justify-content:center;
}

.payment-status {
  min-height:1.4rem;
  margin:0 0 .85rem;
}

.payment-status.is-error {
  color:#a12a2a;
}

.payment-success[hidden] {
  display:none;
}

.payment-success:focus {
  outline:none;
}

.preview-notice,
.order-success,
.legacy-order-card {
  padding:clamp(1.5rem,4vw,3rem);
  border:1px solid var(--line);
  border-radius:1.15rem;
  background:var(--soft);
}

.preview-notice {
  margin:0 0 1.5rem;
  color:var(--muted);
}

.order-success {
  max-width:50rem;
  margin-inline:auto;
  text-align:center;
}

.order-success h2,
.legacy-order-card h2 {
  margin-bottom:.75rem;
  font-size:clamp(1.8rem,4vw,2.75rem);
}

.order-success p,
.legacy-order-card p {
  color:var(--muted);
}

.legacy-order-card {
  max-width:52rem;
  margin-inline:auto;
}

html[data-theme="dark"] .checkout-field input,
html[data-theme="dark"] .checkout-field select,
html[data-theme="dark"] .delivery-map {
  background:var(--ui-bg);
  color:var(--ui-ink);
  border-color:var(--ui-line);
}

html[data-theme="dark"] .delivery-map .leaflet-control-zoom a {
  border-color:var(--ui-line);
  background:transparent;
  color:var(--ui-ink);
}

html[data-theme="dark"] .delivery-map .leaflet-control-zoom.leaflet-bar {
  border-color:var(--ui-line);
  background:color-mix(in srgb,var(--ui-bg) 96%,transparent);
  box-shadow:0 .6rem 1.5rem rgba(0,0,0,.35);
}

html[data-theme="dark"] .delivery-map .leaflet-control-zoom a:hover,
html[data-theme="dark"] .delivery-map .leaflet-control-zoom a:focus-visible {
  background:var(--ui-bg-alt);
}

html[data-theme="dark"] .delivery-map .leaflet-control-attribution {
  background:color-mix(in srgb,var(--ui-bg) 91%,transparent);
  color:var(--ui-muted);
}

html[data-theme="dark"] .delivery-map .leaflet-control-attribution a {
  color:#b9c8ff;
}

html[data-theme="dark"] .checkout-status.is-error {
  color:#ffb4ab;
}

html[data-theme="dark"] .payment-review,
html[data-theme="dark"] .payment-summary {
  border-color:var(--ui-line);
  background:var(--ui-bg);
  box-shadow:none;
}

html[data-theme="dark"] .online-payment-blocker {
  border-color:color-mix(in srgb,#fdba74 48%,var(--ui-line));
  background:color-mix(in srgb,#c2410c 18%,var(--ui-bg-alt));
}

html[data-theme="dark"] .payment-unavailable {
  border-color:color-mix(in srgb,#b9c8ff 34%,var(--ui-line));
  background:color-mix(in srgb,var(--blue) 18%,var(--ui-bg-alt));
}

html[data-theme="dark"] .payment-test-mode {
  border-color:color-mix(in srgb,#fbbf24 42%,var(--ui-line));
  background:color-mix(in srgb,#d97706 18%,var(--ui-bg-alt));
}

html[data-theme="dark"] .payment-status.is-error {
  color:#ffb4ab;
}

@media (max-width:1000px) {
  .checkout-layout,
  .payment-layout {
    grid-template-columns:1fr;
  }
  .checkout-panel {
    max-height:none;
    overflow:visible;
  }
  .payment-summary {
    position:static;
  }
}

@media (max-width:620px) {
  .checkout-fields {
    grid-template-columns:1fr;
  }
  .checkout-field-wide {
    grid-column:auto;
  }
  .checkout-panel {
    padding:1.3rem 1rem;
  }
  .retry-districts,
  .buy-order {
    width:100%;
    justify-content:center;
  }
  .delivery-map-canvas {
    height:15rem;
    min-height:15rem;
  }
  .delivery-map .leaflet-control-zoom a {
    width:3.2rem;
    min-width:3.2rem;
    height:3.2rem;
    min-height:3.2rem;
    font-size:1.55rem;
  }
  .free-shipping-progress {
    grid-template-columns:1fr;
    padding:.9rem;
  }
  .payment-review,
  .payment-summary {
    padding:1.2rem 1rem;
  }
  .payment-items li,
  .payment-delivery dl>div {
    grid-template-columns:1fr;
  }
  .payment-items li {
    display:grid;
  }
  .payment-unavailable {
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce) {
  .checkout-panel * {
    scroll-behavior:auto !important;
  }
}