.cart-nav-link { min-height: 44px; display: inline-flex; align-items: center; gap: .42rem; padding-inline: .65rem; border-radius: .6rem; color: var(--title-color); font-size: .76rem; font-weight: 700; }
.cart-nav-link:hover, .cart-nav-link.active { background: var(--first-color-soft); color: var(--first-color-alt); }
.cart-nav-link svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cart-nav-link b { min-width: 1.25rem; height: 1.25rem; display: grid; place-items: center; padding-inline: .25rem; border-radius: 99px; background: var(--first-color-alt); color: white; font-size: .62rem; font-variant-numeric: tabular-nums; }
.commerce-hero { padding-block: 2.6rem 2rem; border-bottom: 1px solid var(--border-color); background: radial-gradient(circle at 85% 15%, var(--first-color-soft), transparent 28rem), var(--surface-color); }
.commerce-heading { display: grid; gap: 1.75rem; }
.commerce-heading h1 { margin-top: .45rem; font-size: clamp(2.25rem, 8vw, 4rem); }
.commerce-heading > div > p { max-width: 650px; margin-top: .65rem; font-size: .92rem; }
.checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.checkout-steps li { position: relative; display: grid; justify-items: center; gap: .35rem; color: var(--text-light); font-size: .66rem; font-weight: 700; }
.checkout-steps li:not(:last-child)::after { content: ""; position: absolute; top: 1rem; left: calc(50% + 1.15rem); width: calc(100% - 2.3rem); height: 1px; background: var(--border-color); }
.checkout-steps span { width: 2rem; height: 2rem; display: grid; place-items: center; z-index: 1; border: 1px solid var(--border-color); border-radius: 50%; background: var(--surface-color); color: var(--text-light); font-size: .7rem; }
.checkout-steps .active { color: var(--first-color-alt); }
.checkout-steps .active span { border-color: var(--first-color-alt); background: var(--first-color-alt); color: white; box-shadow: 0 0 0 .25rem var(--first-color-soft); }
.checkout-steps .complete { color: var(--success-color); }
.checkout-steps .complete span { border-color: var(--success-color); background: color-mix(in srgb, var(--success-color) 12%, var(--surface-color)); color: var(--success-color); }
.checkout-steps span svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.commerce-section { min-height: 55dvh; padding-block: 2rem 5rem; }
.commerce-alert { margin-bottom: 1.25rem; }
.cart-layout, .checkout-layout { display: grid; gap: 1.25rem; }
.commerce-panel { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }
.commerce-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--border-color); }
.commerce-panel-heading h2, .cart-summary h2 { margin-top: .3rem; font-size: 1.25rem; }
.commerce-panel-heading > a { min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; font-size: .72rem; font-weight: 700; }
.cart-product-list { padding-inline: 1.25rem; }
.cart-product { padding-block: 1.25rem; border-bottom: 1px solid var(--border-color); }
.cart-product:last-child { border-bottom: 0; }
.cart-product-cover { width: 100%; min-height: 150px; display: grid; place-items: center; overflow: hidden; border-radius: .75rem; background: var(--code-bg); color: var(--first-color); font-family: ui-monospace, monospace; }
.cart-product-cover img { width: 100%; height: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.cart-product-content { display: grid; gap: 1rem; padding-top: .9rem; }
.cart-product-license { margin-bottom: .25rem; color: var(--first-color-alt); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.cart-product h3 { font-size: 1.05rem; }
.cart-product-content > div > p:not(.cart-product-license) { margin-top: .35rem; font-size: .78rem; }
.cart-product-content > div > small { display: block; margin-top: .5rem; color: var(--text-light); font-size: .65rem; }
.cart-product-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cart-product-actions > strong { color: var(--title-color); font-size: .95rem; font-variant-numeric: tabular-nums; }
.cart-product-actions > strong small { color: var(--text-light); font-size: .62rem; }
.cart-remove { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; padding-inline: .55rem; border: 0; border-radius: .45rem; background: transparent; color: var(--danger-color); font-size: .7rem; font-weight: 700; cursor: pointer; }
.cart-remove:hover { background: color-mix(in srgb, var(--danger-color) 10%, transparent); }
.cart-remove svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cart-summary { align-self: start; padding: 1.25rem; }
.price-breakdown { margin-block: 1rem; }
.price-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .62rem; border-bottom: 1px solid var(--border-color); font-size: .78rem; }
.price-breakdown dt { color: var(--text-color); font-weight: 500; }
.price-breakdown dd { margin: 0; color: var(--title-color); font-variant-numeric: tabular-nums; }
.price-breakdown small { display: block; color: var(--text-light); font-size: .62rem; }
.price-breakdown .discount-line dt, .price-breakdown .discount-line dd { color: var(--success-color); }
.price-breakdown .price-total { padding-top: .85rem; border-bottom: 0; }
.price-total dt { color: var(--title-color); font-weight: 800; }
.price-total dd { font-size: 1.22rem; font-weight: 800; }
.price-total dd small { display: inline; }
.coupon-form { display: grid; gap: .4rem; padding-block: 1rem; border-top: 1px solid var(--border-color); }
.coupon-form label { color: var(--title-color); font-size: .74rem; font-weight: 700; }
.coupon-form > div:first-of-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.coupon-form .form-control { min-width: 0; }
.coupon-form > small { color: var(--text-light); font-size: .64rem; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--success-color) 32%, var(--border-color)); border-radius: .65rem; background: color-mix(in srgb, var(--success-color) 9%, var(--surface-color)); }
.coupon-applied > div { display: flex; align-items: center; gap: .55rem; }
.coupon-applied svg { width: 1.15rem; fill: none; stroke: var(--success-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.coupon-applied span { display: flex; flex-direction: column; }
.coupon-applied strong { color: var(--success-color); font-size: .75rem; }
.coupon-applied small { color: var(--text-light); font-size: .62rem; }
.coupon-applied button { min-height: 44px; border: 0; background: transparent; color: var(--danger-color); font-size: .68rem; font-weight: 700; cursor: pointer; }
.checkout-cta { margin-top: 1rem; }
.checkout-assurances { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.checkout-assurances li { display: flex; align-items: center; gap: .5rem; color: var(--text-light); font-size: .66rem; }
.checkout-assurances svg { width: 1rem; flex: 0 0 auto; fill: none; stroke: var(--success-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.commerce-empty { max-width: 620px; display: flex; flex-direction: column; align-items: center; margin-inline: auto; padding-block: 3rem; text-align: center; }
.commerce-empty-icon { width: 4rem; height: 4rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: var(--first-color-soft); color: var(--first-color-alt); }
.commerce-empty-icon svg { width: 1.8rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.commerce-empty h2 { margin-top: .55rem; font-size: clamp(1.6rem, 6vw, 2.4rem); }
.commerce-empty p { max-width: 520px; margin-block: .7rem 1.25rem; font-size: .85rem; }
.checkout-main { display: grid; gap: 1.25rem; }
.checkout-contact, .checkout-review { overflow: hidden; }
.checkout-intro { padding: 1.25rem 1.25rem 0; font-size: .78rem; }
.digital-badge { min-height: 1.75rem; display: inline-flex; align-items: center; padding-inline: .6rem; border-radius: 99px; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .64rem; font-weight: 750; }
.checkout-fields { display: grid; gap: 1rem; padding: 1.25rem; }
.checkout-fields label { display: block; margin-bottom: .35rem; color: var(--title-color); font-size: .76rem; font-weight: 700; }
.checkout-fields small { display: block; margin-top: .3rem; color: var(--text-light); font-size: .64rem; }
.checkout-product { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: .75rem; margin-inline: 1.25rem; padding-block: 1rem; border-bottom: 1px solid var(--border-color); }
.checkout-product:last-child { border-bottom: 0; }
.checkout-product-mark { width: 48px; aspect-ratio: 1; display: grid; place-items: center; border-radius: .55rem; background: var(--code-bg); color: var(--first-color); font-family: ui-monospace, monospace; font-size: .6rem; }
.checkout-product h3 { font-size: .82rem; }
.checkout-product p { margin-top: .2rem; color: var(--text-light); font-size: .62rem; }
.checkout-product > strong { grid-column: 2; color: var(--title-color); font-size: .76rem; font-variant-numeric: tabular-nums; }
.terms-check { min-height: 48px; display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; color: var(--text-color); font-size: .7rem; line-height: 1.5; cursor: pointer; }
.terms-check input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .15rem; accent-color: var(--first-color-alt); }
.digital-purchase-notice { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1rem; padding: .85rem; border: 1px solid color-mix(in srgb, #d97706 38%, var(--border-color)); border-radius: .65rem; background: color-mix(in srgb, #f59e0b 9%, var(--surface-color)); }
.digital-purchase-notice > svg { width: 1.2rem; flex: 0 0 auto; margin-top: .08rem; fill: none; stroke: #b45309; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.digital-purchase-notice strong { display: block; color: var(--title-color); font-size: .74rem; }
.digital-purchase-notice p { margin-top: .28rem; color: var(--text-color); font-size: .66rem; line-height: 1.55; }
.purchase-confirmations { margin-top: .9rem; padding-top: .1rem; border-top: 1px solid var(--border-color); }
.purchase-confirmations .terms-check { margin-top: .65rem; }
.checkout-next-note { display: flex; align-items: flex-start; gap: .45rem; margin-top: .8rem; color: var(--text-light); font-size: .64rem; line-height: 1.5; }
.checkout-next-note svg { width: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.purchase-action-form { margin: 0; }
.payment-result { min-height: 66dvh; display: grid; align-items: center; }
.payment-result-card { max-width: 680px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.payment-result-card h1 { margin-top: .55rem; font-size: clamp(2rem, 7vw, 3.5rem); }
.payment-result-card > p { max-width: 520px; margin: .75rem auto 0; }
.payment-result-icon { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; }
.payment-result-icon svg { width: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.payment-result-icon.success { background: color-mix(in srgb, var(--success-color) 13%, var(--surface-color)); color: var(--success-color); }
.payment-result-icon.processing { background: var(--first-color-soft); color: var(--first-color-alt); }
.payment-result-actions { display: flex; flex-direction: column; justify-content: center; gap: .6rem; margin-top: 1.4rem; }
.payment-provider-note { display: block; margin-top: .55rem; color: var(--text-light); font-size: .64rem; text-align: center; }
.payment-order-note { margin-top: .8rem; padding: .7rem; border: 1px solid var(--border-color); border-radius: .55rem; background: var(--surface-muted); color: var(--text-color); font-size: .7rem; }
.payment-order-note.danger { border-color: color-mix(in srgb, var(--danger-color) 35%, var(--border-color)); color: var(--danger-color); }

@media (max-width: 991.98px) {
    .nav-actions { flex-wrap: wrap; }
    .nav-actions .cart-nav-link { width: 100%; justify-content: center; border: 1px solid var(--border-color); background: var(--surface-muted); }
}

@media (min-width: 576px) {
    .cart-product { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; }
    .cart-product-cover { min-height: 100px; }
    .cart-product-content { padding-top: 0; }
    .checkout-product { grid-template-columns: 48px minmax(0, 1fr) auto; }
    .checkout-product > strong { grid-column: auto; }
    .payment-result-actions { flex-direction: row; }
}

@media (min-width: 768px) {
    .commerce-heading { grid-template-columns: 1fr 330px; align-items: end; }
    .checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .cart-summary { position: sticky; top: calc(var(--header-height) + 1.25rem); }
    .cart-product-content { grid-template-columns: minmax(0, 1fr) auto; }
    .cart-product-actions { flex-direction: column; align-items: end; justify-content: space-between; }
    .nav-actions .cart-nav-link { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-nav-link, .cart-remove { transition-duration: .01ms !important; }
}