/* ──────────────────────────────────────────────────────────────
   2026/css/checkout.css
   ──────────────────────────────────────────────────────────────
   Page-specific styles for /checkout.

   Tokens: --ink, --ink-2, --ink-3, --rule, --bg, --bg-elev,
           --accent, --accent-ink (see base.css :root)
   Fonts:  "Playfair Display" display · "Inter" UI sans
   ────────────────────────────────────────────────────────────── */

/* ════════ Page shell — single column, per checkout-guide ═══
   The guide's spec narrows the page to 720px and stacks every
   section in one column. Earlier this file ran a 1180-wide
   two-column grid (.checkout-page__grid + .__main + .__aside);
   those rules are now removed because the live page no longer
   wraps anything in that grid. */

.cas-main.checkout-page { padding-bottom: 96px; }
.checkout-page__inner {
  padding: 56px 0 0;
  max-width: 720px;
}

.checkout-page__header { margin: 32px 0 8px; }
.checkout-page__title {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  margin: 6px 0 12px;
}
.checkout-page__sub {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--ink-3);
  max-width: 560px;
  line-height: 1.55;
}
.checkout-page__sub em { font-style: italic; color: var(--ink); }

/* ════════ Step rail ════════════════════════════════════════ */

.checkout-rail__list {
  display: flex; gap: 8px; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-family: "Inter", sans-serif; font-size: 13px;
  color: var(--ink-3);
}
.checkout-rail__step {
  display: inline-flex; align-items: center; gap: 8px;
}
.checkout-rail__step + .checkout-rail__step::before {
  content: ""; width: 24px; height: 1px; background: var(--rule);
  margin: 0 4px;
}
.checkout-rail__num {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-sunken); color: var(--ink-3);
  font-size: 11px; font-weight: 600;
}
.checkout-rail__step.is-done    .checkout-rail__num {
  background: var(--accent); color: var(--accent-ink);
}
.checkout-rail__step.is-current .checkout-rail__num {
  background: var(--ink); color: var(--accent-ink);
}
.checkout-rail__step.is-current { color: var(--ink); font-weight: 600; }

/* Step blocks: rules duplicated lower in this file (lines ~1040+)
   intentionally win via cascade for the guide-aligned spacing.
   Kept-empty section header so the file's outline still reads. */
/* ════════ Step blocks ══════════════════════════════════════ */

/* ════════ Delivery picker (4 radio cards) ══════════════════ */

.delivery-picker {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: 12px;
}

.delivery-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.delivery-card:hover {
  border-color: var(--ink-2);
  background: var(--bg);
}
.delivery-card.is-selected {
  border-color: var(--ink);
  background: var(--bg);
  box-shadow: inset 3px 0 0 var(--accent);
}
.delivery-card.is-pending { opacity: 0.65; pointer-events: none; }

