.detail-addon-panel { margin: 1.25rem 0; padding: 1.1rem; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-surface); color: var(--site-text); }
.detail-addon-panel h2 { color: var(--site-text); font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; }
.detail-addon-panel p,.detail-addon-panel small { color: var(--site-muted); line-height: 1.6; font-size: .82rem; }
.detail-addon-options { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0; }
.detail-addon-option { padding: .7rem .85rem; min-height: 44px; border: 1px solid var(--site-border); border-radius: 10px; background: var(--site-surface); color: var(--site-text); font: inherit; font-size: .85rem; text-align: left; }
.detail-addon-option[aria-pressed="true"] { background: #ffcf24; border-color: #b48a00; color: var(--site-on-accent); font-weight: 700; }
.detail-addon-option[aria-pressed="true"]::before { content: '✓ '; }
.detail-addon-option:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.detail-estimate-breakdown { margin: 1rem 0 .6rem; }
.detail-estimate-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .84rem; }
.detail-estimate-breakdown dt { font-weight: 500; }
.detail-estimate-breakdown dd { margin: 0; text-align: right; font-weight: 600; }
.detail-estimate-breakdown .detail-estimate-total { margin-top: .5rem; padding-top: .8rem; border-top: 1px solid var(--site-border); font-size: .95rem; }
.detail-estimate-total dt { font-weight: 700; }
@media(max-width:575px) { .detail-addon-option { width: 100%; } .detail-addon-panel { padding: .9rem; } }