/* Optional arrangements: compact category navigation, native selection controls. */
.ppb-addons {
 position: fixed;
 width: min(920px, calc(100% - 48px));
 max-width: none;
 height: min(640px, calc(100dvh - 64px));
 max-height: none;
 margin: auto;
 padding: 0;
 border: 1px solid var(--ppx-border);
 border-radius: var(--ppb-radius-panel);
 background: var(--ppx-canvas);
 color: var(--ppx-ink);
 box-shadow: 0 24px 80px #30292530;
 overflow: hidden;
 overscroll-behavior: contain;
}
.ppb-addons[open] { display: flex; flex-direction: column; }
.ppb-addons::backdrop { background: #241a168f; backdrop-filter: blur(3px); }
.ppb-addons__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex: none; padding: 26px 28px 24px; border-bottom: 1px solid var(--ppx-border); }
.ppb-addons__header h2 { font: 400 30px/1.18 var(--ppn-font-body, Georgia, serif); letter-spacing: -.025em; }
.ppb-addons__header p { max-width: 56ch; margin-top: 9px; color: var(--ppx-muted); font: 400 14px/1.5 var(--ppx-font); }
.ppb-addons__header .ppb-icon-button { border: 0; background: transparent; }
.ppb-addons__workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); flex: 1; min-height: 0; }
.ppb-addons__categories { display: flex; flex-direction: column; gap: 3px; padding: 20px 12px; border-right: 1px solid var(--ppx-border); background: #f7efe766; overflow-y: auto; }
.ppb-addon-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; width: 100%; padding: 11px 12px; border: 0; border-radius: var(--ppb-radius-control); background: transparent; color: var(--ppx-muted); font: 500 14px/1.4 var(--ppx-font); text-align: left; transition: color 160ms ease, background-color 160ms ease; }
.ppb-addon-category[aria-selected="true"] { background: #fff; color: var(--ppb-deep); box-shadow: 0 1px 4px #30292509; }
.ppb-addon-category__count { display: grid; place-items: center; flex: none; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 50%; background: var(--ppb-deep); color: #fff; font-size: 11px; }
.ppb-addons__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 25px 28px; scroll-padding-block: 24px; }
.ppb-addon-group { outline-offset: 5px; }
.ppb-addon-choices { min-width: 0; padding: 0; border: 0; }
.ppb-addon-choices legend { padding: 0; font: 550 20px/1.35 var(--ppx-font); letter-spacing: -.025em; }
.ppb-addon-group__note { margin: 6px 0 18px; color: var(--ppx-muted); font-size: 13px; line-height: 1.5; }
.ppb-addon-grid { display: grid; gap: 0; border-top: 1px solid var(--ppx-border); }
.ppb-addon-option { min-width: 0; border-bottom: 1px solid var(--ppx-border); transition: background-color 160ms ease, box-shadow 160ms ease; }
.ppb-addon-option:has(input:checked) { background: #f7efe7a8; box-shadow: inset 2px 0 var(--ppb-deep); }
.ppb-addon-option[data-included] { background: #f4f5ef; box-shadow: none; }
.ppb-addon-option__select { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 12px; min-height: 72px; padding: 18px 12px; cursor: pointer; }
.ppb-addon-option input,
.ppb-addon-none input { appearance: auto; margin: 1px 0 0; width: 20px; height: 20px; accent-color: var(--ppb-deep); }
.ppb-addon-option__body { display: block; min-width: 0; }
.ppb-addon-option__body strong { display: block; font-size: 14px; font-weight: 550; line-height: 1.45; }
.ppb-addon-option__description { display: block; margin-top: 6px; color: var(--ppx-muted); font-size: 13px; line-height: 1.55; }
.ppb-addon-option__price { max-width: 125px; color: var(--ppb-deep); font-size: 14px; font-weight: 600; line-height: 1.45; text-align: right; white-space: normal; }
.ppb-addon-option__price del { display: block; color: var(--ppx-muted); font-size: 12px; font-weight: 400; }
.ppb-addon-option__price ins { text-decoration: none; }
.ppb-addon-option__availability { display: block; margin-top: 7px; color: var(--ppx-muted); font-size: 12px; line-height: 1.5; }
.ppb-addon-option__details { padding: 0 12px 14px 46px; }
.ppb-addon-option__details summary { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; color: var(--ppb-deep); font-size: 13px; cursor: pointer; list-style: none; }
.ppb-addon-option__details summary::-webkit-details-marker { display: none; }
.ppb-addon-option__details summary::after { content: "+"; }
.ppb-addon-option__details[open] summary::after { content: "−"; }
.ppb-addon-option__details p { color: var(--ppx-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ppb-addon-none { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 14px 12px; border-bottom: 1px solid var(--ppx-border); color: var(--ppx-muted); font-size: 14px; cursor: pointer; }
.ppb-addon-none:has(input:checked) { color: var(--ppx-ink); }
.ppb-addons__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: none; padding: 20px 28px; border-top: 1px solid var(--ppx-border); background: #fff; }
.ppb-addons__selection { flex: 1; min-width: 0; }
.ppb-addons__selection-heading { display: flex; align-items: baseline; gap: 16px; }
.ppb-addons__selection-heading > span { font-size: 13px; font-weight: 500; }
.ppb-addons__selection-heading > strong { color: var(--ppb-deep); font-size: 19px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.ppb-addons__selection-note,
.ppb-addons__quote-note { display: block; margin-top: 4px; color: var(--ppx-muted); font-size: 12px; line-height: 1.5; }
.ppb-addons__quote-note { color: var(--ppb-deep); }
.ppb-addons__footer > .ppb-primary { flex: none; min-width: 210px; }
.ppb-addon-feedback:empty { display: none; }
.ppb-addon-feedback { flex: none; margin: 0; padding: 12px 28px; border-top: 1px solid var(--ppx-border); font-size: 13px; color: var(--ppx-ink); line-height: 1.6; }
.ppb-addon-feedback[data-error] { background: var(--ppx-error-bg); border-top-color: #d3aaa0; color: var(--ppx-error); }
.ppb-addon-feedback__message { display: block; }
.ppb-addon-feedback a { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 0; border-radius: var(--ppb-radius-control); font-weight: 550; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
 .ppb-addon-category:hover { color: var(--ppb-deep); background: #fff9; }
 .ppb-addon-option:not([data-included]):hover { background: #f7efe777; }
 .ppb-addon-none:hover { color: var(--ppb-deep); }
}
@media (max-width: 767px) {
 .ppb-addons { inset: 0; top: var(--ppb-viewport-top, 0px); width: 100%; height: var(--ppb-viewport-height, 100dvh); margin: 0; border: 0; border-radius: 0; }
 .ppb-addons__header { gap: 8px; padding: max(20px, env(safe-area-inset-top)) 20px 18px; }
 .ppb-addons__header h2 { font-size: 26px; line-height: 1.2; }
 .ppb-addons__header p { max-width: 29ch; font-size: 13px; line-height: 1.5; }
 .ppb-addons__header .ppb-icon-button { margin: -7px -8px 0 0; }
 .ppb-addons__workspace { display: flex; flex-direction: column; }
 .ppb-addons__categories { flex: none; flex-direction: row; gap: 6px; padding: 8px 20px; border-right: 0; border-bottom: 1px solid var(--ppx-border); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-padding-inline: 20px; }
 .ppb-addon-category { flex: none; width: auto; min-height: 44px; padding: 10px 12px; white-space: nowrap; font-size: 13px; }
 .ppb-addon-category[aria-selected="true"] { color: #fff; background: var(--ppb-deep); box-shadow: none; }
 .ppb-addon-category[aria-selected="true"] .ppb-addon-category__count { color: var(--ppb-deep); background: #fff; }
 .ppb-addons__body { flex: 1; padding: 23px 20px; }
 .ppb-addon-choices legend { font-size: 20px; }
 .ppb-addon-group__note { margin-bottom: 18px; }
 .ppb-addon-option__select { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 7px; padding: 16px 10px; }
 .ppb-addon-option__body strong { font-size: 15px; }
 .ppb-addon-option__price { grid-column: 2; max-width: none; text-align: left; font-size: 14px; }
 .ppb-addon-option__price del { display: inline; margin-right: 5px; }
 .ppb-addon-option__details { padding-left: 42px; }
 .ppb-addon-feedback { padding: 10px 20px; font-size: 13px; }
 .ppb-addons__footer { flex-direction: column; align-items: stretch; gap: 13px; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
 .ppb-addons__selection-heading { justify-content: space-between; gap: 12px; }
 .ppb-addons__selection-heading > strong { font-size: 20px; }
 .ppb-addons__footer > .ppb-primary { width: 100%; min-height: 54px; }
}
@media (max-width: 359px) {
 .ppb-addons__header { padding-inline: 16px; }
 .ppb-addons__header h2 { font-size: 24px; }
 .ppb-addons__categories { padding-inline: 16px; }
 .ppb-addons__body { padding-inline: 16px; }
 .ppb-addons__footer { padding-inline: 16px; }
 .ppb-addon-feedback { padding-inline: 16px; }
 .ppb-addon-option__select { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
 .ppb-addon-category,
 .ppb-addon-option { transition: none; }
}
.ppb-keyboard .ppb-addon-category,
.ppb-keyboard .ppb-addon-option { transition: none; }
/* Desktop sidebar stays familiar; phone categories expose their scroll affordance. */
.ppb-addon-category-nav { min-width: 0; min-height: 0; }
.ppb-addon-category-nav .ppb-addons__categories { height: 100%; }
.ppb-addon-category-nav>button { display: none; }
@media (max-width: 767px) {
 .ppb-addon-category-nav { position: relative; flex: none; border-bottom: 1px solid var(--ppx-border); background: #f7efe766; }
 .ppb-addon-category-nav .ppb-addons__categories { height: auto; border-bottom: 0; background: transparent; }
 .ppb-addon-category-nav.has-category-overflow .ppb-addons__categories { margin-inline: 44px; padding-inline: 4px; scroll-padding-inline: 4px; }
 .ppb-addon-category-nav.has-category-overflow>button { position: absolute; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ppb-deep); font-size: 20px; }
 .ppb-addon-category-nav__previous { left: 0; }
 .ppb-addon-category-nav__next { right: 0; }
 .ppb-addon-category-nav>button:disabled { opacity: .3; cursor: default; }
}