/* Native radio hidden but focusable for a11y */
.delivery-card input[type="radio"] {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.delivery-card input[type="radio"]:focus-visible + .delivery-card__radio {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.delivery-card__radio {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
  transition: border-color 140ms ease;
}
.delivery-card__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform 140ms ease;
}
.delivery-card.is-selected .delivery-card__radio { border-color: var(--ink); }
.delivery-card.is-selected .delivery-card__dot   { transform: scale(1); }

.delivery-card__body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.delivery-card__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.delivery-card__label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.delivery-card__tag {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
}
.delivery-card__sub {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Legacy fallback (no JS) ────────────────────────────────── */

.delivery-pill {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
}
.delivery-pill strong {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600; font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}
.delivery-pill span {
  font-family: "Inter", sans-serif;
  font-size: 13px; color: var(--ink-3);
  line-height: 1.5;
}

/* ════════ Form / submit ════════════════════════════════════ */

.checkout-form__submit { margin-top: 40px; }
.checkout-form__pay { width: 100%; padding: 18px 24px; font-size: 16px; }
.checkout-form__fineprint {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 16px;
  text-align: center;
}
.checkout-form__check {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter", sans-serif; font-size: 13px;
  color: var(--ink-2);
  margin-top: 16px;
}

.payment-frame { min-height: 200px; padding: 4px 0; }

/* ════════ Braintree drop-in v3 hijack ══════════════════════
   Drop-in renders its own DOM into #braintree-container. We
   wrap it in [data-bt-hijack] and override every visible
   selector to match the 2026 ink/rule/Inter/Playfair system.
   PCI-scoped iframes (card-number / expiry / cvv) keep their
   default behavior; we only theme the surrounding chrome and
   the typography injected via Hosted Fields styles is set
   server-side in the dropin.create() call.

   Spec ref: drop-in v3 emits stable [data-braintree-id="…"]
   hooks. We target those rather than the .braintree-* classes
   so this survives minor SDK upgrades.
   ──────────────────────────────────────────────────────── */

[data-bt-hijack] {
  font-family: "Inter", sans-serif;
  color: var(--ink);
}

/* ── Kill drop-in's own headings — Step 04 already says "Payment" */
[data-bt-hijack] [data-braintree-id="choose-a-way-to-pay"],
[data-bt-hijack] [data-braintree-id="other-ways-to-pay"],
[data-bt-hijack] [data-braintree-id="methods-label"],
[data-bt-hijack] [data-braintree-id="methods-edit"],
[data-bt-hijack] [data-braintree-id="card-sheet-header"],
[data-bt-hijack] [data-braintree-id="paypal-sheet-header"],
[data-bt-hijack] [data-braintree-id="paypal-credit-sheet-header"],
[data-bt-hijack] [data-braintree-id="apple-pay-sheet-header"],
[data-bt-hijack] [data-braintree-id="google-pay-sheet-header"],
[data-bt-hijack] [data-braintree-id="venmo-sheet-header"] {
  display: none !important;
}

/* ── Outer container: strip default styling */
[data-bt-hijack] .braintree-dropin {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ── "Other ways to pay" picker (the row of method buttons) */
[data-bt-hijack] [data-braintree-id="payment-options-container"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 0 0 24px;
}
[data-bt-hijack] .braintree-option {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
  min-height: auto;
  width: auto;
  float: none;
}
[data-bt-hijack] .braintree-option:hover {
  border-color: var(--ink-2);
  background: var(--bg);
}
[data-bt-hijack] .braintree-option.braintree-disabled {
  opacity: 0.4;
  pointer-events: none;
}
[data-bt-hijack] .braintree-option__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
[data-bt-hijack] .braintree-option__logo svg {
  width: 36px;
  height: 22px;
}
[data-bt-hijack] .braintree-option__label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 0;
  letter-spacing: -0.005em;
}
[data-bt-hijack] .braintree-option__disabled-message {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0;
}

/* ── Active sheet (card form, etc.) */
[data-bt-hijack] [data-braintree-id="sheet-container"] { margin-top: 0; }
[data-bt-hijack] .braintree-sheet {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 0;
  margin: 0;
  padding: 24px;
}
[data-bt-hijack] .braintree-sheet__content {
  padding: 0;
}

/* ── Card form fields */
[data-bt-hijack] .braintree-form__field-group {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
[data-bt-hijack] .braintree-form__label {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 6px;
  padding: 0;
}
[data-bt-hijack] .braintree-form__descriptor {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 6px;
}
/* The outer .braintree-form__field is OUR styled box.
   Inside it, drop-in renders .braintree-form__hosted-field which
   wraps the actual iframe — and ships its own border/background/
   padding via dropin.min.css (loaded at runtime by the SDK, so
   it wins on equal specificity). We use !important to nuke that
   inner chrome — blast radius is zero because every rule is
   scoped under [data-bt-hijack]. */
[data-bt-hijack] .braintree-form__field {
  position: relative;
  background: var(--bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 44px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  transition: border-color 120ms ease;
}
[data-bt-hijack] .braintree-form__field:hover {
  border-color: var(--ink-3) !important;
}
[data-bt-hijack] .braintree-form__hosted-field,
[data-bt-hijack] .braintree-hosted-fields-iframe-container,
[data-bt-hijack] .braintree-form__hosted-field iframe {
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Focus state — drop-in adds .braintree-form__field-group--has-focus */
[data-bt-hijack] .braintree-form__field-group--has-focus .braintree-form__field {
  border-color: var(--ink-2) !important;
  box-shadow: none !important;
}

/* Error state */
[data-bt-hijack] .braintree-form__field-group--has-error .braintree-form__field {
  border-color: #b94a48 !important;
}
[data-bt-hijack] .braintree-form__field-error {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #b94a48;
  margin-top: 6px;
  padding: 0;
}

/* ── Card-icon row (inside the sheet header — we hid the header but
       icons still render on the field). Move them above fields. */
[data-bt-hijack] [data-braintree-id="card-view-icons"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
}
[data-bt-hijack] [data-braintree-id="card-view-icons"] svg {
  width: 32px;
  height: 20px;
  display: block;
}

/* ── MM/YY + (CVV if shown) row
   Drop-in puts both the date/CVV field-groups AND the privacy notice
   inside .braintree-form__flexible-fields. Use grid auto-flow so the
   field-groups share a row and the notice (which we span full-width
   below) drops to its own row instead of overlapping. */
[data-bt-hijack] .braintree-form__flexible-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}
[data-bt-hijack] .braintree-form__flexible-fields > .braintree-form__field-group {
  grid-column: span 1;
  margin: 0;
}
/* When CVV is hidden, expiration takes the full row on its own */
[data-bt-hijack] .braintree-form__flexible-fields > .braintree-form__field-group:only-of-type {
  grid-column: 1 / -1;
  max-width: 50%;
}
@media (max-width: 480px) {
  [data-bt-hijack] .braintree-form__flexible-fields {
    grid-template-columns: 1fr;
  }
  [data-bt-hijack] .braintree-form__flexible-fields > .braintree-form__field-group:only-of-type {
    max-width: 100%;
  }
}

/* ── Field-side icons (card brand swatch, error icon) */
[data-bt-hijack] .braintree-form__icon-container {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
[data-bt-hijack] .braintree-icon--bordered {
  border-radius: 0;
}

/* ── Notice-of-collection footer (PayPal privacy link) */
[data-bt-hijack] .braintree-form__notice-of-collection {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--rule);
}
[data-bt-hijack] .braintree-form__notice-of-collection a {
  color: var(--ink-2);
  text-underline-offset: 3px;
}

/* ── Sheet-level error banner */
[data-bt-hijack] .braintree-sheet__error {
  background: color-mix(in oklab, #b94a48 8%, var(--bg));
  border: 1px solid color-mix(in oklab, #b94a48 30%, var(--rule));
  color: color-mix(in oklab, #b94a48 80%, var(--ink));
  padding: 12px 14px;
  margin: 16px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

/* ── "Choose another way to pay" toggle button */
[data-bt-hijack] .braintree-toggle {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin: 16px 0 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
[data-bt-hijack] .braintree-toggle:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}

/* ── Saved-method tiles (returning patron) */
[data-bt-hijack] .braintree-method {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 14px 16px;
  margin: 0 0 8px;
  transition: border-color 140ms;
}
[data-bt-hijack] .braintree-method:hover { border-color: var(--ink-2); }
[data-bt-hijack] .braintree-method--active {
  border-color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}
[data-bt-hijack] .braintree-method__check {
  background: var(--ink);
}

/* ── Loader */
[data-bt-hijack] .braintree-loader__container {
  background: transparent;
}
[data-bt-hijack] .braintree-loader__lock {
  color: var(--ink-3);
}

/* ── Save-card checkbox row (we already render our own version
       below the drop-in; hide drop-in's if it appears) */
[data-bt-hijack] [data-braintree-id="save-card-field-group"] {
  display: none !important;
}

/* ════════ Account step (/checkout/account) ════════════════
   Scoped to .checkout-account__pane. The Perch shop's
   customer_create template uses legacy Bootstrap-style classes
   (.row / .col-* / .form-group / .sm-form-control / .panel /
   .button.fright) which aren't in our base sheet. Rather than
   loading Bootstrap, we re-implement just what this template
   needs — scoped so it can't bleed.
   ──────────────────────────────────────────────────────── */

.checkout-account__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}
.checkout-account__grid.is-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: start;
}
@media (max-width: 900px) {
  .checkout-account__grid { grid-template-columns: 1fr; gap: 40px; }
}

.checkout-account__pane {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 32px 36px 36px;
}
@media (max-width: 600px) {
  .checkout-account__pane { padding: 24px 20px 28px; }
}

.checkout-account__pane-head { margin-bottom: 24px; }
.checkout-account__pane-title {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ink);
}
.checkout-account__pane-sub {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* Section subhead inside the pane (Billing Address / Shipping Address) */
.checkout-account__pane h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.checkout-account__pane h3:not(:first-child) { margin-top: 32px; }

/* Re-implement the bootstrap-ish grid INSIDE the pane only */
.checkout-account__pane .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.checkout-account__pane .row > [class*="col-"] {
  padding: 0 8px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.checkout-account__pane .col-12 { width: 100%; }
.checkout-account__pane .col-6  { width: 50%; }
.checkout-account__pane .col-3  { width: 25%; }
.checkout-account__pane .col-md-6 { width: 100%; }
.checkout-account__pane .col-lg-6 { width: 100%; }
@media (min-width: 768px) {
  .checkout-account__pane .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .checkout-account__pane .col-lg-6 { width: 50%; }
}
@media (max-width: 540px) {
  .checkout-account__pane .col-3,
  .checkout-account__pane .col-6 { width: 100%; }
}
.checkout-account__pane .w-100 { width: 100%; height: 0; }
.checkout-account__pane .clear { clear: both; width: 100%; height: 0; }

.checkout-account__pane .form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.checkout-account__pane label {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: block;
}
.checkout-account__pane label.mb-0 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin: 4px 0 0;
  cursor: pointer;
}
.checkout-account__pane label.mb-0 input[type="checkbox"] { margin: 0; }

/* Inputs / selects */
.checkout-account__pane .sm-form-control,
.checkout-account__pane input[type="text"],
.checkout-account__pane input[type="email"],
.checkout-account__pane input[type="tel"],
.checkout-account__pane select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 120ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.checkout-account__pane select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.checkout-account__pane .sm-form-control:hover,
.checkout-account__pane select:hover {
  border-color: var(--ink-3);
}
.checkout-account__pane .sm-form-control:focus,
.checkout-account__pane select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

/* "Same as Billing" panel (above shipping fields) */
.checkout-account__pane .panel,
.checkout-account__pane .panel-default {
  background: color-mix(in oklab, var(--accent) 6%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--rule));
  padding: 0;
  margin: 0 8px 16px;
}
.checkout-account__pane .panel-body {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.checkout-account__pane .panel-body input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.checkout-account__pane .panel-body .form-group {
  margin: 0;
  flex-direction: row;
}

/* Required-fields footnote */
.checkout-account__pane > form > .row > .col-lg-6 > p,
.checkout-account__pane p:has(+ .row),
.checkout-account__pane form > p {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--ink-3);
  margin: 12px 8px 0;
}

/* Submit row */
.checkout-account__pane form > div:last-child:has(input[type="submit"]) {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.checkout-account__pane .button,
.checkout-account__pane input[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  min-width: 180px;
}
.checkout-account__pane .button:hover,
.checkout-account__pane input[type="submit"].button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.checkout-account__pane .button.fright { /* legacy float helper — flex parent handles alignment */
  float: none;
}

/* Cart peek strip at the bottom of the page */
.checkout-account__cart-peek {
  border-top: 1px solid var(--rule);
  padding: 32px 0 0;
  margin-top: 16px;
}
.checkout-account__cart-peek .checkout-account__pane-title {
  font-size: 18px;
  margin-bottom: 16px;
}

.cart-peek__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  list-style: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.cart-peek__item:last-child { border-bottom: 0; }
.cart-peek__detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-peek__title  { font-weight: 600; color: var(--ink); }
.cart-peek__variant { font-size: 12px; color: var(--ink-3); }
.cart-peek__qty    { font-size: 13px; color: var(--ink-3); }
.cart-peek__price  {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ════════ Trust strip (aside footer) ═══════════════════════ */

.checkout-trust {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 10px;
  font-family: "Inter", sans-serif; font-size: 13px;
  color: var(--ink-3);
}
.checkout-trust li { display: flex; align-items: center; gap: 10px; }
.checkout-trust svg { color: var(--accent); flex-shrink: 0; }

/* ════════ Single-column page (Option A) ════════════════════ */

.checkout-page__grid--single {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}
.checkout-page__grid--single .checkout-page__main { width: 100%; }
.checkout-page__grid--single .checkout-page__aside { display: none; }

/* Order summary at the top of single-column flow */
.checkout-page__summary {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 20px 24px;
  margin: 0 0 40px;
}
.checkout-page__summary .cart-summary {
  /* override the sticky aside framing — we're not an aside any more */
  position: static;
  background: transparent;
  border: 0;
  padding: 0;
}
.checkout-page__summary .cart-summary__cta,
.checkout-page__summary .cart-summary__back,
.checkout-page__summary .cart-summary__promo {
  display: none;  /* CTAs live at bottom of page in single-column */
}

/* ════════ Gift step ═══════════════════════════════════════ */

.checkout-step--gift {
  background: color-mix(in oklab, var(--accent) 5%, var(--bg));
  border-top-color: color-mix(in oklab, var(--accent) 25%, var(--rule));
  margin: 0 -24px;
  padding: 32px 24px 36px;
}
@media (max-width: 600px) {
  .checkout-step--gift { margin: 0 -16px; padding: 28px 16px; }
}
.checkout-step__optional {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 12px;
  vertical-align: middle;
}
.gift-section__lede {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 56ch;
}
.gift-section__fineprint {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--ink-3);
  margin: 16px 0 0;
  line-height: 1.5;
}
.gift-section__nojs {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  padding: 16px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
}

.gift-picker { margin: 0; }

.gift-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0;
}
.gift-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;            /* >44px hit-target for elderly users */
  padding: 12px 22px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.gift-chip:hover:not(:disabled) {
  border-color: var(--ink-2);
  color: var(--ink);
}
.gift-chip.is-selected {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.gift-chip--amount {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  min-width: 84px;
}
.gift-chip:disabled { opacity: 0.55; cursor: progress; }

/* "Other amount" inline form */
.gift-other {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
}
.gift-other__label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.gift-other__row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.gift-other__prefix {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-2);
  padding-right: 2px;
}
.gift-other__input {
  flex: 0 0 140px;
  height: 48px;
  padding: 0 14px;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.gift-other__input:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink);
}
.gift-other__submit { min-height: 48px; padding: 0 20px; }
.gift-other__cancel { font-size: 13px; }

.gift-picker__err {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #b94a48;
  margin: 12px 0 0;
}

/* ──────────────────────────────────────────────────────────────
   2026 single-column checkout — ported from checkout_guide.php's
   inline <style>. These styles back the restructured checkout
   page (sections .checkout-step) and replace the older
   .checkout-section / .delivery-card / two-column .checkout-page__grid
   rules above (which are kept for any legacy templates still using
   them — safe to delete once they're all retired).
   ────────────────────────────────────────────────────────────── */

/* ── Step block ────────────────────────────────────────── */
.checkout-step {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}
.checkout-step:first-of-type { border-top: 0; }
.checkout-step__head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
}
.checkout-step__num {
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--accent);
  flex: 0 0 auto;
}
.checkout-step__title {
  font-family: "Playfair Display", serif; font-weight: 500;
  font-size: 26px; line-height: 1.15; margin: 0; color: var(--ink);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.checkout-step__optional,
.checkout-step__new {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.checkout-step__optional {
  color: var(--ink-3); background: var(--bg-sunken);
}
.checkout-step__new {
  color: var(--warn);
  background: color-mix(in oklch, var(--warn) 12%, var(--bg-elev));
  border: 1px solid color-mix(in oklch, var(--warn) 35%, transparent);
}
.checkout-step__body { font-family: "Inter", sans-serif; font-size: 15px; }
.checkout-step__intro {
  color: var(--ink-3); margin: 0 0 16px; line-height: 1.55; max-width: 60ch;
}
.checkout-step__note {
  background: color-mix(in oklch, var(--warn) 8%, var(--bg-elev));
  border: 1px solid color-mix(in oklch, var(--warn) 28%, transparent);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 18px;
  color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
}
.checkout-step__note a { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* ── Order summary (section 01) ────────────────────────── */
/* Line items live inside #cart-summary-region (first child of
   .order-summary); totals live inside #cart-totals-region (second
   child, also classed .order-summary__totals). The :first-child /
   :last-of-type selectors target each .order-summary__line within
   its region wrapper — they still work even though the wrapper
   div sits between the line and .order-summary. */
.order-summary { font-family: "Inter", sans-serif; }
.order-summary__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.order-summary__line:first-child { padding-top: 0; }
.order-summary__line:last-child  { border-bottom: 0; }
.order-summary__title {
  font-family: "Playfair Display", serif;
  font-weight: 500; font-size: 18px;
  color: var(--ink); line-height: 1.25;
}
.order-summary__meta {
  font-size: 13px; color: var(--ink-3); margin-top: 2px;
  line-height: 1.5;
}
.order-summary__price {
  font-family: "Playfair Display", serif;
  font-weight: 500; font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  align-self: start;
  white-space: nowrap;
}

.order-summary__totals {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14.5px; color: var(--ink-2);
}
.order-summary__row {
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.order-summary__row--grand {
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule);
  align-items: baseline;
}
.order-summary__row--grand span:first-child {
  font-family: "Playfair Display", serif; font-weight: 500; font-size: 18px; color: var(--ink);
}
.order-summary__row--grand b {
  font-family: "Playfair Display", serif; font-weight: 500; font-size: 30px; color: var(--ink);
}

.order-addresses {
  margin-top: 20px; padding: 14px 16px;
  background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 14px; color: var(--ink-2);
}
.order-addresses__lead { flex: 1; min-width: 0; }
.order-addresses strong { color: var(--ink); font-weight: 600; }
.order-addresses a,
.order-addresses__edit { color: var(--accent); font-weight: 600; font-size: 13px; }

/* ── Order note recap (read-only, shown when set) ──────── */
/* Mirrors .order-addresses' visual shape so the two cards read as
   a pair: name/address, then "and here's the note you sent us."
   Read-only — patrons edit on /cart or /support/donate. */
.order-notecard {
  margin-top: 10px; padding: 14px 16px;
  background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 10px;
  display: flex; gap: 12px; align-items: baseline;
  font-size: 14px; color: var(--ink-2);
}
.order-notecard__label {
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  flex: 0 0 auto;
}
.order-notecard__body {
  color: var(--ink); font-weight: 500;
  overflow-wrap: anywhere;
}

/* ── Delivery option cards (section 02) ────────────────── */
.delivery-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px;
}
@media (max-width: 540px) {
  .delivery-options { grid-template-columns: 1fr; }
}

.delivery-option {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border: 1.5px solid var(--rule); border-radius: 12px;
  background: var(--bg-elev); cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.delivery-option__input {
  position: absolute; opacity: 0; pointer-events: none;
}
.delivery-option:hover { border-color: var(--ink-3); }
.delivery-option:has(.delivery-option__input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Selected state — paints the card with a thicker accent border, a
   stronger background tint, an inset shadow, and recolors the icon +
   title so the active option reads unmistakably even from a distance.
   Both the native :checked pseudo and the .is-selected modifier
   (toggled by checkout-shipping.js) trigger the rule, so neither JS
   nor :has() support is required for the visual to land. */
.delivery-option:has(.delivery-option__input:checked),
.delivery-option.is-selected {
  border-color: var(--accent);
  border-width: 2.5px;
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-elev));
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.delivery-option:has(.delivery-option__input:checked) .delivery-option__icon,
.delivery-option.is-selected .delivery-option__icon {
  background: var(--accent);
  color: var(--accent-ink);
}
.delivery-option:has(.delivery-option__input:checked) .delivery-option__title,
.delivery-option.is-selected .delivery-option__title {
  color: var(--accent);
}
.delivery-option--rec {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.delivery-option__rec-tag {
  position: absolute; top: -10px; left: 14px;
  font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
  padding: 4px 10px; border-radius: 999px;
}
.delivery-option__icon {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--bg-sunken); border-radius: 8px;
  color: var(--ink-2);
}
.delivery-option__title {
  font-family: "Playfair Display", serif; font-weight: 500; font-size: 17px;
  color: var(--ink); line-height: 1.2;
}
.delivery-option__desc {
  font-size: 13.5px; color: var(--ink-3); line-height: 1.5;
}

/* ── Payment (section 04) ──────────────────────────────── */
.checkout-pay__intro {
  color: var(--ink-3); font-size: 14.5px; margin: 0 0 14px; line-height: 1.55;
}
.checkout-pay__intro em { font-style: normal; font-weight: 600; color: var(--ink); }

.checkout-pay__trust {
  margin-top: 14px; font-size: 12.5px; color: var(--ink-4);
  display: flex; gap: 6px; align-items: center; line-height: 1.5;
}
.checkout-pay__trust svg { flex: 0 0 auto; color: var(--ink-3); }

/* Hide the Drop-In template's own submit button — the real CTA is
   the big .checkout-submit below the payment section, which calls
   form.requestSubmit() to trigger Braintree's tokenisation handler.
   See pages/purchases/checkout.2026.php and templates/shop/gateways/
   braintree_payment_form.html. */
form#payment-form > div > input[type="submit"],
[data-bt-hijack] input[type="submit"] {
  display: none;
}

/* ── Submit + fineprint (per checkout-guide) ─────────────── */
.checkout-submit {
  margin-top: 36px; width: 100%;
  background: var(--ink); color: var(--accent-ink);
  font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600;
  padding: 20px 24px; border: 0; border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.checkout-submit:hover { background: var(--accent); }
.checkout-submit[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}
.checkout-fineprint {
  font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--ink-3);
  text-align: center; margin: 14px 0 0; line-height: 1.55;
}
.checkout-fineprint a { color: var(--ink-2); text-decoration: underline; }


/* ── Address-edit slide-down tray ─────────────────────────────────
   Replaces the old Bootstrap modal. The tray lives in normal page
   flow at the bottom of <main>, hidden by default (max-height: 0).
   Clicking "Edit" on the .order-addresses card injects the form
   into .address-edit-tray__body and adds .is-open, which expands
   max-height — a clean slide-down on every viewport.
   ─────────────────────────────────────────────────────────────── */
.address-edit-tray {
  max-width: 720px;
  margin: 12px auto 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}
.address-edit-tray.is-open {
  /* 1400px is "large enough" — taller forms will scroll inside the
     tray rather than clip. Adjust if a localised form ever gets longer. */
  max-height: 1400px;
}
.address-edit-tray__inner {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.address-edit-tray__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.address-edit-tray__title {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.address-edit-tray__close {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
}
.address-edit-tray__close:hover { color: var(--ink); }
.address-edit-tray__body {
  padding: 20px 22px 22px;
}
.address-edit-tray__loading,
.address-edit-tray__error {
  margin: 0;
  padding: 12px 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}
.address-edit-tray__error { color: #B42318; }

/* Form-level styles — the city/state/zip three-up + actions row */
.address-edit-form__grid-csz {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .address-edit-form__grid-csz { grid-template-columns: 1fr; }
}
.address-edit-form__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.address-edit-form__submit { min-width: 160px; }
.address-edit-form__cancel {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
  text-decoration: underline;
  cursor: pointer;
}
.address-edit-form__cancel:hover { color: var(--ink); }