.product-package-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line, #35414a); border-radius: 10px; }
.product-package-field[hidden] { display: none; }
.product-package-field legend { padding: 0 7px; color: #e8edef; font-size: 13px; font-weight: 600; }
.product-package-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #725829; border-radius: 7px; background: #f2a20d0a; color: #f4c777; }
.product-package-base > small { white-space: nowrap; color: #bfa36f; }
.product-package-options { display: grid; gap: 8px; max-height: 250px; overflow-y: auto; }
.product-package-options > .product-package-option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line, #35414a); border-radius: 7px; cursor: pointer; }
.product-package-option:has(input:checked) { border-color: #a77b33; background: #f2a20d0a; }
.product-package-option:has(input:focus-visible) { outline: 2px solid #f4c777; outline-offset: 2px; }
.product-package-option > input { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: #f2a20d; }
.product-package-option > span { display: grid; min-width: 0; gap: 4px; }
.product-package-option strong { font-size: 13px; font-weight: 500; color: #e8edef; overflow-wrap: anywhere; }
.product-package-field small, .product-package-empty { font-size: 12px; line-height: 1.6; color: #93a0a7; overflow-wrap: anywhere; }
.product-package-field #product-package-summary { color: #f4c777; }
.product-package-empty { margin: 0; }
.product-type-label.package { color: #b6d7fd; background: #4eb3ff12; }