.checkout-page { background:#f6f5f1; }.checkout-header { align-items:center; background:#fff; border-bottom:1px solid #e8e7e3; display:flex; justify-content:space-between; padding:19px max(24px,calc((100% - 1180px)/2)); }.checkout-header > a:last-child { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.checkout-layout { align-items:start; display:grid; gap:45px; grid-template-columns:minmax(0,1fr) 380px; margin:0 auto; max-width:1120px; padding:58px 24px 100px; }.checkout-form-wrap h1 { font-size:3rem; margin:0 0 26px; }.checkout-steps { display:flex; gap:0; list-style:none; margin:0 0 35px; padding:0; }.checkout-steps li { color:#92948f; flex:1; font-size:.62rem; font-weight:700; letter-spacing:.07em; position:relative; text-align:center; text-transform:uppercase; }.checkout-steps li::before { background:#d8d8d3; content:''; height:1px; left:0; position:absolute; right:0; top:12px; z-index:0; }.checkout-steps li:first-child::before { left:50%; }.checkout-steps li:last-child::before { right:50%; }.checkout-steps span { background:#d8d8d3; border-radius:50%; color:#fff; display:block; height:25px; line-height:25px; margin:0 auto 8px; position:relative; width:25px; z-index:1; }.checkout-steps .is-current { color:var(--ink); }.checkout-steps .is-current span { background:var(--gold); }.checkout-panel { background:#fff; border:0; box-shadow:0 4px 18px rgba(48,51,47,.05); display:none; margin:0; padding:32px; }.checkout-panel.is-visible { display:block; animation:fade-in .3s ease; }.checkout-panel legend { font-family:var(--serif); font-size:1.75rem; margin-bottom:24px; padding:0; }.form-grid { display:grid; gap:17px; grid-template-columns:1fr 1fr; }.form-grid label { color:#565954; font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.form-grid input,.form-grid select,.coupon input { background:#faf9f6; border:1px solid #e3e1db; display:block; margin-top:7px; padding:12px; width:100%; }.form-grid input:focus,.form-grid select:focus,.coupon input:focus { border-color:var(--gold); outline:0; }.form-grid .full { grid-column:1/-1; }.next-step { margin-top:25px; }.step-actions { display:flex; justify-content:space-between; margin-top:25px; }.back-step { background:transparent; border:0; color:#656862; font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.delivery-option,.payment-option { align-items:center; background:#f8f7f3; border:1px solid #e4e2dd; display:flex; gap:13px; margin-top:22px; padding:16px; }.delivery-option > span { background:var(--sage); border-radius:50%; color:#fff; display:grid; height:22px; place-items:center; width:22px; }.delivery-option strong,.payment-option strong { display:block; font-size:.86rem; }.delivery-option p,.payment-option small { color:var(--muted); display:block; font-size:.73rem; margin:2px 0 0; }.payment-option { cursor:pointer; justify-content:flex-start; }.payment-option input { appearance:none; }.payment-radio { border:2px solid var(--gold); border-radius:50%; height:18px; position:relative; width:18px; }.payment-option input:checked + .payment-radio::after { background:var(--gold); border-radius:50%; content:''; inset:3px; position:absolute; }.payment-option b { color:#fff; background:#009ee3; border-radius:4px; margin-left:auto; padding:5px; }.secure-note { color:#687069; font-size:.74rem; margin-top:17px; }.review-box { background:#f7f6f2; color:#626660; font-size:.82rem; padding:16px; }.checkout-summary { background:#fff; box-shadow:0 5px 20px rgba(48,51,47,.06); padding:25px; position:sticky; top:24px; }.checkout-summary h2 { font-size:2rem; margin:0 0 17px; }.checkout-item { border-top:1px solid #eceae5; display:flex; font-size:.78rem; justify-content:space-between; padding:11px 0; }.checkout-item span:first-child { max-width:70%; }.coupon { border-top:1px solid #eceae5; margin-top:8px; padding-top:17px; }.coupon input { display:inline-block; margin:0; width:67%; }.coupon button { background:var(--ink); border:0; color:#fff; font-size:.65rem; font-weight:700; margin-left:4px; padding:13px 8px; text-transform:uppercase; width:30%; }.coupon p { color:var(--gold-dark); font-size:.68rem; margin:5px 0 0; }.checkout-totals { border-top:1px solid #eceae5; margin-top:17px; padding-top:12px; }.checkout-totals > div { display:flex; font-size:.78rem; justify-content:space-between; margin:8px 0; }.checkout-grand-total { border-top:1px solid #e4e2dd; font-size:1.05rem!important; margin-top:12px!important; padding-top:12px; }.confirmation { background:#fff; box-shadow:0 4px 18px rgba(48,51,47,.05); padding:65px 35px; text-align:center; }.confirmation-check { background:#758b6e; border-radius:50%; color:#fff; display:grid; font-size:2.2rem; height:75px; margin:0 auto 22px; place-items:center; width:75px; }.confirmation h1 { font-size:2.7rem; }.confirmation > p { color:var(--muted); }.confirmation .button { margin-top:15px; } @keyframes fade-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } } @media(max-width:800px) { .checkout-layout { grid-template-columns:1fr; }.checkout-summary { position:static; }.checkout-summary { grid-row:1; }.checkout-form-wrap { grid-row:2; } } @media(max-width:500px) { .checkout-layout { padding:37px 16px 70px; }.checkout-panel { padding:22px; }.checkout-steps li { font-size:0; }.checkout-steps span { margin-bottom:0; }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; }.checkout-form-wrap h1 { font-size:2.5rem; } }