/* "Complete your bundle" under the buy button of a gift product (2026-10-20, redesigned 2026-10-22 as a product card). Server-rendered,
   so it takes its space on first paint. Loaded only when it renders. Logical properties only (RTL twin); spacing 4/8/12/16/24. */
.nxpb { --pb-sig: var(--nx-signal, #45f882); --pb-line: rgba(255, 255, 255, .08); --pb-t2: var(--nx-text-2, #b8bec6); --pb-t3: var(--nx-text-3, #98a0a9); container-type: inline-size; margin-block-start: 16px; padding: 16px; border: 1px solid rgba(69, 248, 130, .2); border-radius: 16px; background: var(--nx-surface, #121E18); color: var(--nx-text, #f2f4f6); text-align: start; }
.nxpb .nx-i { inline-size: 16px; block-size: 16px; flex: none; }
.nxpb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nxpb-h { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 800; color: inherit; }
.nxpb-save { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 8px; border-radius: 999px; background: rgba(69, 248, 130, .14); color: var(--pb-sig); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nxpb-save .nx-i { inline-size: 14px; block-size: 14px; }
.nxpb-lead { margin: 4px 0 12px; font-size: 13px; line-height: 1.45; color: var(--pb-t2); }
.nxpb-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--pb-line); border-radius: 12px; overflow: hidden; }
.nxpb-line { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
.nxpb-line + .nxpb-line { border-block-start: 1px solid var(--pb-line); }
.nxpb-line.is-current { background: rgba(69, 248, 130, .06); }
.nxpb-line.is-current::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--pb-sig); }
.nxpb-art { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .04); color: var(--pb-sig); }
.nxpb-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nxpb-art .nx-i { inline-size: 22px; block-size: 22px; }
.nxpb-what { display: grid; gap: 4px; min-inline-size: 0; }
.nxpb-name { font-size: 14px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.nxpb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nxpb-type, .nxpb-qty, .nxpb-tag { display: inline-flex; align-items: center; min-block-size: 20px; padding-inline: 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; }
.nxpb-type, .nxpb-qty { background: rgba(255, 255, 255, .07); color: var(--pb-t2); }
.nxpb-qty { font-variant-numeric: tabular-nums; }
.nxpb-tag { background: rgba(69, 248, 130, .14); color: var(--pb-sig); }
.nxpb-amt { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nxpb-sum { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px; border-radius: 12px; background: rgba(69, 248, 130, .06); font-variant-numeric: tabular-nums; }
.nxpb-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nxpb-sum dt, .nxpb-sum dd { margin: 0; }
.nxpb-sub { font-size: 13px; color: var(--pb-t3); }
.nxpb-sub s { text-decoration-thickness: 1px; }
.nxpb-disc { font-size: 13px; font-weight: 700; color: var(--pb-sig); }
.nxpb-grand { margin-block-start: 4px; padding-block-start: 8px; border-block-start: 1px solid rgba(69, 248, 130, .18); }
.nxpb-grand dt { font-size: 14px; font-weight: 800; }
.nxpb-grand dd { font-size: 22px; line-height: 1.1; font-weight: 900; }
.nxpb-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-block-start: 12px; }
.nxpb-add, .nxpb-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 8px 16px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: filter .16s ease, border-color .16s ease, background-color .16s ease; }
.nxpb-add { border: 0; background: var(--pb-sig); color: #07120b; }
.nxpb-add:hover { filter: brightness(1.08); }
.nxpb-go { min-block-size: 44px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--nx-text, #f2f4f6); font-size: 14px; font-weight: 700; }
.nxpb-go:hover { border-color: var(--pb-sig); color: var(--nx-text, #f2f4f6); background: rgba(69, 248, 130, .06); }
[dir="rtl"] .nxpb-go .nx-i { transform: scaleX(-1); }
.nxpb-add:focus-visible, .nxpb-go:focus-visible, .nxpb-how summary:focus-visible { outline: 2px solid var(--pb-sig); outline-offset: 2px; }
.nxpb-how { margin-block-start: 4px; color: var(--pb-t3); font-size: 12.5px; line-height: 1.5; }
.nxpb-how summary { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; cursor: pointer; list-style: none; font-weight: 700; }
.nxpb-how summary::-webkit-details-marker { display: none; }
.nxpb-how summary:hover { color: var(--nx-text, #f2f4f6); }
.nxpb-how p { margin: 0 0 4px; color: var(--pb-t2); }
@container (min-width: 440px) { .nxpb-actions { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .nxpb-add, .nxpb-go { transition: none; } }

/* 2026-11-02 Customize: the panel under the actions. Tap targets >= 44px, logical properties, green + black. */
.nxpb-actions .nxpb-cust { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 8px 16px; border-radius: 12px; border: 1px dashed rgba(69, 248, 130, .5); background: transparent; color: var(--pb-sig); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; grid-column: 1 / -1; }
.nxpb-actions .nxpb-cust[hidden], .nxpb-edit[hidden] { display: none; }
.nxpb-cust:hover, .nxpb-cust[aria-expanded="true"] { background: rgba(69, 248, 130, .08); }
.nxpb-edit { margin-block-start: 12px; padding: 12px; border: 1px solid var(--pb-line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.nxpb-edit-hint { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--pb-t2); }
.nxpb-ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.nxpb-ladder li { padding: 4px 8px; border-radius: 999px; background: rgba(69, 248, 130, .1); color: var(--pb-sig); font-size: 11.5px; font-weight: 700; }
.nxpb-grp { margin: 0 0 8px; padding: 0; border: 0; min-inline-size: 0; }
.nxpb-grp legend { padding: 0; margin-block-end: 4px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--pb-t3); }
.nxpb-opt { display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-block-size: 56px; padding: 8px; border: 1px solid var(--pb-line); border-radius: 10px; cursor: pointer; }
.nxpb-opt + .nxpb-opt { margin-block-start: 4px; }
.nxpb-opt:has(input:checked) { border-color: rgba(69, 248, 130, .55); background: rgba(69, 248, 130, .06); }
.nxpb-opt:has(input:disabled:not(:checked)) { opacity: .5; cursor: not-allowed; }
.nxpb-opt input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--pb-sig); }
.nxpb-opt .nxpb-art { inline-size: 40px; block-size: 40px; }
.nxpb-opt .nxpb-name { font-size: 13px; }
.nxpb-opt .nxpb-amt { font-size: 13px; }
.nxpb-opt:focus-within { outline: 2px solid var(--pb-sig); outline-offset: 2px; }
.nxpb-msg { min-block-size: 20px; margin: 4px 0 8px; font-size: 13px; line-height: 1.4; color: var(--pb-sig); }
.nxpb-edit-actions { display: flex; gap: 8px; }
.nxpb-reset, .nxpb-done { flex: 1; min-block-size: 44px; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nxpb-reset { border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--nx-text, #f2f4f6); }
.nxpb-done { border: 0; background: var(--pb-sig); color: #07120b; font-weight: 800; }
.nxpb.is-nodisc .nxpb-disc, .nxpb.is-nodisc .nxpb-go, .nxpb.is-nodisc .nxpb-save { display: none; }