:root { --ink:#17201d; --muted:#707773; --paper:#f2f3ef; --line:rgba(23,32,29,.13); --green:#52f48a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Manrope,"Noto Sans SC",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.checkout-header { height:80px; padding:0 5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.back,.secure { font-size:11px; color:var(--muted); }
.brand { font-size:13px; font-weight:700; letter-spacing:.16em; }
.brand span { color:#8a918e; font-weight:500; }
.secure { justify-self:end; display:flex; align-items:center; gap:8px; }
.secure i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
main { min-height:calc(100vh - 80px); display:grid; grid-template-columns:1.05fr .95fr; }
.order-summary { padding:72px 8vw 70px 6vw; border-right:1px solid var(--line); }
.eyebrow,.step { margin:0 0 22px; font-size:10px; letter-spacing:.18em; font-weight:700; color:#7c837f; }
h1 { margin:0 0 48px; font-size:clamp(52px,5.5vw,82px); line-height:1; letter-spacing:-.06em; font-weight:500; }
.product-card,.gift-row { border-top:1px solid var(--line); }
.product-card { overflow:hidden; background:rgba(255,255,255,.42); }
.product-art { min-height:285px; position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden; background:radial-gradient(circle at 50% 56%,rgba(82,244,138,.14),transparent 54%); }
.product-art > span { position:absolute; top:22px; left:24px; z-index:1; color:#8b938f; font-size:8px; letter-spacing:.19em; }
.product-art img { width:min(64%,330px); aspect-ratio:1; object-fit:cover; mix-blend-mode:multiply; }
.product-info { padding:20px 24px 23px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-items:end; }
.product-info small { grid-column:1/-1; }
.product-info strong { margin-bottom:0; }
.gift-row { display:grid; grid-template-columns:94px 1fr auto; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.gift-art { width:76px; height:76px; margin-left:8px; overflow:hidden; background:rgba(255,255,255,.46); border-radius:50%; }
.gift-art img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.product-card small,.gift-row small,.product-card span,.gift-row span { display:block; color:var(--muted); font-size:10px; }
.product-card strong,.gift-row strong { display:block; margin:6px 0; font-size:16px; }
.gift-row b { color:#229851; font-size:15px; text-align:right; }
.gift-row b small { margin-bottom:4px; color:var(--muted); font-size:8px; font-weight:500; letter-spacing:.08em; }
.total { display:flex; justify-content:space-between; align-items:end; padding-top:28px; }
.total span { font-size:13px; font-weight:600; }
.total small { display:block; margin-top:6px; color:#229851; font-size:10px; font-weight:500; }
.total strong { font-size:42px; letter-spacing:-.04em; }
.payment-panel { padding:90px 7vw; background:#e5e7e1; display:flex; flex-direction:column; justify-content:center; }
.payment-panel h2 { margin:0; font-size:40px; letter-spacing:-.04em; font-weight:500; }
.hint { margin:12px 0 32px; color:var(--muted); font-size:12px; }
.email-field { display:block; margin-bottom:28px; }
.email-field > span,.method-label { display:block; margin-bottom:9px; color:#555d59; font-size:11px; font-weight:600; }
.email-field b { color:#d73d38; }
.email-field input { width:100%; height:56px; padding:0 16px; border:1px solid rgba(23,32,29,.2); border-radius:0; outline:none; background:rgba(255,255,255,.65); color:var(--ink); font:500 14px/1 Manrope,"Noto Sans SC",sans-serif; transition:.2s ease; }
.email-field input:focus { border-color:var(--ink); background:white; box-shadow:0 0 0 3px rgba(23,32,29,.06); }
.email-field input.invalid { border-color:#d73d38; }
.email-field small { display:none; margin-top:7px; color:#c53732; font-size:9px; }
.email-field small.visible { display:block; }
.method-label { margin:0 0 10px; }
.payment-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.payment-grid button { min-height:82px; padding:15px 16px; border:1px solid rgba(23,32,29,.14); background:rgba(255,255,255,.55); display:grid; grid-template-columns:38px 1fr 14px; align-items:center; gap:12px; text-align:left; cursor:pointer; transition:.2s ease; }
.payment-grid button:hover,.payment-grid button.selected { border-color:var(--ink); background:white; transform:translateY(-1px); }
.payment-grid button i { width:12px; height:12px; border:1px solid #aaa; border-radius:50%; }
.payment-grid button.selected i { border:4px solid var(--ink); }
.payment-grid strong { font-size:13px; }
.paymark { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:white; font-size:13px; font-weight:700; }
.wechat { background:#07c160; }.paypal { background:#07398a; }
.confirm { margin-top:28px; min-height:58px; border:0; background:var(--ink); color:white; font:600 13px/1 Manrope,"Noto Sans SC",sans-serif; cursor:pointer; }
.confirm:disabled { background:#aeb3af; cursor:not-allowed; }
.payment-note { margin:14px 0 0; color:#858c88; font-size:9px; line-height:1.6; }
@media (max-width:780px) { .checkout-header { padding:0 20px; grid-template-columns:1fr auto; }.checkout-header .brand { display:none; } main { grid-template-columns:1fr; }.order-summary { padding:50px 20px; border-right:0; }.payment-panel { padding:60px 20px 70px; }.product-art { min-height:240px; }.product-art img { width:min(70%,290px); } }
@media (max-width:430px) { .payment-grid { grid-template-columns:1fr; }.payment-grid button { min-height:70px; } h1 { font-size:50px; }.total strong { font-size:36px; } }