/* White checkout with DOMELVYA lime accents. */
:root { background:#f7f8f5; color:#11170d; font-family:"Manrope",Arial,sans-serif; --lime:#b8ec54; --ink:#11170d; --ease:cubic-bezier(.22,1,.36,1); }
body { background:linear-gradient(180deg,#fff 0 240px,#f7f8f5 600px); min-height:100vh; -webkit-font-smoothing:antialiased; }
body>header { max-width:none; padding:24px max(32px,calc((100% - 1200px)/2)); background:white; border-bottom:1px solid #e7eae2; }
.checkout-brand img { width:218px; max-width:45vw; height:auto; }
header>a:last-child { text-decoration:none; color:#525b4c; font-size:12px; }
main { max-width:1296px; padding-top:32px; }
#steps { position:relative; border:0; padding:0 0 25px; gap:8px; }
#steps::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:3px; background:#edf0e7; }
#steps::after { content:''; position:absolute; bottom:0; left:0; width:var(--progress,20%); height:3px; border-radius:3px; background:var(--lime); transform-origin:left; animation:progress-enter .8s var(--ease) both; }
#steps a { color:#767e70; font-size:12px; flex:1; justify-content:center; padding:10px 0; }
#steps b { background:#fff; border:1px solid #e1e6db; width:30px; height:30px; font-size:12px; transition:transform .35s var(--ease),background .2s; }
#steps a:hover b { transform:translateY(-3px); background:#effbdc; }
#steps [aria-current] { color:var(--ink); font-weight:700; }
#steps [aria-current] b { color:var(--ink); background:var(--lime); border-color:var(--lime); box-shadow:0 0 0 5px #b8ec5420; }
#steps .step-complete { color:#344729; }
#steps .step-complete b { background:#f0f7e7; border-color:#e0ebd4; }
.heading { margin:36px 0 30px; }
.heading>p { color:#66715c; font-weight:700; font-size:10px; }
h1 { font-size:clamp(34px,4vw,52px); letter-spacing:-.055em; font-weight:600; }
.heading .step-description { font-size:13px; font-weight:400; letter-spacing:0; color:#68705f; margin:12px 0 0; }
.layout { grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:28px; }
#step-content { padding:32px; border:1px solid #e5e9df; border-radius:18px; background:#fff; box-shadow:0 6px 24px #263c1303; min-width:0; }
h2 { font-size:20px; font-weight:600; letter-spacing:-.035em; margin-bottom:22px; }
aside { border:1px solid #e0e8d3; background:#f2f8e9; padding:28px; border-radius:18px; overflow:hidden; }
aside::before { content:''; display:block; height:4px; background:var(--lime); margin:-28px -28px 25px; }
.summary-list li { border-color:#dfe7d5; padding:16px 0; display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; }
.summary-list img { width:48px; height:52px; object-fit:contain; background:#fff; border-radius:6px; padding:4px; }
.summary-list strong { display:block; margin-top:6px; }
aside .total { border-color:#d6dfca; font-size:16px; align-items:baseline; }
aside .total strong { font-size:25px; letter-spacing:-.05em; }
aside .note { display:block; color:#59654d; background:#e6f1d8; border-radius:9px; padding:14px; font-size:11px; margin:22px 0 0; }
.summary-brand { display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid #dce6cf; font-size:10px; line-height:1.6; color:#58624e; }
.summary-brand img { width:28px; height:28px; border-radius:7px; }
.cart-line { grid-template-columns:100px minmax(0,1fr) auto; padding:23px 0; border-color:#e9ece4; }
.cart-line img { width:100px; height:110px; padding:8px; transition:transform .5s var(--ease); }
.cart-line:hover img { transform:scale(1.045); }
.cart-line h3 { font-size:13px; font-weight:600; line-height:1.6; }
.cart-line>strong { font-size:18px; letter-spacing:-.03em; }
.cart-line label { font-size:10px; color:#69735f; gap:5px; }
.cart-line input { border-color:#d9dfd1; background:#fafbf8; width:66px; }
.remove { color:#727a69; margin:9px 0 0; padding:0; }
.actions { gap:16px; padding-top:24px; border-top:1px solid #edf0e7; margin-top:28px; }
.primary { color:#11170d; background:var(--lime); border:1px solid var(--lime); border-radius:9px; padding:17px 21px; gap:20px; font-size:12px; transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .2s; }
.primary:hover { background:#c7f474; box-shadow:0 7px 18px #91b64b25; transform:translateY(-3px); }
.primary:active { transform:scale(.975); }
.primary span { transition:transform .3s var(--ease); }
.primary:hover span { transform:translateX(4px); }
.back { color:#65715a; font-size:11px; white-space:nowrap; }
.fields { gap:22px 18px; margin-top:24px; }
label { font-size:11px; font-weight:600; color:#48533d; }
input,select { background:#fbfcf9; border:1px solid #dce2d5; border-radius:8px; padding:14px; color:var(--ink); font-size:13px; transition:border-color .2s,box-shadow .3s,background .2s; }
input:focus,select:focus { background:#fff; border-color:#83b83a; box-shadow:0 0 0 4px #b8ec542b; outline:none; }
.note { color:#68715f; font-size:12px; }
.choice { background:#f6fbeF; border-color:#b3d48b; padding:23px; transition:box-shadow .3s; }
.choice:hover { box-shadow:0 0 0 3px #b8ec5420; }
.choice input { accent-color:#54851d; }
.choice small { font-weight:400; color:#637153; }
address { padding:20px; border-left:3px solid var(--lime); background:#f9fbf5; border-radius:0 9px 9px 0; font-size:13px; }
.payment-preview { background:#fafcf6; border:1px solid #e1e8d8; padding:28px; }
.payment-preview::before { content:'↗'; display:grid; place-items:center; width:44px; height:44px; background:var(--lime); border-radius:12px; margin-bottom:20px; font-size:24px; }
.payment-preview strong { font-size:18px; }
.payment-preview p { font-size:13px; color:#66705c; }
.status { background:#eef1e8; color:#59634e; border:1px solid #dfe5d6; padding:8px 10px; border-radius:5px; font-size:9px; }
.empty { padding:30px 0; text-align:center; }
.empty::before { content:'＋'; display:grid; place-items:center; width:65px; height:65px; background:#eff8e0; color:#4b7029; border-radius:50%; margin:0 auto 24px; font-size:28px; }
.empty p { color:#68715f; font-size:13px; margin-bottom:26px; }
body>footer { border-color:#e4e8dd; color:#6d7663; margin-top:55px; font-size:11px; flex-wrap:wrap; }
body>footer .legal-links { width:100%; }
.heading { animation:checkout-enter .6s var(--ease) both; }
#step-content { animation:checkout-enter .65s .08s var(--ease) both; }
#summary { animation:checkout-enter .65s .16s var(--ease) both; }
@keyframes checkout-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes progress-enter { from { transform:scaleX(.1); } to { transform:scaleX(1); } }
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:checkout-out .18s ease-in both; }
::view-transition-new(root) { animation:checkout-enter .4s var(--ease) both; }
@keyframes checkout-out { to { opacity:0; transform:translateY(-8px); } }
@media(max-width:900px) { .layout { gap:20px; grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); } #step-content { padding:24px; } .cart-line { grid-template-columns:70px minmax(0,1fr); } .cart-line img { width:70px; height:80px; } .cart-line>strong { grid-column:2; } .actions { flex-wrap:wrap; } }
@media(max-width:760px) { body>header { padding:20px; } main { padding:24px 18px; } #steps a { font-size:9px; gap:8px; } #steps { padding-bottom:20px; } .heading { margin:28px 0 24px; } .layout { grid-template-columns:1fr; } #step-content { padding:23px 20px; } aside { position:static; } .fields { gap:18px; } .actions .primary { width:100%; } body>footer { padding:24px 20px; margin-top:20px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; } }

.primary:disabled { opacity:.55; cursor:wait; transform:none; } #payment-message { font-size:13px; line-height:1.6; margin:20px 0; }