/* Checkout extends the home page's shared palette and 540px storefront shell. */
.checkout-shell { padding-bottom: calc(114px + env(safe-area-inset-bottom)); }
.checkout-shell .page-header { min-height: 74px; }
.checkout-shell .page-header h1 { font-size: 19px; }
.checkout-hero { padding: 12px 24px 28px; }
.checkout-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 4px 0 26px; }
.checkout-brand .store-logo { font-size: 25px; }
.checkout-brand > span { color: #526b4e; font-size: 12px; }
.checkout-total-label { display: flex; align-items: center; gap: 12px; color: #47613f; font-size: 14px; }
.checkout-count { border-radius: 20px; background: #ffffff70; padding: 5px 10px; font-size: 12px; }
.checkout-amount { margin-top: 9px; color: var(--forest); font-size: clamp(36px, 9vw, 48px); font-weight: 750; line-height: 1.2; letter-spacing: -1.4px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.checkout-amount > span { font-size: 24px; margin-right: 4px; }
.checkout-hero-tip { margin: 12px 0 0; color: #61735a; font-size: 13px; line-height: 1.65; }
.checkout-card { padding: 20px 18px; }
.checkout-card .surface-heading { margin-bottom: 18px; }
.checkout-card .surface-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.checkout-card .surface-heading h2 > i { color: var(--forest); font-size: 19px; }
.checkout-muted { color: var(--text-sub); font-size: 13px; }
.checkout-tag { padding: 5px 8px; background: #f0f5eb; border-radius: 7px; color: #5f7656; font-size: 11px; white-space: nowrap; }
.checkout-shell .saved-address-strip { display: flex; overflow-x: auto; gap: 10px; margin: 0 -2px 12px; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.checkout-shell .saved-address-card { position: relative; flex: 0 0 88%; min-width: 0; max-width: 320px; padding: 14px; text-align: left; border: 1px solid #e4eadd; background: #f8faf5; border-radius: 12px; color: var(--text-main); scroll-snap-align: start; }
.checkout-shell .saved-address-card.active { border-color: #78966b; background: #eff5e8; box-shadow: inset 0 0 0 1px #78966b; }
.saved-address-person { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.saved-address-person strong { font-size: 14px; }
.saved-address-person > span { color: #66775f; font-size: 12px; }
.saved-address-detail { display: block; padding-right: 20px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.address-default-badge { position: absolute; right: 9px; bottom: 10px; padding: 2px 4px; color: #627b55; background: #dfebd6; border-radius: 4px; font-size: 10px; }
.checkout-shell .address-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.checkout-shell .address-tools .soft-button { gap: 5px; padding: 8px 14px; font-size: 13px; }
.checkout-text-button { min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--forest); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.checkout-contact-fields { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
.checkout-field { display: block; min-width: 0; margin-bottom: 16px; }
.checkout-field > span, .checkout-region-label > span { display: block; margin-bottom: 9px; font-size: 13px; color: #5c6a5e; }
.checkout-field input, .checkout-field textarea, .area-picker-container select, .area-picker-container input { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 12px; border: 1px solid #e4e8df; border-radius: 10px; background: #f8faf5; color: var(--text-main); font: inherit; font-size: 16px; line-height: 1.4; }
.checkout-field input::placeholder, .checkout-field textarea::placeholder, .area-picker-container input::placeholder { color: #98a08f; font-size: 13px; }
.checkout-field textarea { resize: vertical; min-height: 76px; }
.checkout-field input:focus, .checkout-field textarea:focus, .area-picker-container select:focus, .area-picker-container input:focus { background-color: #fff; border-color: #79966c; }
.checkout-field [aria-invalid="true"], .area-picker-container [aria-invalid="true"] { border-color: var(--danger); }
.checkout-region-label { display: flex; align-items: center; justify-content: space-between; margin-top: -6px; }
.checkout-region-label > span { margin-bottom: 0; }
.area-picker-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 7px 0 16px; }
.area-picker-container select { padding: 12px 22px 12px 8px; appearance: none; overflow: hidden; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23728368' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; font-size: 13px; }
.checkout-shell .save-default-line { display: flex; align-items: center; gap: 8px; color: #718067; font-size: 12px; line-height: 1.6; }
.checkout-shell .save-default-line input { flex: 0 0 auto; margin: 0; width: 17px; height: 17px; accent-color: var(--forest); }
.checkout-products { margin: 0; padding: 0; list-style: none; }
.checkout-product { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid #eef1ea; }
.checkout-product:first-child { padding-top: 0; }
.checkout-product > img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #f6f7f2; }
.checkout-product-copy { flex: 1; min-width: 0; }
.checkout-product-copy h3 { margin: 1px 0 5px; font-size: 14px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.checkout-product-copy p { margin: 0 0 8px; color: #8a9383; font-size: 11px; overflow-wrap: anywhere; }
.checkout-product-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.checkout-product-copy strong { font-size: 15px; font-weight: 650; }
.checkout-product-copy > div > span { color: #8a9383; font-size: 12px; }
.checkout-order-meta { margin: 16px 0 0; }
.checkout-order-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 12px; }
.checkout-order-meta dt { flex: 0 0 auto; color: #85907e; font-size: 12px; }
.checkout-order-meta dd { margin: 0; text-align: right; font-size: 12px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.checkout-order-meta .checkout-money { font-size: 15px; font-weight: 650; }
.pay-methods-container { display: grid; gap: 10px; }
.checkout-shell .pay-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px; border: 1px solid #e8ece3; border-radius: 12px; cursor: pointer; background: #fff; }
.checkout-shell .pay-card.active { border-color: #829b75; background: #f7faf3; }
.checkout-shell .pay-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; font-size: 23px; }
.pay-icon-wechat { background: #e7f5e8; color: #17a65a; }
.pay-icon-alipay { background: #e7f2ff; color: #1677ff; }
.checkout-shell .pay-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
.checkout-shell .pay-info strong { font-size: 14px; font-weight: 600; }
.checkout-shell .pay-info > span { font-size: 11px; color: #86907e; }
.checkout-shell .pay-card input { width: 19px; height: 19px; flex-shrink: 0; accent-color: var(--forest); }
.checkout-footnote { margin: 22px 14px 8px; color: #95a08e; font-size: 12px; text-align: center; }
.checkout-bar { position: fixed; z-index: 100; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 540px; padding: 15px 20px calc(15px + env(safe-area-inset-bottom)); border-top: 1px solid #e6ebdf; background: #fffffff5; backdrop-filter: blur(16px); }
.checkout-bar-total { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.checkout-bar-total > span { color: #89937f; font-size: 11px; }
.checkout-bar-total > strong { color: var(--accent); font-size: clamp(20px, 6vw, 27px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.checkout-bar-total small { margin-right: 2px; font-size: 15px; }
.checkout-bar .primary-button { flex: 0 0 auto; gap: 14px; min-width: 156px; min-height: 48px; }
.checkout-toast { position: fixed; z-index: 200; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(90vw, 450px); padding: 13px 18px; border-radius: 12px; background: #26352bf2; box-shadow: 0 8px 26px #26352b20; color: #fff; font-size: 14px; line-height: 1.6; text-align: center; }
.checkout-status-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 30px 0; }
.checkout-status { width: calc(100% - 36px); margin: 0 18px; padding: 38px 24px; text-align: center; }
.checkout-status h1 { font-size: 22px; line-height: 1.5; margin: 0 0 14px; }
.checkout-status p { color: #7c8774; font-size: 14px; line-height: 1.8; margin: 0 0 26px; overflow-wrap: anywhere; }
.checkout-status-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 24px; color: var(--forest); background: #edf4e7; font-size: 30px; }
.checkout-status-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.checkout-spinner { width: 34px; height: 34px; margin: 0 auto 24px; border: 3px solid #e2ecd9; border-top-color: var(--forest); border-radius: 50%; animation: checkout-spin 1s linear infinite; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (max-width: 360px) { .checkout-card { margin-left: 10px; margin-right: 10px; padding: 18px 14px; } .checkout-hero { padding-left: 20px; padding-right: 20px; } .checkout-contact-fields { gap: 8px; } .checkout-bar { gap: 10px; padding-left: 16px; padding-right: 16px; } .checkout-bar .primary-button { min-width: 134px; padding-left: 18px; padding-right: 18px; } }
@media (prefers-reduced-motion: reduce) { .checkout-spinner { animation: none; } }

/* Optional proxy action uses the existing forest palette beside the coral payment action. */
.checkout-has-proxy { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
.checkout-has-proxy ~ .checkout-toast { bottom: calc(160px + env(safe-area-inset-bottom)); }
.checkout-bar-with-proxy { flex-wrap: wrap; gap: 12px; }
.checkout-bar-with-proxy .checkout-bar-total { flex: 1 1 auto; }
.checkout-bar-with-proxy .checkout-bar-total > strong { white-space: nowrap; }
.checkout-bar-actions { display: flex; align-items: stretch; flex: 1 0 232px; gap: 8px; }
.checkout-proxy-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 11px 14px; border: 1px solid #ceddc5; border-radius: 26px; background: #eef4e9; color: var(--forest); font-size: 14px; font-weight: 600; white-space: nowrap; }
.checkout-proxy-button:hover { background: #e3eddc; border-color: #98b18a; }
.checkout-proxy-button > i { font-size: 17px; }
.checkout-bar-actions > button { flex: 1; }
.checkout-bar-actions .primary-button { flex: 1.15; min-width: 120px; gap: 8px; padding: 11px 16px; font-size: 14px; white-space: nowrap; }
.checkout-proxy-open { overflow: hidden; }
.checkout-proxy-backdrop { position: fixed; z-index: 209; inset: 0; background: #16231b66; }
.checkout-proxy-dialog { position: fixed; inset: auto 0 0; width: min(100%, 540px); max-width: 540px; max-height: 85vh; max-height: 85dvh; margin: 0 auto; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; color: var(--text-main); background: #fff; overflow-y: auto; overscroll-behavior: contain; }
.checkout-proxy-dialog:not([open]) { display: none; }
.checkout-proxy-dialog[open] { display: block; z-index: 210; box-shadow: 0 -12px 40px #16231b18; }
.checkout-proxy-dialog::backdrop { background: #16231b66; }
.checkout-proxy-dialog:modal { box-shadow: 0 -12px 40px #16231b18; }
.checkout-proxy-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkout-proxy-eyebrow { color: #6e8563; font-size: 12px; }
.checkout-proxy-header h2 { margin: 6px 0 0; color: var(--forest); font-size: 21px; }
.checkout-proxy-header .page-icon-button { flex-shrink: 0; background: #f0f4ec; font-size: 17px; }
.checkout-proxy-dialog > p { margin: 12px 0 22px; color: var(--text-sub); font-size: 13px; line-height: 1.65; }
.checkout-proxy-dialog .proxy-grid { gap: 8px; }
.checkout-proxy-dialog .proxy-option { min-width: 0; padding: 10px 2px; border-radius: 12px; }
.checkout-proxy-dialog .proxy-option:hover { background: #f1f5ec; }
.checkout-proxy-dialog .proxy-label { font-size: 11px; overflow-wrap: anywhere; }
.checkout-proxy-cancel { width: 100%; margin-top: 18px; font-weight: 600; }
@media (max-width: 380px) {
    .checkout-has-proxy { padding-bottom: calc(162px + env(safe-area-inset-bottom)); }
    .checkout-bar-with-proxy { flex-wrap: wrap; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .checkout-bar-with-proxy .checkout-bar-total { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
    .checkout-bar-with-proxy .checkout-bar-total > strong { font-size: 22px; }
    .checkout-bar-actions { display: grid; grid-template-columns: 1fr 1.15fr; width: 100%; }
    .checkout-has-proxy ~ .checkout-toast { bottom: calc(146px + env(safe-area-inset-bottom)); }
    .checkout-proxy-dialog { padding-left: 14px; padding-right: 14px; }
    .checkout-proxy-dialog .proxy-grid { gap: 8px 4px; }
}