:root{--s2s-b:#cd1e2b;--s2s-bd:#a5141f;--s2s-pt:#fdecee}
/* s2s 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{--s2s-ink:#16233b;--s2s-mut:#667085;--s2s-line:#e6eaf0;--s2s-soft:#f6f8fb;--s2s-ok:#12a150;--s2s-okbg:#e7f7ee;--s2s-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(.s2s-on) #common-success #content,
html.route-checkout-success:not(.s2s-on) h1.page-title,
html.route-checkout-cart:not(.s2s-on) #error-not-found #content{opacity:0;animation:s2s-fb 0s 1.5s forwards}
html.route-checkout-cart:not(.s2s-on) h1.page-title:has(+#error-not-found){opacity:0;animation:s2s-fb 0s 1.5s forwards}
@keyframes s2s-fb{to{opacity:1}}
html.s2s-on h1.page-title{display:none!important}
html.s2s-on #common-success #content>.s2s-old,html.s2s-on #error-not-found #content>.s2s-old{display:none!important}
html.s2s-on #common-success,html.s2s-on #error-not-found{padding-top:28px;padding-bottom:48px}
.s2s-w{max-width:760px;margin:0 auto;color:var(--s2s-ink);font-size:15px;line-height:1.5}
.s2s-card{background:#fff;border:1px solid var(--s2s-line);border-radius:var(--s2s-r);box-shadow:0 10px 30px rgba(16,35,59,.07);padding:36px 36px 30px;text-align:center}
.s2s-chk{width:96px;height:96px;margin:0 auto 18px;display:block}
.s2s-chk .c{fill:var(--s2s-okbg);stroke:var(--s2s-ok);stroke-width:3;stroke-dasharray:283;stroke-dashoffset:0;animation:s2s-drawc .7s .1s ease-out both}
.s2s-chk .k{fill:none;stroke:var(--s2s-ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0;animation:s2s-drawk .45s .7s ease-out both}
.s2s-chk{animation:s2s-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 s2s-drawc{from{stroke-dashoffset:283}to{stroke-dashoffset:0}}
@keyframes s2s-drawk{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes s2s-pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.s2s-chk,.s2s-chk .c,.s2s-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.s2s-done .s2s-chk,html.s2s-done .s2s-chk .c,html.s2s-done .s2s-chk .k{animation:none!important;stroke-dashoffset:0!important;transform:none!important}
.s2s-h{font-size:30px;line-height:1.2;font-weight:800;margin:0 0 8px;color:var(--s2s-ink);letter-spacing:-.01em}
.s2s-sub{color:var(--s2s-mut);font-size:16px;margin:0 auto 26px;max-width:520px}
.s2s-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.s2s-steps li{background:var(--s2s-soft);border-radius:14px;padding:16px 16px 14px;position:relative}
.s2s-steps .n{display:inline-flex;font-style:normal;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--s2s-pt);color:var(--s2s-b);margin-bottom:10px}
.s2s-steps .n svg{width:18px;height:18px}
.s2s-steps b{display:block;font-size:15px;line-height:1.3;font-weight:800;margin-bottom:4px}
.s2s-steps li>span:not(.n){display:block;font-size:13px;line-height:1.4;color:var(--s2s-mut)}
.s2s-ct{display:flex;align-items:center;gap:14px;border:1px solid var(--s2s-line);border-radius:14px;padding:14px 16px;text-align:left;margin-bottom:24px}
.s2s-ct .i{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--s2s-b);color:#fff;display:flex;align-items:center;justify-content:center}
.s2s-ct .i svg{width:22px;height:22px}
.s2s-ct .t{flex:1 1 auto;min-width:0;font-size:14px;color:var(--s2s-mut)}
.s2s-ct .t b{display:block;color:var(--s2s-ink);font-size:15px}
.s2s-ct a.ph{color:var(--s2s-b)!important;font-weight:800;font-size:18px;white-space:nowrap;text-decoration:none}
.s2s-ct a.ml{color:var(--s2s-b)!important;font-weight:700;white-space:nowrap;text-decoration:underline}
.s2s-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
a.s2s-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 30px;border-radius:999px;background:var(--s2s-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.s2s-cta:hover{background:var(--s2s-bd)!important;transform:translateY(-1px)}
a.s2s-cta svg{width:18px;height:18px}
.s2s-sg{margin-top:22px;text-align:center}
.s2s-sg p{margin:0 0 10px;color:var(--s2s-mut);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.s2s-sg div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.s2s-sg a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--s2s-line);background:#fff;color:var(--s2s-ink)!important;font-weight:700;font-size:14px;text-decoration:none!important}
.s2s-sg a:hover{border-color:var(--s2s-b);color:var(--s2s-b)!important}
.s2s-ec{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--s2s-pt);color:var(--s2s-b);display:flex;align-items:center;justify-content:center;animation:s2s-pop .5s .1s cubic-bezier(.3,1.6,.6,1) both}
.s2s-ec svg{width:46px;height:46px}
@media (prefers-reduced-motion:reduce){.s2s-ec{animation:none}}
.s2s-empty .s2s-sub{margin-bottom:22px}
@media (max-width:767px){
 .s2s-ec{width:78px;height:78px;margin-bottom:14px}.s2s-ec svg{width:38px;height:38px}
 html.s2s-on #common-success,html.s2s-on #error-not-found{padding-top:14px;padding-bottom:28px}
 .s2s-w{margin:0 4px}
 .s2s-card{padding:26px 16px 20px;border-radius:16px}
 .s2s-chk{width:78px;height:78px;margin-bottom:14px}
 .s2s-h{font-size:24px}.s2s-sub{font-size:15px;margin-bottom:20px}
 .s2s-steps{grid-template-columns:1fr;gap:8px}
 .s2s-steps li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;padding:12px 14px}
 .s2s-steps .n{grid-row:1/3;margin:0}
 .s2s-ct{flex-wrap:wrap}.s2s-ct .t{flex-basis:calc(100% - 58px)}
 .s2s-ct .act{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid var(--s2s-line)}
 a.s2s-cta{width:100%}
}