.steps { display: flex; gap: 0; list-style: none; counter-reset: s; margin-top: 28px; max-width: 640px; }
.steps li { flex: 1; counter-increment: s; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .875rem; color: var(--colour-text-muted); padding-top: 14px; border-top: 3px solid var(--colour-border); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-mono); font-size: .6875rem; }
.steps li.done, .steps li.current { color: var(--colour-text); border-color: var(--colour-ink); }
.steps li.current { border-color: var(--colour-primary); }
.cart-wrap { display: flex; gap: 40px; align-items: flex-start; padding-top: 40px; padding-bottom: 96px; }
.cart-items { flex: 1; min-width: 0; }
.cart-head { display: flex; padding: 0 0 12px; border-bottom: 1px solid var(--colour-text); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--colour-text-muted); }
.cart-head span:first-child { flex: 1; }
.cart-head span { width: 140px; text-align: right; }
.line { display: flex; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--colour-border); }
.line .thumb { width: 132px; aspect-ratio: 1; background: #FFFFFF; border: 1px solid var(--colour-border); border-radius: var(--radius); overflow: hidden; flex: 0 0 auto; }
.line .thumb img { width: 100%; height: 100%; object-fit: contain; }
.line .info { flex: 1; min-width: 0; }
.line h2 { font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.line h2 a { text-decoration: none; }
.line .meta { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--colour-text-muted); }
.line .remove { margin-top: 12px; background: none; border: 0; text-decoration: underline; font-size: .8125rem; color: var(--colour-text-muted); cursor: pointer; padding: 0; }
.line .remove:hover { color: var(--colour-primary); }
.line .qty { display: flex; border: 1px solid var(--colour-border); border-radius: var(--radius); background: var(--colour-card); }
.line .qty button { width: 40px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 1.125rem; }
.line .qty output { width: 36px; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.line .total { width: 140px; text-align: right; font-family: var(--font-heading); font-size: 1.5rem; }
.empty { padding: 64px 0; text-align: center; }
.empty h2 { margin-bottom: 16px; }
.coupon { display: flex; gap: 8px; margin-top: 24px; max-width: 460px; }
.coupon input { flex: 1; padding: 14px 16px; border: 1px solid var(--colour-border); border-radius: var(--radius); background: var(--colour-card); }
.summary { flex: 0 0 400px; position: sticky; top: 104px; background: var(--colour-card); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 32px; }
.summary h2 { font-size: 2rem; margin-bottom: 20px; }
.sum-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: .9375rem; }
.sum-row.total { border-top: 1px solid var(--colour-text); margin-top: 12px; padding-top: 18px; align-items: baseline; }
.sum-row.total strong { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 400; color: var(--colour-primary); }
.summary .fine { font-size: .8125rem; color: var(--colour-text-muted); margin: 8px 0 20px; }
.summary .choice { padding: 14px 16px; margin-bottom: 8px; font-size: .9375rem; }
.pay-icons { display: flex; gap: 8px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.pay-icons span { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em; padding: 6px 10px; border: 1px solid var(--colour-border); border-radius: 2px; color: var(--colour-text-muted); }
.upsell { display: flex; gap: 20px; align-items: center; background: var(--colour-ink); color: #F4F5F6; border-radius: var(--radius); padding: 24px; margin-top: 32px; flex-wrap: wrap; }
.upsell .num { color: #FF4A57; }
.upsell div { flex: 1 1 240px; }
.upsell h2 { font-size: 1.5rem; }
.upsell p { color: var(--colour-ink-muted); font-size: .9375rem; }
@media (max-width: 1024px) {
  .cart-wrap { flex-direction: column; align-items: stretch; }
  .summary { position: static; flex: none; }
}
@media (max-width: 767px) {
  .cart-head { display: none; }
  .line { flex-wrap: wrap; gap: 16px; }
  .line .thumb { width: 96px; }
  .line .info { flex: 1 1 calc(100% - 112px); }
  .line .total { width: auto; margin-left: auto; }
  .coupon { flex-direction: column; }
}