.wc-ost {
  --ost-navy: #0c2340;
  --ost-blue: #1a4a6e;
  --ost-teal: #2d8a9e;
  --ost-mint: #5cbdb9;
  --ost-ink: #13283d;
  --ost-muted: #607487;
  --ost-line: #d9e4e9;
  --ost-wash: #f3f8f9;
  --ost-white: #ffffff;
  --ost-title: #ffffff;
  --ost-heading: #0c2340;
  --ost-placeholder: #8b9aa7;
  --ost-button-text: #ffffff;
  --ost-badge-bg: #e5f4f5;
  --ost-badge-text: #1a4a6e;
  --ost-success-bg: #e5f6ec;
  --ost-success-text: #236b43;
  --ost-error-bg: #fff3f3;
  --ost-error-text: #8b2b2b;
  --ost-error-line: #f2c9c9;
  --ost-cancel-bg: #fff0f0;
  --ost-dot: #aab9c3;
  --ost-body-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ost-heading-font: "Sora", "Manrope", sans-serif;
  max-width: 760px;
  margin: 0 auto;
  color: var(--ost-ink);
  font-family: var(--ost-body-font);
  font-size: 16px;
  line-height: 1.6;
}
.wc-ost input, .wc-ost button, .wc-ost label { font-family: var(--ost-body-font); }
.wc-ost *, .wc-ost *::before, .wc-ost *::after { box-sizing: border-box; }
.wc-ost__hero { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.75rem; }
.wc-ost__hero-icon { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border-radius: 8px; background: var(--ost-navy); box-shadow: 0 10px 24px rgba(12,35,64,.16); }
.wc-ost__hero-icon svg { width: 26px; fill: none; stroke: var(--ost-mint); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.wc-ost__eyebrow { margin: 0 0 .25rem; color: var(--ost-teal); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wc-ost__title { margin: 0; color: var(--ost-title); font-family: var(--ost-heading-font); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; letter-spacing: 0; line-height: 1.15; }
.wc-ost__intro { max-width: 580px; margin: .55rem 0 0; color: var(--ost-muted); }
.wc-ost__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; padding: 1.5rem; border: 1px solid var(--ost-line); border-radius: 8px; background: var(--ost-wash); box-shadow: 0 16px 48px rgba(12,35,64,.08); }
.wc-ost__field { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.wc-ost__field label { color: var(--ost-heading); font-size: .82rem; font-weight: 700; }
.wc-ost__field label span { margin-left: .3rem; color: var(--ost-muted); font-size: .72rem; font-weight: 500; }
.wc-ost__field input { width: 100%; min-height: 48px; padding: .72rem .9rem; border: 1px solid var(--ost-line); border-radius: 6px; background: var(--ost-white); color: var(--ost-ink); font: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.wc-ost__field input:focus { outline: none; border-color: var(--ost-teal); box-shadow: 0 0 0 3px rgba(45,138,158,.16); }
.wc-ost__field input::placeholder { color: var(--ost-placeholder); }
.wc-ost__actions { grid-column: 1 / -1; margin: 0; }
.wc-ost__button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: .75rem; padding: .78rem 1.35rem; border: 0; border-radius: 6px; background: var(--ost-navy); color: var(--ost-button-text); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(12,35,64,.18); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.wc-ost__button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.wc-ost__button:hover { background: var(--ost-blue); box-shadow: 0 10px 22px rgba(12,35,64,.24); transform: translateY(-1px); }
.wc-ost__button:focus-visible { outline: 3px solid rgba(45,138,158,.35); outline-offset: 3px; }
.wc-ost__form-note { grid-column: 1 / -1; margin: -.35rem 0 0; color: var(--ost-muted); font-size: .78rem; }
.wc-ost__error { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--ost-error-line); border-radius: 6px; background: var(--ost-error-bg); color: var(--ost-error-text); }
.wc-ost__order { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--ost-line); border-radius: 8px; background: var(--ost-white); box-shadow: 0 18px 50px rgba(12,35,64,.09); }
.wc-ost__order-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ost-line); }
.wc-ost__order-head > div { min-width: 120px; }
.wc-ost__order-head strong { color: var(--ost-heading); }
.wc-ost__order-number { font-family: var(--ost-heading-font); font-size: 1.2rem; }
.wc-ost__label { display: block; color: var(--ost-muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.wc-ost__current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; padding: .9rem 1rem; border-radius: 6px; background: var(--ost-wash); }
.wc-ost__badge { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--ost-badge-bg); color: var(--ost-badge-text); font-size: .9rem; font-weight: 700; }
.wc-ost__badge-dot { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.wc-ost__badge--completed { background: var(--ost-success-bg); color: var(--ost-success-text); }
.wc-ost__badge--cancelled, .wc-ost__badge--failed, .wc-ost__badge--refunded { background: var(--ost-cancel-bg); color: var(--ost-error-text); }
.wc-ost__timeline { list-style: none; margin: 1.25rem 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--ost-line); }
.wc-ost__step { position: relative; padding: 0 0 1.1rem .6rem; }
.wc-ost__step:last-child { padding-bottom: 0; }
.wc-ost__dot { position: absolute; left: -1.72rem; top: .3rem; width: 12px; height: 12px; border: 2px solid var(--ost-dot); border-radius: 50%; background: var(--ost-white); }
.wc-ost__step--done .wc-ost__dot { border-color: var(--ost-mint); background: var(--ost-mint); }
.wc-ost__step--current .wc-ost__dot { border-color: var(--ost-teal); background: var(--ost-teal); box-shadow: 0 0 0 4px rgba(45,138,158,.16); }
.wc-ost__step-label { display: block; color: var(--ost-heading); font-weight: 600; }
.wc-ost__step--upcoming .wc-ost__step-label { color: var(--ost-muted); font-weight: 500; opacity: .7; }
.wc-ost__step-date { display: block; color: var(--ost-muted); font-size: .85rem; }
.wc-ost__address { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ost-line); }
.wc-ost__address address { margin: .25rem 0 0; color: var(--ost-ink); font-style: normal; }
.wc-ost__shipping-method { margin: .35rem 0 0; color: var(--ost-muted); font-size: .9rem; }
.wc-ost__items { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--ost-line); }
.wc-ost__items li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.wc-ost__qty { color: var(--ost-muted); font-weight: 600; }
.wc-ost__note { padding: .85rem 1rem; border-left: 3px solid var(--ost-teal); background: var(--ost-wash); color: var(--ost-muted); }
@media (max-width: 600px) {
  .wc-ost__hero { gap: .8rem; }
  .wc-ost__hero-icon { flex-basis: 44px; width: 44px; height: 44px; }
  .wc-ost__hero-icon svg { width: 22px; }
  .wc-ost__form { grid-template-columns: 1fr; padding: 1.1rem; }
  .wc-ost__button { width: 100%; }
  .wc-ost__order { padding: 1.1rem; }
  .wc-ost__order-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .wc-ost__order-head > div:first-child { grid-column: 1 / -1; }
  .wc-ost__current { align-items: flex-start; flex-direction: column; gap: .45rem; }
}
@media (prefers-reduced-motion: reduce) { .wc-ost__button, .wc-ost__field input { transition: none; } }