/* ARC Raiders Blueprint Hub picker (2026-10-08). Layered over the WCPA checkbox groups. */

html body.dm-blueprint-hub .dm-product-buy-card .wcpa_form_outer .wcpa_row .wcpa_field_wrap[data-dm-bph-hidden],
html body.dm-blueprint-hub .dm-product-buy-card .wcpa_field_wrap[data-dm-bph-hidden] { display: none !important; }
/* every checkbox group is hidden from the first paint (no accordion flash); the script re-shows add-ons */
html body.dm-blueprint-hub .dm-product-buy-card .wcpa_form_outer .wcpa_row .wcpa_field_wrap.wcpa_type_checkbox-group:not([data-dm-bph-keep]),
html body.dm-blueprint-hub .dm-product-buy-card .wcpa_field_wrap.wcpa_type_checkbox-group:not([data-dm-bph-keep]) { display: none !important; }
html body.dm-blueprint-hub .dm-product-buy-card .wcpa_form_outer .wcpa_row:has(.wcpa_type_checkbox-group):not(:has(.wcpa_field_wrap:not(.wcpa_type_checkbox-group), .wcpa_type_checkbox-group[data-dm-bph-keep], .dm-bph-summary, .dm-bph)) { display: none !important; }
/* a row whose every field is hidden must not keep its gap */
html body.dm-blueprint-hub .dm-product-buy-card .wcpa_form_outer .wcpa_row:has(.wcpa_field_wrap[data-dm-bph-hidden]):not(:has(.wcpa_field_wrap:not([data-dm-bph-hidden]))):not(:has(.dm-bph-summary, .dm-bph)) { display: none !important; }

/* ---------- picker ---------- */
.dm-bph { --bph-card: #0e1015; --bph-card-2: #13161d; --bph-line: rgba(255,255,255,.08); --bph-line-2: rgba(255,255,255,.16);
  --bph-text: #e9ebef; --bph-muted: #8b919b; --bph-dim: #5c626b; --bph-red: #ef202c; --bph-green: #4ecb8a; --bph-gold: #f5a623; --bph-blue: #2bb8da;
  color: var(--bph-text); font-family: var(--font-primary, 'Inter', sans-serif); margin: 8px 0 28px; min-width: 0; }
.dm-bph * { box-sizing: border-box; }
.dm-bph :is(h2, h3, .dm-bph__tab, .dm-bph__tile-price, .dm-bph__bundle-price, .dm-bph__bundle-name) { font-family: var(--font-heading, 'Outfit', 'Inter', sans-serif); }
.dm-bph__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dm-bph__head h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; margin: 0 0 4px; color: #fff; font-weight: 800; letter-spacing: -.01em; }
.dm-bph__head p { margin: 0; color: var(--bph-muted); font-size: 14.5px; }
.dm-bph__meta { font-size: 13px; color: var(--bph-dim); font-weight: 600; white-space: nowrap; }

