.pack { margin-top: clamp(3rem, 7vw, 5rem); border: 1px solid var(--color-gold); border-radius: var(--radius-card); padding: clamp(1.5rem, 4vw, 3rem); background: radial-gradient(120% 90% at 100% 0%, rgba(200, 167, 98, 0.16), transparent 55%), var(--color-surface); }
.pack__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-line); }
.pack__title { display: flex; align-items: center; gap: 1rem; color: var(--color-gold); font-size: clamp(2rem, 6vw, 3.6rem); }
.pack__title .icon { width: 1.1em; height: 1.1em; stroke-width: 1.4; }
.pack__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1; color: var(--color-cream); }

.pack__cols { display: grid; gap: 2rem; padding-block: 2rem; }
@media (min-width: 760px) { .pack__cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.pack__cols h3 { font-size: 1.7rem; margin-bottom: 1.2rem; }

.pack__pick { cursor: pointer; }
.pack__pick .pack__on { display: none; }
.pack__pick:has(input:checked) .pack__off { display: none; }
.pack__pick:has(input:checked) .pack__on { display: inline; }
.pack__pick:focus-within { outline: 3px solid var(--color-cream); outline-offset: 3px; }

.pack__pick { white-space: normal; text-align: center; }
@media (max-width: 560px) { .pack__pick { width: 100%; } }
