.st-page {
    --woo-ok: #15803d;
    --woo-blue: #2563eb;
    --woo-text: var(--woo-ink-2);
    max-width: 960px;
    margin-inline: auto;
}

.st-hero { display: flex; align-items: center; gap: var(--woo-space-16); padding: var(--woo-space-12) 0 var(--woo-space-28); }
.st-hero-icon { width: 56px; height: 56px; border-radius: 50%; background: #ecfdf3; border: 1px solid var(--woo-ok); color: var(--woo-ok); display: grid; place-items: center; flex: 0 0 auto; }
.st-hero-title { font-family: var(--woo-font-display); font-weight: 700; font-size: var(--woo-fs-xl); color: var(--woo-ink); margin: 0; line-height: 1.1; }
.st-hero-sub { margin: var(--woo-space-6) 0 0; color: var(--woo-muted); font-size: var(--woo-fs-sm); }
.st-hero-num { display: block; margin-top: var(--woo-space-2); font-size: var(--woo-fs-sm); color: var(--woo-muted); }

.st-layout { display: flex; align-items: flex-start; gap: var(--woo-space-24); padding-bottom: var(--woo-space-48); }
.st-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--woo-space-18); }
.st-aside { flex: 0 0 300px; display: flex; flex-direction: column; gap: var(--woo-space-18); }
.st-card { background: #fff; border: 1px solid var(--woo-line); border-radius: var(--woo-radius); padding: var(--woo-space-20); }
.st-page .section-label { font-family: var(--woo-font-display); font-weight: 700; font-size: var(--woo-fs-sm); color: var(--woo-ink); margin-bottom: var(--woo-space-16); }

/* Delivered review CTA: thumb + name/stars on one line, button on the right; the
   separator lives only between rows (no padding above the first / below the last). */
.st-review-row { display: flex; align-items: center; gap: var(--woo-space-14); }
.st-review-row + .st-review-row { margin-top: var(--woo-space-14); padding-top: var(--woo-space-14); border-top: 1px solid var(--woo-line); }
.st-review-thumb { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--woo-surface); display: block; }
.st-review-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.st-review-name { font-weight: 600; font-size: var(--woo-fs-sm); color: var(--woo-ink); }
.st-review-cta { flex: 0 0 auto; }
@media (max-width: 560px) {
    .st-review-row { flex-wrap: wrap; }
    .st-review-cta { width: 100%; }
}