.dm-bph__toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; padding: 4px 0; }
.dm-bph__search { position: relative; }
.dm-bph__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--bph-dim); pointer-events: none; }
.dm-bph__search input { width: 100%; min-height: 46px; padding: 0 44px 0 42px; border-radius: 12px; border: 1px solid var(--bph-line-2); background: var(--bph-card); color: #fff; font: inherit; font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; }
.dm-bph__search input::placeholder { color: var(--bph-dim); }
.dm-bph__search input:focus { border-color: rgba(239,32,44,.6); box-shadow: 0 0 0 3px rgba(239,32,44,.15); }
.dm-bph__search input::-webkit-search-cancel-button { display: none; }
.dm-bph__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--bph-muted); cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.dm-bph__search.has-value .dm-bph__clear { display: inline-flex; }
.dm-bph__clear:hover { background: rgba(255,255,255,.06); color: #fff; }

.dm-bph__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.dm-bph__tabs::-webkit-scrollbar { display: none; }
.dm-bph__tab { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--bph-line-2); background: rgba(255,255,255,.03); color: #d5d9df; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.dm-bph__tab:hover { background: rgba(255,255,255,.07); color: #fff; }
.dm-bph__tab[aria-selected="true"] { background: #fff; border-color: #fff; color: #0b0d12; }
.dm-bph__tab-count { font-size: 11.5px; font-weight: 700; color: var(--bph-dim); }
.dm-bph__tab[aria-selected="true"] .dm-bph__tab-count { color: #5c626b; }
.dm-bph__tab-badge { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bph-red); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.dm-bph__tab.has-picked .dm-bph__tab-badge { display: inline-block; }

.dm-bph__panel { margin-bottom: 22px; }
.dm-bph__panel[hidden] { display: none; }
.dm-bph__panel-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.dm-bph__panel-head h3 { font-size: 16px; margin: 0; color: #fff; font-weight: 800; }
.dm-bph__panel-head span { font-size: 12.5px; color: var(--bph-dim); font-weight: 600; }
.dm-bph.is-filtered .dm-bph__panel-head, .dm-bph.is-single .dm-bph__panel-head { display: flex; }

/* bundle row */
.dm-bph__bundle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; border: 1px solid rgba(245,166,35,.35); background: linear-gradient(90deg, rgba(245,166,35,.10), rgba(245,166,35,.03)); cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; transition: border-color .15s, background .15s; }
.dm-bph__bundle:hover { border-color: rgba(245,166,35,.6); }
.dm-bph__bundle[aria-pressed="true"] { border-color: var(--bph-green); background: linear-gradient(90deg, rgba(78,203,138,.14), rgba(78,203,138,.04)); }
.dm-bph__bundle-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(245,166,35,.7); display: inline-flex; align-items: center; justify-content: center; color: #0b0d12; font-size: 13px; font-weight: 900; background: transparent; }
.dm-bph__bundle[aria-pressed="true"] .dm-bph__bundle-check { background: var(--bph-green); border-color: var(--bph-green); }
.dm-bph__bundle[aria-pressed="true"] .dm-bph__bundle-check::before { content: "\2713"; }
.dm-bph__bundle-name { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.dm-bph__bundle-sub { display: block; font-size: 12.5px; color: var(--bph-muted); margin-top: 2px; }
.dm-bph__bundle-save { color: var(--bph-gold); font-weight: 700; }
.dm-bph__bundle-price { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.dm-bph__bundle[aria-pressed="true"] .dm-bph__bundle-price { color: var(--bph-green); }

/* tiles */
.dm-bph__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; }
.dm-bph__tile { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 9px 12px 9px 40px; border-radius: 12px; border: 1px solid var(--bph-line-2); background: var(--bph-card); color: var(--bph-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.dm-bph__tile::before { content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 6px; border: 2px solid rgba(255,255,255,.28); background: transparent; transition: background .12s, border-color .12s; }
.dm-bph__tile::after { content: ""; position: absolute; left: 18px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.dm-bph__tile:hover { border-color: rgba(255,255,255,.3); background: var(--bph-card-2); }
.dm-bph__tile[aria-pressed="true"] { border-color: var(--bph-red); background: rgba(239,32,44,.10); }
.dm-bph__tile[aria-pressed="true"]::before { background: var(--bph-red); border-color: var(--bph-red); }
.dm-bph__tile[aria-pressed="true"]::after { opacity: 1; }
.dm-bph__tile.is-included { border-color: rgba(78,203,138,.4); background: rgba(78,203,138,.06); color: var(--bph-muted); cursor: default; }
.dm-bph__tile.is-included::before { background: var(--bph-green); border-color: var(--bph-green); }
.dm-bph__tile.is-included::after { opacity: 1; border-color: #0b0d12; }
.dm-bph__tile.is-included .dm-bph__tile-price { color: var(--bph-green); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.dm-bph__tile[hidden] { display: none; }
.dm-bph__tile-name { font-size: 14px; font-weight: 600; line-height: 1.25; min-width: 0; }
.dm-bph__tile-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(43,184,218,.15); color: var(--bph-blue); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.dm-bph__tile-cat { display: block; font-size: 11px; color: var(--bph-dim); font-weight: 600; margin-top: 1px; }
.dm-bph.is-single .dm-bph__tile-cat { display: none; }
.dm-bph__tile-price { font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; }

.dm-bph__empty { padding: 26px 16px; text-align: center; color: var(--bph-muted); border: 1px dashed var(--bph-line-2); border-radius: 14px; font-size: 14px; }
.dm-bph__empty[hidden] { display: none; }

/* loading shell */
.dm-bph--loading { min-height: 560px; }
.dm-bph__tab--ghost { height: 36px; border-color: var(--bph-line); background: rgba(255,255,255,.04); }
.dm-bph__grid--ghost .dm-bph__tile--ghost { min-height: 52px; border-color: var(--bph-line); background: var(--bph-card); animation: dm-bph-pulse 1.4s ease-in-out infinite; }
.dm-bph__grid--ghost .dm-bph__tile--ghost::before, .dm-bph__grid--ghost .dm-bph__tile--ghost::after { display: none; }
@keyframes dm-bph-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- summary inside the buy card ---------- */
.dm-bph-summary { margin: 4px 0 14px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); font-family: var(--font-primary, 'Inter', sans-serif); }
.dm-bph-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dm-bph-summary__title { font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.dm-bph-summary__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-primary, #ef202c); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center; font-weight: 800; }
.dm-bph-summary__clear { border: 0; background: transparent; color: #8b919b; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dm-bph-summary__clear:hover { color: #fff; background: rgba(255,255,255,.06); }
.dm-bph-summary__clear[hidden] { display: none; }
.dm-bph-summary__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
.dm-bph-summary__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: #0e1015; border: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.dm-bph-summary__item--bundle { border-color: rgba(78,203,138,.35); background: rgba(78,203,138,.07); }
.dm-bph-summary__item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9ebef; font-weight: 600; }
.dm-bph-summary__item-name small { color: #8b919b; font-weight: 500; margin-left: 5px; }
.dm-bph-summary__item-price { color: #fff; font-weight: 800; font-family: var(--font-heading, 'Outfit', sans-serif); }
.dm-bph-summary__remove { width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: #8b919b; font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dm-bph-summary__remove:hover { background: rgba(239,32,44,.18); color: #fff; }
.dm-bph-summary__empty { margin: 0; padding: 12px 10px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.14); color: #8b919b; font-size: 13.5px; line-height: 1.45; }
.dm-bph-summary__empty a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.dm-bph-summary__empty[hidden] { display: none; }
.dm-bph-summary__nudge { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.35); font-size: 13px; line-height: 1.45; color: #e9ebef; }
.dm-bph-summary__nudge[hidden] { display: none; }
.dm-bph-summary__nudge strong { color: #f5a623; }
.dm-bph-summary__nudge button { display: inline-block; margin-top: 7px; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: #f5a623; color: #0b0d12; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.dm-bph-summary__nudge button:hover { background: #ffb84a; }
.dm-bph-summary__sub { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #8b919b; font-weight: 600; }
.dm-bph-summary__sub strong { color: #fff; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 14px; }
.dm-bph-summary__sub[hidden] { display: none; }

/* ---------- placement ---------- */
/* Desktop: the picker is a grid item of .dm-product-layout, under the gallery + overview row and
   spanning both of their columns; the sticky buy card stays beside it. */
@media (min-width: 1025px) {
  html body.dm-blueprint-hub.single-product .dm-product-layout > .dm-bph { padding: 20px 22px 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); min-width: 0; width: 100%; margin: 0; }
  .dm-bph__toolbar { grid-template-columns: minmax(0, 1fr); background: transparent; position: static; }
  html body.dm-blueprint-hub.single-product .dm-product-description-band { grid-row: 3 !important; }
}
@media (min-width: 1200px) {
  /* reserve the picker row before any script runs, so nothing below it jumps when the picker mounts */
  html body.dm-blueprint-hub.single-product .dm-product-layout::after { content: ""; display: block; grid-column: 1 / 3; grid-row: 2; min-height: 560px; pointer-events: none; }
  html body.dm-blueprint-hub.single-product .dm-product-layout > .dm-bph { grid-column: 1 / 3 !important; grid-row: 2 !important; }
  html body.dm-blueprint-hub.single-product .dm-product-purchase-column { grid-row: 1 / span 3 !important; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  html body.dm-blueprint-hub.single-product .dm-product-layout::after { content: ""; display: block; grid-column: 1; grid-row: 2; min-height: 560px; pointer-events: none; }
  html body.dm-blueprint-hub.single-product .dm-product-layout > .dm-bph { grid-column: 1 !important; grid-row: 2 !important; }
  html body.dm-blueprint-hub.single-product .dm-product-sidebar { grid-row: 1 / span 3 !important; }
}
/* Phone / tablet: the picker lives inside the buy card between the platform tiles and the summary. */
@media (max-width: 1024px) {
  body.dm-blueprint-hub .dm-product-buy-card .dm-bph { margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dm-bph--loading { min-height: 420px; }
  .dm-bph__head h2 { font-size: 19px; }
  .dm-bph__head p { font-size: 13.5px; }
  .dm-bph__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .dm-bph__tile { min-height: 50px; padding: 8px 9px 8px 34px; border-radius: 10px; }
  .dm-bph__tile::before { left: 9px; }
  .dm-bph__tile::after { left: 15px; }
  .dm-bph__tile-name { font-size: 13px; }
  .dm-bph__tile-price { font-size: 13px; }
  .dm-bph__panel-grid--long { max-height: 420px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
  .dm-bph__bundle { padding: 10px 12px; gap: 10px; }
  .dm-bph__bundle-name { font-size: 14px; }
}
@media (max-width: 420px) {
  .dm-bph__grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dm-bph__tile { min-height: 44px; padding: 6px 10px 6px 34px; }
  .dm-bph__tile-cat { display: none; }
  .dm-bph__tile-name { font-size: 13.5px; }
}

/* ---------- server-rendered catalogue (long description) ---------- */
.dm-bph-catalogue { margin: 6px 0 10px; }
.dm-bph-catalogue__intro { color: #aeb4bf; }
.dm-bph-catalogue__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 28px; }
.dm-bph-catalogue__cat h3 { font-size: 17px; margin: 0 0 6px; color: #fff; }
.dm-bph-catalogue__cat h3 span { color: #8b919b; font-weight: 600; font-size: 13px; }
.dm-bph-catalogue__bundle { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.3); font-size: 14px; color: #e9ebef; }
.dm-bph-catalogue__bundle em { color: #8b919b; font-style: normal; font-size: 12.5px; }
.dm-bph-catalogue__list { list-style: none; margin: 0 0 4px; padding: 0; }
.dm-bph-catalogue__list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; color: #d5d9df; }
.dm-bph-catalogue__list li b { color: #fff; font-weight: 700; white-space: nowrap; }
.dm-bph-catalogue__list li small { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(43,184,218,.15); color: #2bb8da; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dm-bph-catalogue__cat--addons { margin-top: 18px; max-width: 520px; }

/* ---------- quantity steppers ---------- */
.dm-bph__tile { flex-wrap: wrap; }
.dm-bph__qty { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); }
.dm-bph__qty[hidden] { display: none; }
.dm-bph__qty-btn { width: 26px; height: 26px; border: 0; background: transparent; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; border-radius: 6px; padding: 0; }
.dm-bph__qty-btn:hover { background: rgba(255,255,255,.1); }
.dm-bph__qty-n { min-width: 18px; text-align: center; font-size: 13px; font-weight: 800; color: #fff; font-family: var(--font-heading, 'Outfit', sans-serif); }
/* a selected tile with a stepper always uses two rows (name / stepper + price), so the height never
   changes as the price string grows from $5.00 to $20.00 */
.dm-bph__tile[aria-pressed="true"]:has(.dm-bph__qty:not([hidden])) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "qty price"; align-items: center; row-gap: 7px; column-gap: 8px; }
.dm-bph__tile[aria-pressed="true"]:has(.dm-bph__qty:not([hidden])) .dm-bph__tile-name { grid-area: name; }
.dm-bph__tile[aria-pressed="true"]:has(.dm-bph__qty:not([hidden])) .dm-bph__qty { grid-area: qty; margin: 0; }
.dm-bph__tile[aria-pressed="true"]:has(.dm-bph__qty:not([hidden])) .dm-bph__tile-price { grid-area: price; text-align: right; }
.dm-bph-summary__item--qty { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.dm-bph-summary__qty { display: inline-flex; align-items: center; gap: 1px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.dm-bph-summary__qty b { min-width: 18px; text-align: center; font-size: 12px; color: #fff; }
.dm-bph-summary__qty-btn { width: 22px; height: 22px; border: 0; background: transparent; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; border-radius: 5px; padding: 0; }
.dm-bph-summary__qty-btn:hover { background: rgba(255,255,255,.1); }
@media (max-width: 1024px) {
  .dm-bph__qty-btn { width: 28px; height: 28px; }
}

/* ---------- "New" items (Frozen Trail etc.), list comes from product meta ---------- */
.dm-bph__tile-tag--new { background: rgba(245,166,35,.18); color: #f5a623; }
.dm-bph__tab--new { border-color: rgba(245,166,35,.45); color: #f5a623; }
.dm-bph__tab--new[aria-selected="true"] { background: #f5a623; border-color: #f5a623; color: #0b0d12; }
.dm-bph__tab--new .dm-bph__tab-count { color: rgba(245,166,35,.75); }
.dm-bph__tab--new[aria-selected="true"] .dm-bph__tab-count { color: rgba(11,13,18,.6); }
.dm-bph-catalogue__list li small.dm-bph-catalogue__new { background: rgba(245,166,35,.18); color: #f5a623; }

/* hidden bundle rows must stay hidden despite display:grid; unselected tiles keep name + price on one line */
.dm-bph__bundle[hidden] { display: none !important; }
.dm-bph__tile { flex-wrap: nowrap; }
.dm-bph__tile .dm-bph__tile-name { flex: 1 1 auto; min-width: 0; }
.dm-bph__tile .dm-bph__tile-price { flex: 0 0 auto; }