.commerce-hero { max-width: 70rem; padding-block: clamp(5rem, 10vw, 9rem) 4rem; }
.commerce-kicker { margin: 0 0 1rem; color: var(--gold); font-size: .7rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.commerce-hero h1 { max-width: 13ch; margin: 0; font: 400 clamp(3.4rem, 8vw, 7.3rem)/.92 var(--serif); letter-spacing: -.05em; }
.commerce-hero > p:last-child { max-width: 47rem; margin: 2rem 0 0; color: var(--ivory-muted); line-height: 1.75; }
.commerce-compare { padding-block: 2rem clamp(7rem, 12vw, 11rem); }
.commerce-compare h2 { margin: 0; font: 400 clamp(2.2rem, 5vw, 4rem)/1 var(--serif); }
.commerce-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.commerce-plan-grid article { display: flex; flex-direction: column; min-height: 31rem; padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--coal) 62%, transparent); }
.commerce-plan-grid article.is-premium { border-color: var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--plum) 72%, transparent), color-mix(in srgb, var(--forest) 45%, var(--coal))); box-shadow: var(--shadow); }
.commerce-plan-grid small { color: var(--gold); letter-spacing: .12em; text-transform: uppercase; }
.commerce-plan-grid h3 { margin: .8rem 0 1.5rem; font: 400 2.4rem/1 var(--serif); }
.commerce-plan-grid ul { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.commerce-plan-grid li { position: relative; padding-left: 1.5rem; color: var(--ivory-muted); line-height: 1.55; }
.commerce-plan-grid li::before { position: absolute; left: 0; color: var(--gold); content: "◇"; }
.commerce-plan-grid article > strong, .commerce-plan-grid button { margin-top: auto; color: var(--gold-light); }
.commerce-plan-grid button { width: 100%; min-height: 3.4rem; border: 1px solid var(--gold); background: var(--gold); color: var(--ink); font-weight: 750; cursor: pointer; }
.commerce-honesty { max-width: 55rem; margin: 1.5rem 0 0; color: var(--ivory-muted); font-size: .82rem; line-height: 1.65; }
.commerce-order-list { display: grid; gap: .7rem; }
.commerce-order-list > a { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem; border: 1px solid var(--line-soft); color: var(--ivory); text-decoration: none; }
.commerce-order-list > a:hover, .commerce-order-list > a:focus-visible { border-color: var(--line); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.commerce-order-list > a > span { display: grid; gap: .3rem; }
.commerce-order-list > a > span:last-child { text-align: right; }
.commerce-order-list strong { font: 400 1.25rem/1.2 var(--serif); }
.commerce-order-list small, .commerce-order-list em { color: var(--ivory-muted); font-size: .72rem; font-style: normal; }
.commerce-order-list b { color: var(--gold-light); }
.commerce-empty { padding: clamp(2rem, 6vw, 5rem); border: 1px solid var(--line-soft); }
.commerce-empty h2 { font: 400 2rem/1.1 var(--serif); }
.commerce-empty p { color: var(--ivory-muted); }
.commerce-empty a { color: var(--gold-light); }
.commerce-order-card { padding: clamp(1.3rem, 4vw, 2.5rem); border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--coal) 58%, transparent); }
.commerce-order-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--line-soft); }
.commerce-order-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line-soft); }
.commerce-order-card dl div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.commerce-order-card dt { color: var(--ivory-muted); font-size: .76rem; }
.commerce-order-card dd { margin: 0; text-align: right; }
.commerce-line-items { margin: 1rem 0; }
.commerce-line-items > div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.commerce-line-items span { display: grid; gap: .35rem; }
.commerce-line-items small, .commerce-order-card details p, .commerce-pending, .commerce-locked { color: var(--ivory-muted); font-size: .8rem; line-height: 1.65; }
.commerce-order-card details { margin-top: 1.5rem; }
.commerce-order-card summary { color: var(--gold-light); cursor: pointer; }
@media (max-width: 720px) { .commerce-plan-grid, .commerce-order-card dl { grid-template-columns: 1fr; } .commerce-order-card dl div:nth-child(odd) { border-right: 0; } .commerce-order-list > a { align-items: flex-start; } }
.commerce-management { display: grid; gap: .8rem; }
.commerce-management article { padding: 1.2rem; border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--coal) 55%, transparent); }
.commerce-management article > header { display: flex; justify-content: space-between; gap: 1rem; }
.commerce-management header span { display: grid; gap: .3rem; }
.commerce-management header span:last-child { text-align: right; }
.commerce-management small, .commerce-management p { color: var(--ivory-muted); font-size: .74rem; }
.commerce-management form { display: grid; grid-template-columns: .6fr 1.4fr auto; gap: .6rem; margin-top: 1rem; }
.commerce-management label { display: grid; gap: .35rem; color: var(--ivory-muted); font-size: .7rem; }
.commerce-management input { min-height: 2.7rem; padding: .6rem; border: 1px solid var(--line-soft); background: var(--ink); color: var(--ivory); }
.commerce-management button { align-self: end; min-height: 2.7rem; padding: .6rem 1rem; border: 1px solid var(--gold); background: transparent; color: var(--gold-light); cursor: pointer; }
@media (max-width: 720px) { .commerce-management form { grid-template-columns: 1fr; } }