.extras-page { min-height: 100vh; background: radial-gradient(circle at 85% 0%, rgba(105, 8, 76, .31), transparent 33%), var(--bg); }
.extras-main { width: min(1120px, calc(100% - 40px)); margin: 44px auto 104px; }
.extras-heading { max-width: 690px; margin-bottom: 34px; }
.extras-heading h1 { margin-bottom: 12px; }
.extras-heading > p:last-child { color: var(--muted); font-size: 17px; }
.checkout-back { margin-left: auto; color: var(--muted); font-size: 14px; }
.checkout-back:hover { color: var(--gold); }
.extras-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .78fr); gap: 20px; align-items: start; }
.extras-panel, .extras-summary { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.extras-info { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid rgba(212,175,55,.28); border-radius: 7px; background: rgba(212,175,55,.045); }
.extras-info span { color: var(--gold); font-size: 26px; line-height: 1; }.extras-info p { margin: 0; color: var(--muted); font-size: 15px; }
.extras-section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid rgba(212,175,55,.3); }.extras-section-head .eyebrow { margin-bottom: 6px; }.extras-section-head h2 { font-size: 28px; }.extras-section-head > span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.extras-list { display: grid; gap: 10px; }.extra-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 92px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 7px; background: #101013; }.extra-item.is-selected { border-color: rgba(212,175,55,.65); background: linear-gradient(110deg, rgba(212,175,55,.12), #101013 62%); }.extra-icon { color: var(--gold); font-size: 25px; text-align: center; }.extra-copy { min-width: 0; }.extra-copy strong, .extra-copy small { display: block; }.extra-copy strong { font-size: 17px; }.extra-copy small { color: var(--muted); margin-top: 3px; }.extra-price { display: block; color: var(--gold); font-weight: 800; margin-top: 4px; }.extra-control { display: grid; grid-template-columns: 36px 30px 36px; align-items: center; }.extra-control button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(212,175,55,.58); border-radius: 50%; background: transparent; color: var(--gold); font-size: 22px; cursor: pointer; }.extra-control button:disabled { opacity: .38; cursor: default; }.extra-control output { text-align: center; font-weight: 800; }
.extras-summary { position: sticky; top: 18px; display: grid; gap: 17px; }.extras-summary > strong { font-size: 23px; }.extras-summary ul { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }.extras-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }.extras-summary .text-button { margin: 0 auto; }
@media (max-width: 800px) { .extras-main { width: min(100% - 36px, 620px); margin-top: 28px; }.checkout-back { display: none; }.extras-layout { grid-template-columns: 1fr; }.extras-summary { position: static; order: -1; }.extras-panel, .extras-summary { padding: 18px; }.extras-section-head { align-items: start; flex-direction: column; }.extra-item { grid-template-columns: 32px minmax(0, 1fr); }.extra-control { grid-column: 2; justify-self: end; }.extra-copy strong { font-size: 16px; } }