:root{--ecs-b:#0049ae;--ecs-bd:#003a8c;--ecs-pt:#e8f0fc}
/* ecs checkout success + empty cart modern — scoped to html.route-checkout-success and html.route-checkout-cart #error-not-found (Journal's empty-cart container; a cart with items has #checkout-cart instead, never matched). CSS+JS, no PHP. */
:root{--ecs-ink:#16233b;--ecs-mut:#667085;--ecs-line:#e6eaf0;--ecs-soft:#f6f8fb;--ecs-ok:#12a150;--ecs-okbg:#e7f7ee;--ecs-r:18px}
/* no-flash: hide the old text until JS builds the card; reveal anyway after 1.5 s if JS fails */
html.route-checkout-success:not(.ecs-on) #common-success #content,
html.route-checkout-success:not(.ecs-on) h1.page-title,
html.route-checkout-cart:not(.ecs-on) #error-not-found #content{opacity:0;animation:ecs-fb 0s 1.5s forwards}
html.route-checkout-cart:not(.ecs-on) h1.page-title:has(+#error-not-found){opacity:0;animation:ecs-fb 0s 1.5s forwards}
@keyframes ecs-fb{to{opacity:1}}
html.ecs-on h1.page-title{display:none!important}
html.ecs-on #common-success #content>.ecs-old,html.ecs-on #error-not-found #content>.ecs-old{display:none!important}
html.ecs-on #common-success,html.ecs-on #error-not-found{padding-top:28px;padding-bottom:48px}
.ecs-w{max-width:760px;margin:0 auto;color:var(--ecs-ink);font-size:15px;line-height:1.5}
.ecs-card{background:#fff;border:1px solid var(--ecs-line);border-radius:var(--ecs-r);box-shadow:0 10px 30px rgba(16,35,59,.07);padding:36px 36px 30px;text-align:center}
.ecs-chk{width:96px;height:96px;margin:0 auto 18px;display:block}
.ecs-chk .c{fill:var(--ecs-okbg);stroke:var(--ecs-ok);stroke-width:3;stroke-dasharray:283;stroke-dashoffset:0;animation:ecs-drawc .7s .1s ease-out both}
.ecs-chk .k{fill:none;stroke:var(--ecs-ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0;animation:ecs-drawk .45s .7s ease-out both}
.ecs-chk{animation:ecs-pop .5s .65s cubic-bezier(.3,1.6,.6,1) both}
/* resting state = fully drawn; keyframes only animate FROM hidden, so blocked/paused/unsupported animation still ends with the tick visible */
@keyframes ecs-drawc{from{stroke-dashoffset:283}to{stroke-dashoffset:0}}
@keyframes ecs-drawk{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes ecs-pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ecs-chk,.ecs-chk .c,.ecs-chk .k{animation:none!important;stroke-dashoffset:0!important}}
/* JS fallback 1.6 s after build (or on tab hidden/visible): drop animation -> final drawn state */
html.ecs-done .ecs-chk,html.ecs-done .ecs-chk .c,html.ecs-done .ecs-chk .k{animation:none!important;stroke-dashoffset:0!important;transform:none!important}
.ecs-h{font-size:30px;line-height:1.2;font-weight:800;margin:0 0 8px;color:var(--ecs-ink);letter-spacing:-.01em}
.ecs-sub{color:var(--ecs-mut);font-size:16px;margin:0 auto 26px;max-width:520px}
.ecs-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.ecs-steps li{background:var(--ecs-soft);border-radius:14px;padding:16px 16px 14px;position:relative}
.ecs-steps .n{display:inline-flex;font-style:normal;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ecs-pt);color:var(--ecs-b);margin-bottom:10px}
.ecs-steps .n svg{width:18px;height:18px}
.ecs-steps b{display:block;font-size:15px;line-height:1.3;font-weight:800;margin-bottom:4px}
.ecs-steps li>span:not(.n){display:block;font-size:13px;line-height:1.4;color:var(--ecs-mut)}
.ecs-ct{display:flex;align-items:center;gap:14px;border:1px solid var(--ecs-line);border-radius:14px;padding:14px 16px;text-align:left;margin-bottom:24px}
.ecs-ct .i{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--ecs-b);color:#fff;display:flex;align-items:center;justify-content:center}
.ecs-ct .i svg{width:22px;height:22px}
.ecs-ct .t{flex:1 1 auto;min-width:0;font-size:14px;color:var(--ecs-mut)}
.ecs-ct .t b{display:block;color:var(--ecs-ink);font-size:15px}
.ecs-ct a.ph{color:var(--ecs-b)!important;font-weight:800;font-size:18px;white-space:nowrap;text-decoration:none}
.ecs-ct a.ml{color:var(--ecs-b)!important;font-weight:700;white-space:nowrap;text-decoration:underline}
.ecs-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
a.ecs-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 30px;border-radius:999px;background:var(--ecs-b)!important;color:#fff!important;font-weight:800;font-size:16px;text-decoration:none!important;box-shadow:0 6px 16px rgba(0,0,0,.14);transition:background .15s,transform .15s}
a.ecs-cta:hover{background:var(--ecs-bd)!important;transform:translateY(-1px)}
a.ecs-cta svg{width:18px;height:18px}
.ecs-sg{margin-top:22px;text-align:center}
.ecs-sg p{margin:0 0 10px;color:var(--ecs-mut);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ecs-sg div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.ecs-sg a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--ecs-line);background:#fff;color:var(--ecs-ink)!important;font-weight:700;font-size:14px;text-decoration:none!important}
.ecs-sg a:hover{border-color:var(--ecs-b);color:var(--ecs-b)!important}
.ecs-ec{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--ecs-pt);color:var(--ecs-b);display:flex;align-items:center;justify-content:center;animation:ecs-pop .5s .1s cubic-bezier(.3,1.6,.6,1) both}
.ecs-ec svg{width:46px;height:46px}
@media (prefers-reduced-motion:reduce){.ecs-ec{animation:none}}
.ecs-empty .ecs-sub{margin-bottom:22px}
@media (max-width:767px){
 .ecs-ec{width:78px;height:78px;margin-bottom:14px}.ecs-ec svg{width:38px;height:38px}
 html.ecs-on #common-success,html.ecs-on #error-not-found{padding-top:14px;padding-bottom:28px}
 .ecs-w{margin:0 4px}
 .ecs-card{padding:26px 16px 20px;border-radius:16px}
 .ecs-chk{width:78px;height:78px;margin-bottom:14px}
 .ecs-h{font-size:24px}.ecs-sub{font-size:15px;margin-bottom:20px}
 .ecs-steps{grid-template-columns:1fr;gap:8px}
 .ecs-steps li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;padding:12px 14px}
 .ecs-steps .n{grid-row:1/3;margin:0}
 .ecs-ct{flex-wrap:wrap}.ecs-ct .t{flex-basis:calc(100% - 58px)}
 .ecs-ct .act{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid var(--ecs-line)}
 a.ecs-cta{width:100%}
}