/* Build a bundle (2026-10-14; guided 3-step builder 2026-10-22): 1 choose gifts (tiles), 2 live summary (sticky card on desktop, a bottom
   bar on phones), 3 pay. Every number in the summary comes from POST /api/store/bundle/quote; this file only lays it out.
   Same visual language as the "Complete your bundle" card on a gift product page (product-bundle.css). Logical properties only. */
.nxwb { --wb-sig: var(--nx-signal, #45f882); --wb-line: rgba(255, 255, 255, .08); --wb-t2: rgba(255, 255, 255, .72); --wb-t3: rgba(255, 255, 255, .6); }
.nxwb [hidden] { display: none !important; }
.nxwb .nx-i { inline-size: 16px; block-size: 16px; flex: none; }

/* Tabs: on phones the three gift types share one row and Build a bundle takes its own full row, so nothing wraps into a stair. */
.nxwg-tabs:has(.nxwg-tab--bundle) .nxwg-tab--bundle { flex-basis: 100%; }
.nxwg-tab--bundle { box-shadow: inset 0 0 0 1px rgba(69, 248, 130, .28); }
.nxwg-tab--bundle small { white-space: nowrap; background: rgba(69, 248, 130, .16); color: var(--nx-signal, #45f882); }
.nxwg-tab--bundle.is-active { box-shadow: none; }
.nxwg-tab--bundle.is-active small { background: rgba(7, 18, 11, .16); color: #07120b; }
@media (min-width: 760px) { .nxwg-tabs:has(.nxwg-tab--bundle) .nxwg-tab--bundle { flex: 1.35 1 0; } }

/* Intro: one short sentence and the owner's tier ladder (2 gifts 5% / 3 gifts 7% / 4+ gifts 10%), lit by the server's quote. */
.nxwb-intro { margin-block-end: 24px; }
.nxwb-lead { margin: 0 0 12px; color: var(--wb-t2); font-size: 15px; line-height: 1.5; }
.nxwb-ladder { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nxwb-ladder li { display: inline-flex; align-items: baseline; gap: 8px; min-block-size: 36px; padding: 8px 12px; border: 1px solid var(--wb-line); border-radius: 999px; color: var(--wb-t3); font-size: 13px; font-weight: 700; }
.nxwb-ladder b { color: #fff; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.nxwb-ladder li.is-reached { border-color: rgba(69, 248, 130, .35); }
.nxwb-ladder li.is-on { border-color: var(--wb-sig); background: rgba(69, 248, 130, .12); color: #fff; }
.nxwb-ladder li.is-on b { color: var(--wb-sig); }

.nxwb-step { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #fff; font-size: 16px; font-weight: 800; }
.nxwb-step-n { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 8px; background: rgba(69, 248, 130, .14); color: var(--wb-sig); font-size: 13px; font-weight: 900; }

/* Step 1: gift tiles. A tile is a toggle button (aria-pressed) with the gift's own art, name, price and a check mark. */
.nxwb-group { margin: 0 0 16px; padding: 0; border: 0; min-inline-size: 0; }
.nxwb-group legend { margin-block-end: 8px; padding: 0; color: var(--wb-t3); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nxwb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.nxwb-chip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: center; gap: 8px; min-block-size: 68px; padding: 12px; border: 1px solid var(--wb-line); border-radius: 12px; background: rgba(255, 255, 255, .025); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.nxwb-chip:hover { border-color: rgba(69, 248, 130, .4); }
.nxwb-chip.is-on, .nxwb-chip[aria-pressed="true"] { border-color: var(--wb-sig); background: rgba(69, 248, 130, .08); }
.nxwb-chip-art { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .05); color: var(--wb-sig); }
.nxwb-chip-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nxwb-chip-art .nx-i { inline-size: 22px; block-size: 22px; }
.nxwb-chip-copy { display: grid; gap: 2px; min-inline-size: 0; }
.nxwb-chip-name { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.nxwb-chip b { color: var(--wb-t2); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nxwb-chip b small { display: block; color: var(--wb-t3); font-size: 11px; font-weight: 600; }
.nxwb-chip-check { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 999px; color: transparent; }
.nxwb-chip-check .nx-i { inline-size: 12px; block-size: 12px; }
.nxwb-chip[aria-pressed="true"] .nxwb-chip-check { border-color: var(--wb-sig); background: var(--wb-sig); color: #07120b; }
.nxwb-qty { display: flex; align-items: center; gap: 8px; }
.nxwb-qty .nxwg-step { inline-size: 44px; flex: none; }
.nxwb-qty input { inline-size: 100%; min-inline-size: 0; min-block-size: 44px; border: 1px solid var(--wb-line); border-radius: 10px; background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.nxwb-chip:focus-visible, .nxwb-method input:focus-visible, .nxwb-qty input:focus-visible, .nxwb-cart:focus-visible, .nxwb-how summary:focus-visible, .nxwb-sum:focus-visible { outline: 2px solid var(--wb-sig); outline-offset: 2px; }

/* Step 2 + 3: the summary card. */
.nxwb-sum { scroll-margin-block-start: 88px; margin-block-start: 8px; padding: 16px; border: 1px solid rgba(69, 248, 130, .2); border-radius: 16px; background: var(--nx-surface, #121E18); }
.nxwb-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nxwb-save { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: rgba(69, 248, 130, .14); color: var(--wb-sig); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nxwb-empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 12px; color: var(--wb-t2); font-size: 14px; line-height: 1.45; }
.nxwb-empty .nx-i { inline-size: 24px; block-size: 24px; color: var(--wb-sig); }
.nxwb-lines { margin: 0; padding: 0; list-style: none; border: 1px solid var(--wb-line); border-radius: 12px; }
.nxwb-lines li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; font-size: 14px; }
.nxwb-lines li + li { border-block-start: 1px solid var(--wb-line); }
.nxwb-line-art { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .05); color: var(--wb-sig); }
.nxwb-line-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nxwb-line-name { min-inline-size: 0; font-weight: 700; overflow-wrap: anywhere; }
.nxwb-line-name small { color: var(--wb-t3); font-weight: 700; font-variant-numeric: tabular-nums; }
.nxwb-lines b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nxwb-totals { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px; border-radius: 12px; background: rgba(69, 248, 130, .06); font-variant-numeric: tabular-nums; }
.nxwb-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nxwb-totals dt, .nxwb-totals dd { margin: 0; }
.nxwb-sub { color: var(--wb-t3); font-size: 13px; }
.nxwb-disc { color: var(--wb-sig); font-size: 13px; font-weight: 700; }
.nxwb-grand { margin-block-start: 4px; padding-block-start: 8px; border-block-start: 1px solid rgba(69, 248, 130, .18); }
.nxwb-grand dt { font-size: 14px; font-weight: 800; }
.nxwb-grand dd { font-size: 24px; line-height: 1.1; font-weight: 900; }
.nxwb-hint { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 198, 66, .08); color: #ffc642; font-size: 13px; font-weight: 700; }
.nxwb-err { margin: 12px 0 0; color: #ff8a8a; font-size: 14px; }
.nxwb-step--pay { margin-block-start: 24px; }
.nxwb-actions { display: grid; gap: 8px; }
.nxwb-actions .nxwg-btn { min-block-size: 48px; font-size: 15px; }
.nxwb-cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding-inline: 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nxwb-cart:hover:not(:disabled) { border-color: var(--wb-sig); background: rgba(69, 248, 130, .06); }
.nxwb-actions :disabled, .nxwb-pay .nxwg-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.nxwb-pay { margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--wb-line); }
.nxwb-pay h5 { margin: 0 0 8px; color: #fff; font-size: 14px; }
.nxwb-methods { display: grid; gap: 8px; color: var(--wb-t2); font-size: 14px; }
.nxwb-method { display: flex; align-items: center; gap: 12px; min-block-size: 48px; padding: 8px 12px; border: 1px solid var(--wb-line); border-radius: 10px; color: #fff; font-weight: 700; cursor: pointer; }
.nxwb-method:has(input:checked) { border-color: var(--wb-sig); background: rgba(69, 248, 130, .08); }
.nxwb-method input { inline-size: 18px; block-size: 18px; accent-color: var(--wb-sig); }
/* 2026-11-05: the same method rows as the cart checkout (cart-checkout.css .nxcc-method): mark, name, radio at the end */
.nxwb-method { min-block-size: 60px; transition: border-color 160ms ease, background-color 160ms ease; }
.nxwb-method input[type="radio"] { display: inline-block; visibility: visible; opacity: 1; inline-size: 20px; block-size: 20px; margin: 0; flex: none; order: 3; }
.nxwb-method:has(input:checked) { box-shadow: inset 0 0 0 1px var(--wb-sig); }
.nxwb-mark { inline-size: 36px; block-size: 36px; border-radius: 8px; object-fit: contain; flex: none; }
.nxwb-method-name { flex: 1 1 auto; min-inline-size: 0; }
@media (prefers-reduced-motion: reduce) { .nxwb-method { transition: none; } }
.nxwb-how { margin-block-start: 8px; color: var(--wb-t3); font-size: 12.5px; line-height: 1.5; }
.nxwb-how summary { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; cursor: pointer; list-style: none; font-weight: 700; }
.nxwb-how summary::-webkit-details-marker { display: none; }
.nxwb-how summary:hover { color: #fff; }
.nxwb-how p { margin: 0 0 4px; color: var(--wb-t2); }

/* Phones: a bottom bar keeps the bundle in reach while the buyer scrolls the tiles; it hides once the summary card is on screen. */
.nxwb-bar { position: fixed; z-index: 60; inset-inline: 12px; inset-block-end: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; padding-inline-start: 16px; border: 1px solid rgba(69, 248, 130, .3); border-radius: 14px; background: rgba(12,21,17,.97); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.nxwb-bar-copy { display: grid; min-inline-size: 0; }
.nxwb-bar-copy b { color: #fff; font-size: 14px; }
.nxwb-bar-n { color: var(--wb-sig); font-variant-numeric: tabular-nums; }
.nxwb-bar-total { overflow: hidden; color: var(--wb-t2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.nxwb-bar .nxwg-btn { flex: none; padding-inline: 16px; }
body.nxwb-has-bar { padding-block-end: 88px; }
body.nxwb-has-bar :is(.nxsup-loader, .nxsup-launcher) { transform: translateY(-76px); } /* the support button sits above the bar, never on its button */

@media (min-width: 640px) { .nxwb-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nxwb-chip { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-inline-end: 32px; } .nxwb-chips--keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .nxwb { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 0 32px; align-items: start; }
  .nxwb-intro { grid-column: 1 / -1; }
  .nxwb-pick { grid-column: 1; }
  .nxwb-sum { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: 96px; margin-block-start: 0; padding: 20px; }
  .nxwb-bar { display: none !important; }
  body.nxwb-has-bar { padding-block-end: 0; }
}
@media (prefers-reduced-motion: reduce) { .nxwb-chip { transition: none; } }

/* K/DA HEATBRINGER event block (2026-11-04). Prices are printed by gifts.php from the product rows; this file only lays them out. */
.nxwk { --nxwg-accent: var(--nx-signal, #45f882); margin-block: 0 24px; padding: 20px; border: 1px solid rgba(69, 248, 130, .32); border-radius: 16px; background: linear-gradient(135deg, rgba(69, 248, 130, .09), rgba(255, 255, 255, .02)); }
.nxwk-head { display: grid; gap: 6px; margin-block-end: 14px; }
.nxwk-head h3 { margin: 0; font-size: clamp(20px, 3vw, 26px); line-height: 1.2; }
.nxwk-head p { margin: 0; color: rgba(255, 255, 255, .72); }
.nxwk-tag { justify-self: start; padding: 2px 10px; border-radius: 999px; background: rgba(69, 248, 130, .16); color: var(--nx-signal, #45f882); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nxwk-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.nxwk-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(0, 0, 0, .28); }
.nxwk-name { font-weight: 700; overflow-wrap: anywhere; }
.nxwk-list .nxwg-btn { grid-column: 1 / -1; }
.nxwk-rule { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; }
.nxwk-rule span { padding: 4px 12px; border-radius: 999px; background: rgba(69, 248, 130, .12); }
.nxwk-pack { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding-block-start: 14px; border-block-start: 1px solid rgba(255, 255, 255, .1); }
.nxwk-pack-price { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 18px; }
.nxwk-pack-price b { color: var(--nx-signal, #45f882); font-size: 24px; }
.nxwk-pack-price s { color: rgba(255, 255, 255, .6); }
@media (max-width: 599px) { .nxwk { padding: 16px; } .nxwk-pack-btn { inline-size: 100%; } }