.st-checkpoints { display: flex; flex-direction: column; }
.st-step { display: flex; gap: var(--woo-space-14); position: relative; padding-bottom: var(--woo-space-22); }
.st-step:last-child { padding-bottom: 0; }
.st-step::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--woo-line); }
.st-step:last-child::before { display: none; }
.st-step-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--woo-line); background: #fff; flex: 0 0 auto; display: grid; place-items: center; z-index: 1; }
.st-step.done .st-step-dot { background: var(--woo-ok); border-color: var(--woo-ok); color: #fff; }
.st-step.active .st-step-dot { border-color: var(--woo-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.st-step.done.active .st-step-dot { background: var(--woo-blue); border-color: var(--woo-blue); }
.st-step-body { padding-top: var(--woo-space-2); }
.st-step-label { font-weight: 600; color: var(--woo-ink); font-size: var(--woo-fs-sm); }
.st-step:not(.done):not(.active) .st-step-label { color: var(--woo-muted); font-weight: 500; }
.st-step-date { font-size: var(--woo-fs-xs); color: var(--woo-muted); }
.st-shipments-note { margin: var(--woo-space-16) 0 0; font-size: var(--woo-fs-xs); color: var(--woo-muted); }

.st-shipments { display: flex; flex-direction: column; gap: var(--woo-space-12); margin-top: var(--woo-space-16); }
.st-shipment { display: flex; flex-direction: column; gap: var(--woo-space-4); }
.st-shipment-head { display: flex; align-items: center; justify-content: space-between; gap: var(--woo-space-10); font-weight: 700; font-size: var(--woo-fs-sm); color: var(--woo-ink); }
.st-shipment-status { font-weight: 600; font-size: var(--woo-fs-xs); color: var(--woo-cta); }
.st-shipment-meta { font-size: var(--woo-fs-xs); color: var(--woo-muted); }
.st-tracking-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: var(--woo-space-8); padding: var(--woo-space-11) var(--woo-space-18); border-radius: 12px; background: var(--woo-ink); color: #fff; font-weight: 700; font-size: var(--woo-fs-sm); text-decoration: none; }
.st-shipment .st-tracking-btn { margin-top: var(--woo-space-4); }

.st-items { display: flex; flex-direction: column; gap: var(--woo-space-10); margin-bottom: var(--woo-space-14); }
.st-item { display: flex; justify-content: space-between; gap: var(--woo-space-12); font-size: var(--woo-fs-sm); }
.st-item-name { color: var(--woo-ink); font-weight: 600; }
.st-item-qty { color: var(--woo-muted); font-weight: 500; }
.st-item-total { font-family: var(--woo-font-display); font-weight: 700; color: var(--woo-ink); white-space: nowrap; }
.st-totals { border-top: 1px solid var(--woo-line); padding-top: var(--woo-space-14); display: flex; flex-direction: column; gap: var(--woo-space-9); font-size: var(--woo-fs-sm); }
.st-total-row { display: flex; justify-content: space-between; color: var(--woo-muted); }
.st-total-row span:last-child { color: var(--woo-ink); font-weight: 600; }
.st-total-grand { font-size: var(--woo-fs-md); margin-top: var(--woo-space-4); }
.st-total-grand span, .st-total-grand span:last-child { color: var(--woo-ink); font-weight: 700; }
.st-total-vat { font-size: var(--woo-fs-xs); margin-top: -3px; }
.st-total-vat span, .st-total-vat span:last-child { color: var(--woo-muted); font-weight: 400; }
.st-total-discount { align-items: center; }
.st-total-lab { display: inline-flex; align-items: center; gap: var(--woo-space-8); flex-wrap: wrap; }
.st-coupon { display: inline-flex; align-items: center; padding: var(--woo-space-1) var(--woo-space-8); border-radius: 99px; background: #ecfdf3; border: 1px solid #bbf7d0; color: var(--woo-ok); font-size: var(--woo-fs-2xs); font-weight: 700; letter-spacing: 0.02em; }
.st-total-discount span:last-child { color: var(--woo-ok); }

.st-delivery .st-total-row { font-size: var(--woo-fs-sm); }
.st-desc { margin-top: var(--woo-space-6); font-size: var(--woo-fs-sm); color: var(--woo-muted); line-height: 1.5; }

.st-info { font-size: var(--woo-fs-sm); color: var(--woo-text); line-height: 1.6; }
.st-pay-pill { display: inline-flex; align-items: center; gap: var(--woo-space-8); padding: var(--woo-space-9) var(--woo-space-14); border-radius: 99px; background: #ecfdf3; border: 1px solid #bbf7d0; color: var(--woo-ok); font-size: var(--woo-fs-sm); font-weight: 700; }
.st-pay-pill .pay-fee { margin-left: var(--woo-space-4); font-weight: 700; }
.st-collect { background: #fffbeb; border-color: var(--woo-gold); }
.st-collect-amount { font-family: var(--woo-font-display); font-weight: 700; font-size: var(--woo-fs-lg); color: var(--woo-ink); }
.st-collect-note { margin: var(--woo-space-6) 0 0; font-size: var(--woo-fs-xs); color: var(--woo-muted); }
.st-help { font-size: var(--woo-fs-sm); color: var(--woo-muted); margin: 0; line-height: 1.7; }
.st-help a { color: var(--woo-blue); font-weight: 600; text-decoration: none; }

.st-contact { margin-top: var(--woo-space-16); display: flex; flex-direction: column; gap: var(--woo-space-2); font-size: var(--woo-fs-sm); color: var(--woo-text); word-break: break-word; }
.st-contact-name { font-weight: 600; color: var(--woo-ink); }
.st-note { margin-top: var(--woo-space-12); font-size: var(--woo-fs-sm); line-height: 1.5; }
.st-note-label { display: block; color: var(--woo-muted); font-size: var(--woo-fs-xs); margin-bottom: var(--woo-space-2); }
.st-note em { font-style: italic; color: var(--woo-ink); }
.st-map { width: 100%; height: 180px; margin-top: var(--woo-space-14); border-radius: calc(var(--woo-radius) - 4px); border: 1px solid var(--woo-line); overflow: hidden; z-index: 0; background: var(--woo-surface); }
.st-map .leaflet-control-attribution { font-size: 9px; }

@media (max-width: 900px) {
    .st-hero { flex-direction: column; align-items: center; text-align: center; }
    .st-layout { flex-direction: column; }
    .st-main, .st-aside { flex-basis: auto; width: 100%; }
}

.st-verify { max-width: 560px; }
.st-verify .st-hero { padding: var(--woo-space-8) 0 var(--woo-space-20); }
.st-verify-lead { margin: 0 0 var(--woo-space-18); color: var(--woo-muted); font-size: var(--woo-fs-sm); line-height: 1.5; }
.st-verify-lead a { color: var(--woo-blue); font-weight: 600; text-decoration: none; }
.st-verify .field label { display: block; font-size: var(--woo-fs-sm); font-weight: 600; color: var(--woo-ink); margin-bottom: var(--woo-space-6); }
.st-verify .field .required { color: #dc2626; font-weight: 700; }
.st-verify .field input { width: 100%; font: inherit; font-size: var(--woo-fs-sm); color: var(--woo-ink); background: #fff; border: 1px solid #dedede; border-radius: 12px; padding: var(--woo-space-13) var(--woo-space-14); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.st-verify .field input:focus { border-color: var(--woo-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }

.st-verify .wk-btn { margin-top: var(--woo-space-16); }
.st-verify .woocommerce-error, .st-verify .woocommerce-notice--error { list-style: none; margin: 0 0 var(--woo-space-14); padding: var(--woo-space-12) var(--woo-space-14); border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px; color: #b91c1c; font-size: var(--woo-fs-sm); font-weight: 500; }

.st-page .st-point-brand { color: var(--woo-muted); }
.st-page .st-point-brand img { display: inline-block; width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: var(--woo-space-5); }