.wrap{max-width:820px}
.hero{padding:8px 56px 40px 220px}
.hero h1{font-weight:400;font-style:italic;font-size:clamp(26px,4vw,38px);margin:0}
.rows{margin:40px 0}
.row{display:grid;grid-template-columns:80px 1fr auto auto auto;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--rule)}
.rows .row:last-child{border-bottom:1px solid var(--rule)}
.row .ph{width:80px;height:80px;background:repeating-linear-gradient(135deg,#e4ded2,#e4ded2 8px,#dcd4c4 8px,#dcd4c4 16px);border:1px solid var(--rule)}
.row .rname{font-family:'Newsreader',serif;font-style:italic;font-size:18px}
.row .rformat{font-size:12px;opacity:.55;margin-top:2px}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:26px;height:26px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;font-size:14px;line-height:1}
.qty button:hover{border-color:var(--ink)}
.row .rprice{font-variant-numeric:tabular-nums;font-size:15px;text-align:right}
.remove{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.45;text-decoration:none;color:var(--ink);background:none;border:0;cursor:pointer;padding:0}
.remove:hover{opacity:1;color:var(--green)}
.empty{padding:60px 0;text-align:center}
.empty p{opacity:.65;margin-bottom:24px}
.empty a{color:var(--ink);border-bottom:1px solid var(--ink);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.summary{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid var(--ink)}
.summary .label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.summary .total{font-family:'Newsreader',serif;font-size:26px}
.checkout{display:block;width:100%;text-align:center;background:var(--ink);color:var(--paper);border:0;padding:18px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin:24px 0 100px}
.checkout:hover{background:var(--green)}

@media (max-width:640px){
.hero{padding:8px 20px 24px}
.row{grid-template-columns:56px 1fr;grid-template-areas:"img name" "img qty" "img price" "img remove";row-gap:8px}
.row .ph{grid-area:img}
}