@charset "UTF-8";
/* Purchase flow styles — supplements base style.css in the same visual vocabulary.
   Base classes reused from style.css: .field .summary .cart-row .cart-items .stepper
   .consent .notice .dark-button .light-button .wide .empty .success .muted .green .eyebrow */

/* ── Commerce pages (orders / order detail / pay) rendered into #main ── */
.commerce-page{padding-top:36px;padding-bottom:80px;min-height:60vh}
.commerce-page>.eyebrow{font-size:12px}
.commerce-page h1{font-size:32px;margin-bottom:6px}
.commerce-page>.intro,.commerce-sub{color:#697262;font-size:14px;margin-bottom:30px;margin-top:0}
.commerce-panel{border:1px solid var(--line);background:white;padding:30px}
.commerce-panel h2{font-size:20px;margin-bottom:18px}
.commerce-panel h3{font-size:16px;margin-bottom:10px}
.commerce-stack>*+*{margin-top:18px}
.commerce-card{border:1px solid var(--line);background:white;padding:22px;display:block}
.commerce-card:hover{border-color:var(--green)}
.commerce-card .row{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.commerce-card .order-num{font-weight:700;color:var(--green);word-break:break-all}
.commerce-card .lines{font-size:13px;color:#697262;margin-top:8px;line-height:1.6}
.commerce-card .amount{font-size:19px;font-weight:750;margin-top:10px;letter-spacing:-.04em}
.commerce-card .when{font-size:12px;color:#91958e;margin-top:6px}
.status-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:#eef2e7;color:var(--green);flex-shrink:0}
.status-pill.pending{background:#fdf3e3;color:#9a6b1f}
.status-pill.live{background:#fceae5;color:#d65b45}
.status-pill.done{background:#e3ecdc;color:#3d5c33}
.status-pill.cancelled{background:#f1f1ee;color:#7c847b}
.status-pill.unknown{background:#f1f1ee;color:#7c847b}

/* Forms inside dialogs/pages */
.field .error-text,.error-text{color:#d65b45;font-size:12px;font-weight:400;margin-top:6px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#d65b45}
.field-row{display:flex;gap:10px;align-items:flex-end}
.field-row .field{flex:1;margin-top:16px}
.field-row .light-button{margin-bottom:0;white-space:nowrap;height:46px;padding:12px 18px}
textarea.field-input{width:100%;padding:12px;border:1px solid #dce2d6;border-radius:3px;background:white;color:var(--ink);min-height:76px;resize:vertical}
.inline-field{display:flex;gap:10px;margin-top:10px}
.inline-field input{flex:1;padding:12px;border:1px solid #dce2d6;border-radius:3px;min-height:46px;min-width:0}
.inline-field .light-button{height:46px;white-space:nowrap}
.choice-row{display:flex;align-items:flex-start;gap:9px;font-size:14px;margin-top:10px}
.choice-row input{margin-top:4px;accent-color:var(--green)}
.choice-row .sub{display:block;font-size:12px;color:#848a7e;margin-top:2px}
.choice-row.disabled{opacity:.55;cursor:default}
.choice-group{margin-top:18px}
.choice-group>.group-label{font-size:14px;font-weight:600;display:block;margin-bottom:4px}
.section-title-row{border-top:1px solid var(--line);margin-top:28px;padding-top:18px}
.section-title-row>.group-label{font-size:14px;font-weight:700;color:var(--green)}

/* Cart/checkout line notices (server validation verdicts) */
.line-notice{border:1px solid #ead3cf;background:#fdf6f5;color:#9c4a3c;font-size:12px;padding:12px;margin-top:10px;line-height:1.55}
.line-notice p+p{margin-top:4px}
.line-notice .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.line-notice button{font-size:12px;padding:6px 12px;border:1px solid #d8b0a8;border-radius:3px;color:#9c4a3c}
.line-notice button.primary{background:#9c4a3c;color:white;border-color:#9c4a3c}
.line-note{font-size:12px;color:#809563;margin-top:8px}
.line-note.error{color:#d65b45}

/* Dialog section spacing */
#checkout-dialog{width:640px}
#checkout-dialog .summary{margin:18px 0}
#checkout-dialog form>.field:first-of-type{margin-top:20px}
.checkout-items{border-top:1px solid var(--line);margin-top:26px;padding-top:6px}
.checkout-items h3{font-size:15px;margin:14px 0 4px}
.checkout-line{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.checkout-line .muted{font-size:12px}
.checkout-line .line-total{font-weight:700;white-space:nowrap}
.bank-box{background:#f4f6f0;padding:14px 16px;font-size:13px;margin-top:10px;color:#55604f;line-height:1.7}
.bank-box strong{color:var(--green)}
.pay-ready-note{font-size:12px;color:#848a7e;background:#f7f8f4;border:1px solid var(--line);padding:12px 14px;margin-top:12px;line-height:1.6}
.agreements{border-top:1px solid var(--line);margin-top:26px;padding-top:18px}
.agreements .consent{margin-bottom:0;margin-top:12px}
.form-error{border:1px solid #ead3cf;background:#fdf6f5;color:#9c4a3c;font-size:13px;padding:12px 14px;margin-top:18px}

/* Order detail page */
.order-facts{background:#f4f6f0;padding:18px 20px;margin-top:24px}
.order-facts .row{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:5px 0}
.order-facts .row .k{color:#697262;flex-shrink:0}
.order-facts .row .v{font-weight:600;text-align:right;word-break:break-all}
.order-facts .row .v.total{font-size:19px;font-weight:750;letter-spacing:-.04em}
.order-items{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.order-items .group-label{font-size:13px;color:#697262;display:block;margin-bottom:8px}
.order-items .item-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:5px 0}
.order-items .item-row .amount{white-space:nowrap}
.order-shipment{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.order-shipment .group-label{font-size:13px;color:#697262;display:block;margin-bottom:8px}
.order-actions{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.order-actions .light-button{display:block;text-align:center}
.requests-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.request-card{border:1px solid var(--line);padding:12px 14px;font-size:13px;border-radius:3px}
.request-card .row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.request-card .meta{color:#848a7e;font-size:12px;margin-top:5px}
.request-card button{font-size:12px;color:#7c847b;text-decoration:underline}
.qty-rows .qty-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.qty-rows .qty-row .stepper{margin-top:0;width:96px}
.lookup-form{margin-top:24px}
.lookup-form label{font-size:13px;color:#697262;display:block;margin-bottom:8px}
.expiry-note{font-size:12px;color:#9a6b1f;background:#fdf6e4;padding:10px 12px;margin-top:14px;line-height:1.6}

/* Pay page */
.pay-panel{max-width:560px;margin:0 auto;text-align:center}
.pay-panel .icon-dot{width:52px;height:52px;border-radius:50%;background:#e9f2de;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:24px;margin:26px auto 14px}
.pay-panel .amount{font-size:26px;font-weight:750;letter-spacing:-.04em;margin:14px 0}
.pay-panel .bank-details{text-align:left;background:#f4f6f0;padding:16px 18px;margin:18px 0;font-size:13px;line-height:1.8}
.pay-panel .bank-details .k{color:#697262;display:block;font-size:12px}
.pay-panel .bank-details strong{color:var(--green);font-size:15px}
.pay-panel .spin{width:22px;height:22px;border:2px solid #cfd8c8;border-top-color:var(--green);border-radius:50%;margin:30px auto 12px;animation:commerce-spin 0.8s linear infinite}
@keyframes commerce-spin{to{transform:rotate(360deg)}}
.pay-panel .phone-form{text-align:left;margin-top:14px}
.pay-panel .phone-form input{width:100%;padding:12px;border:1px solid #dce2d6;border-radius:3px;min-height:46px;margin-bottom:10px}

/* Success block additions */
.success .order-num{font-weight:700;color:var(--green);word-break:break-all;font-size:15px}
.success .bank-details{text-align:left;background:#f4f6f0;padding:16px 18px;margin:14px 0 6px;font-size:13px;line-height:1.8}
.success .dark-button{display:block;width:100%;margin-top:12px}
.success .light-button{display:block;width:100%;text-align:center;margin-top:10px}

@media(max-width:650px){
  .commerce-page{padding-top:24px}
  .commerce-page h1{font-size:26px}
  .commerce-panel{padding:20px}
  .order-facts .row{font-size:13px}
  #checkout-dialog{width:calc(100vw - 24px)}
}
@media(prefers-reduced-motion:reduce){.pay-panel .spin{animation:none}}