/* Builder page, layout "A": numbered category list on the left, slim part cards in the middle, live build panel on the right.
   Loaded last on builder.php. "html body" in front of every selector so these win over the older builder rules; every font size
   carries !important because gaming-theme.css forces "* { font-size: 15px !important }". */

/* ---------- part cards (all screen sizes) ---------- */
html body .parts-grid .part-card { display: flex; flex-direction: column; gap: 0; padding: 0 !important; background: #0d0d0d !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #1f1f1f !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden; cursor: pointer; transition: border-color 0.2s !important; will-change: auto; }
html body .parts-grid .part-card::before { display: none !important; }
html body .parts-grid .part-card:hover { transform: none !important; background: #0d0d0d !important; border-color: #3a3a3a !important; box-shadow: none !important; }
html body .parts-grid .part-card.selected, html body .parts-grid .part-card.selected:hover { background: #0d0d0d !important; border-color: #d10000 !important; box-shadow: none !important; }
html body .parts-grid .part-card.incompatible:not(.auto-switchable) { opacity: 0.45; filter: none; border-color: #1f1f1f !important; }
html body .parts-grid .part-card.incompatible.auto-switchable { opacity: 1; border-style: solid; }
html body .part-card .pc-img { position: relative; display: flex; align-items: center; justify-content: center; height: 150px; background: #161616; }
html body .part-card .pc-img img.part-image { width: auto !important; height: auto !important; max-width: 80%; max-height: 80%; object-fit: contain; mix-blend-mode: var(--image-blend-mode, screen) !important; }
html body .part-card .pc-chip { position: absolute; top: 10px; left: 10px; padding: 4px 8px; background: #000; border-radius: 6px; color: #ffb020; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em; line-height: 1.2; max-width: calc(100% - 112px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .part-card .pc-chip.is-sel { color: #ff5252; }
html body .part-card .pc-chip.is-fit { color: #3ddc84; }
html body .part-card .pc-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 12px 14px 14px; }
html body .part-card .part-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 36px; min-height: 0; margin: 0 !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 500 !important; text-align: left; color: #fff; }
html body .part-card .pc-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px !important; font-weight: 400 !important; color: #a8a8a8; }
html body .part-card .pc-meta span { font-size: 12px !important; font-weight: 400 !important; }
html body .part-card .pc-foot { display: flex !important; align-items: center; justify-content: space-between !important; gap: 8px; width: 100%; margin-top: auto; padding-top: 6px; }
html body .part-card .part-price { display: flex; align-items: baseline; gap: 5px; margin: 0; color: #fff !important; text-shadow: none !important; font-size: 18px !important; font-weight: 700 !important; white-space: nowrap; }
html body .part-card .part-price span { color: #fff !important; font-size: 18px !important; font-weight: 700 !important; opacity: 1; }
html body .part-card .compact-actions { display: flex !important; align-items: center; justify-content: flex-end; flex: 0 0 auto !important; width: auto !important; gap: 6px; margin: 0 0 0 auto !important; }
html body .part-card .pc-select { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #000; border: 1px solid #3a3a3a; border-radius: 10px !important; color: #fff; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
html body .part-card .pc-select i { font-size: 12px !important; }
html body .part-card .pc-select:hover { border-color: #fff; }
html body .part-card .pc-select.is-selected { background: #d10000; border-color: #d10000; }
html body .part-card .pc-select:disabled { opacity: 0.4; cursor: not-allowed; }
html body .part-card .pc-view { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; background: #000; border: 1px solid #2a2a2a; border-radius: 8px !important; color: #d6d6d6; font-size: 12px !important; font-weight: 500 !important; line-height: 1; cursor: pointer; }
html body .part-card .pc-view:hover { border-color: #fff; color: #fff; }
html body .part-card .pc-qty { display: inline-flex; align-items: center; height: 36px; background: #000; border: 1px solid #d10000; border-radius: 10px !important; overflow: hidden; }
html body .part-card .pc-qty button { width: 32px; height: 100%; background: transparent; border: 0; color: #fff; font-size: 16px !important; cursor: pointer; }
html body .part-card .pc-qty span { min-width: 26px; text-align: center; color: #fff; font-size: 14px !important; font-weight: 700 !important; }
html body .part-card .incompatibility-reason { display: block; margin-top: 2px; font-size: 11px !important; line-height: 1.35; color: #ffb020; }


/* ---------- build panel contents (desktop panel and phone sheet) ---------- */
html body #build-panel .bp-head { display: flex; align-items: baseline; justify-content: space-between; }
html body #build-panel .bp-title { font-size: 22px !important; font-weight: 700 !important; color: #fff; }
html body #build-panel .bp-count { font-size: 13px !important; font-weight: 400 !important; color: #c9c9c9; }
html body #build-panel .bp-bar { height: 4px; margin-top: 12px; background: #2a2a2a; border-radius: 2px; }
html body #build-panel .bp-bar-fill { height: 4px; background: #d10000; border-radius: 2px; transition: width 0.3s; }
html body #build-panel .bp-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
html body #build-panel .bp-row { display: flex; align-items: center; gap: 12px; }
html body #build-panel .bp-thumb { flex: 0 0 38px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #161616; border-radius: 8px !important; }
html body #build-panel .bp-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
html body #build-panel .bp-info { flex: 1; min-width: 0; }
html body #build-panel .bp-cat { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em; color: #ff5252; }
html body #build-panel .bp-name { font-size: 13px !important; font-weight: 400 !important; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #build-panel .bp-side { text-align: right; }
html body #build-panel .bp-price { font-size: 13px !important; font-weight: 700 !important; color: #fff; }
html body #build-panel .bp-swap { padding: 0; background: none; border: 0; color: #a8a8a8; font-size: 11px !important; font-weight: 400 !important; text-decoration: underline; cursor: pointer; }
html body #build-panel .bp-swap:hover { color: #fff; }
html body #build-panel .bp-empty { padding: 8px 0; font-size: 13px !important; line-height: 1.5; color: #a8a8a8; }
html body #build-panel .bp-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid #2a2a2a; }
html body #build-panel .bp-total span { font-size: 14px !important; font-weight: 400 !important; color: #c9c9c9; }
html body #build-panel .bp-total strong { font-size: 28px !important; font-weight: 700 !important; color: #fff; }
html body #build-panel .bp-status { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px !important; line-height: 1.4; font-weight: 400 !important; color: #a8a8a8; }
html body #build-panel .bp-status i { margin-top: 2px; font-size: 12px !important; color: #7a7a7a; }
html body #build-panel .bp-status.is-done { color: #c9c9c9; }
html body #build-panel .bp-status.is-done i { color: #3ddc84; }
html body #build-panel .bp-cta { display: block; width: 100%; margin-top: 16px; padding: 14px; background: #d10000; border: 0; border-radius: 10px !important; color: #fff; font-size: 16px !important; font-weight: 700 !important; cursor: pointer; }
html body #build-panel .bp-cta:hover { background: #e60000; }
html body #build-panel .bp-cta.is-waiting { background: #2a2a2a; color: #a8a8a8; }
html body #build-panel .bp-hint { margin-top: 6px; text-align: center; font-size: 12px !important; color: #a8a8a8; }
html body #build-panel .bp-alt { display: block; width: 100%; margin-top: 10px; padding: 12px; background: transparent; border: 1px solid #3a3a3a; border-radius: 10px !important; color: #fff; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; }
html body #build-panel .bp-alt:hover { border-color: #fff; }
html body #build-panel .bp-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
html body #build-panel .bp-links button { padding: 0; background: none; border: 0; color: #c9c9c9; font-size: 13px !important; font-weight: 400 !important; cursor: pointer; }
html body #build-panel .bp-links button:hover { color: #ff5252; }

/* ---------- desktop layout ---------- */
html body.builder-page, html body.pc-builder-app.builder-page.dark-mode, html body.builder-page #main-builder-content { background: #000 !important; }
@media (min-width: 969px) {
    html body #category-sidebar::before { content: 'YOUR PARTS'; display: block; margin: 0 0 12px 15px; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; color: #ff5252; }
    html body .builder-container { grid-template-columns: 236px minmax(0, 1fr) 340px !important; gap: 28px !important; max-width: 1800px !important; padding: 22px 40px 60px !important; }
    html body #builder-quick-actions { display: none !important; }

    /* left: numbered category list */
    html body #category-sidebar { top: 72px !important; height: calc(100vh - 92px) !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
    html body #category-sidebar .sidebar-item { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px !important; margin: 0 0 6px !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; border-left: 3px solid transparent !important; border-radius: 4px 10px 10px 4px !important; box-shadow: none !important; transform: none !important; }
    html body #category-sidebar .sidebar-item:hover { background: #0d0d0d !important; }
    html body #category-sidebar .sidebar-item.active { background: #0d0d0d !important; border-left-color: #d10000 !important; box-shadow: none !important; }
    html body #category-sidebar .sb-num { flex: 0 0 22px; font-size: 12px !important; font-weight: 700 !important; color: #7a7a7a; }
    html body #category-sidebar .sidebar-item.active .sb-num { color: #ff5252; }
    html body #category-sidebar .sb-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
    html body #category-sidebar .sidebar-label { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none; color: #fff; }
    html body #category-sidebar .sb-sub { margin-top: 2px; font-size: 12px !important; font-weight: 400 !important; color: #a8a8a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html body #category-sidebar .sb-check { margin-left: auto; font-size: 13px !important; color: #ff5252 !important; }

    /* middle: title on the left, search and filter on the right */
    html body #builder-view .section-header-clean { margin: 0 0 20px; padding: 0; border: 0; }
    html body #builder-view .section-header-clean::after { display: none; }
    html body #builder-view .section-header-content-inline { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
    html body #builder-view .header-section-center { order: -1; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; text-align: left; }
    html body #builder-view .header-section-left { order: 1; flex: 0 0 auto; }
    html body #builder-view .header-section-right { order: 2; flex: 0 0 auto; }
    html body #builder-view .section-title { margin: 0 !important; font-size: 36px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -0.02em; text-transform: none !important; color: #fff !important; text-align: left; }
    html body #builder-view .section-path-info { margin: 0; padding: 0; border: 0; max-width: 100%; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0; text-transform: none !important; color: #a8a8a8 !important; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html body #builder-view .category-search-wrapper { min-width: 190px; max-width: 220px; }
    html body #builder-view .category-search-input { height: 40px; background: transparent !important; border: 1px solid #2a2a2a !important; border-radius: 10px !important; color: #fff; font-size: 14px !important; }
    html body #builder-view .filter-sort-trigger { height: 40px; padding: 0 14px; background: transparent !important; border: 1px solid #2a2a2a !important; border-radius: 10px !important; color: #d6d6d6; font-size: 14px !important; }
    html body #builder-view .filter-sort-trigger:hover { border-color: #fff; }
    html body .parts-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important; gap: 14px !important; }

    /* right: live build panel */
    html body #build-panel { position: sticky; top: 72px; box-sizing: border-box; max-height: calc(100vh - 92px); overflow-y: auto; padding: 22px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 16px !important; align-self: start; }
    /* Save / PDF / Share / Reset / Summary stay pinned to the bottom of the panel while the list of parts scrolls */
    html body #build-panel .bp-links { position: sticky; bottom: -22px; z-index: 2; margin: 14px -22px -22px; padding: 14px 22px 18px; background: #0d0d0d; border-top: 1px solid #1f1f1f; }
}

/* the grab handle and close button only exist on the phone sheet */
html body #build-panel .bp-grab, html body #build-panel .bp-close { display: none; }
html body .bp-mobilebar { display: none; }

/* ---------- phone / tablet ---------- */
@media (max-width: 968px) {
    /* the old bottom action bar and the floating bottom menu are replaced by the build bar */
    html body #mobile-action-bar, html body.builder-active #mobile-action-bar, html body #builder-quick-actions, html body.builder-page .mobile-bottom-nav { display: none !important; }
    html body.builder-page { padding-bottom: 104px !important; }
    html body.builder-page .chatbot-trigger { bottom: 96px; right: 12px; width: 46px; height: 46px; }
    html body.builder-page .chatbot-trigger i { font-size: 19px !important; }

    /* category chips: one swipeable row, numbered, ticked when chosen */
    html body #mobile-category-nav { counter-reset: mn; gap: 8px !important; padding: 10px 14px !important; background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; border-bottom: 1px solid #1c1c1c !important; box-shadow: none !important; }
    html body .mobile-nav-item { counter-increment: mn; flex-direction: row !important; align-items: center; gap: 8px !important; min-width: 0 !important; height: 40px; padding: 0 15px 0 12px !important; background: #0d0d0d !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #1f1f1f !important; border-radius: 999px !important; box-shadow: none !important; transform: none !important; }
    html body .mobile-nav-item::before { content: counter(mn); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50% !important; background: #161616; color: #a8a8a8; font-size: 11px !important; font-weight: 700 !important; }
    html body .mobile-nav-item .mobile-nav-icon { display: none !important; }
    html body .mobile-nav-label { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; white-space: nowrap; }
    html body .mobile-nav-label .nav-check-icon { font-size: 12px !important; color: #ff5252 !important; }
    html body .mobile-nav-item.completed:not(.active) { border-color: #3a0a0a !important; }
    html body .mobile-nav-item.active { background: #d10000 !important; border-color: #d10000 !important; box-shadow: none !important; }
    html body #mobile-category-nav .mobile-nav-item .mobile-nav-label { color: #fff !important; }
    html body #mobile-category-nav .mobile-nav-item.active .mobile-nav-label, html body #mobile-category-nav .mobile-nav-item.active .mobile-nav-label * { color: #fff !important; }
    html body .mobile-nav-item.active::before { background: rgba(0, 0, 0, 0.25); color: #fff; }
    html body .mobile-nav-item.active .mobile-nav-label .nav-check-icon { color: #fff !important; }

    /* category title, search and filter */
    html body #builder-view .section-header-clean { margin: 6px 0 14px; padding: 0; border: 0; }
    html body #builder-view .section-header-clean::after { display: none; }
    html body #builder-view .section-header-content-inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 10px; }
    html body #builder-view .header-section-center { order: -1; flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
    html body #builder-view .header-section-left { order: 1; flex: 1 1 0 !important; width: auto !important; min-width: 0; }
    html body #builder-view .header-section-right { order: 2; flex: 0 0 46px !important; width: 46px !important; }
    html body #builder-view .section-title { margin: 0 !important; font-size: 30px !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -0.02em; text-transform: none !important; color: #fff !important; text-align: left; }
    html body #builder-view .section-path-info { margin: 0; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0; text-transform: none !important; color: #a8a8a8 !important; text-align: left; white-space: normal; }
    html body #builder-view .category-search-wrapper { width: 100%; max-width: none; min-width: 0; }
    html body #builder-view .category-search-input { width: 100%; height: 46px; background: #000 !important; border: 1px solid #2a2a2a !important; border-radius: 12px !important; color: #fff; font-size: 15px !important; }
    html body #builder-view .filter-sort-trigger { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: #000 !important; border: 1px solid #2a2a2a !important; border-radius: 12px !important; color: #fff; font-size: 0 !important; }
    html body #builder-view .filter-sort-trigger span { display: none !important; }
    html body #builder-view .filter-sort-trigger i { margin: 0 !important; font-size: 18px !important; }
    html body #builder-view .category-search-wrapper { min-width: 0; }

    /* parts: slim rows (photo on the left) so more fit on the screen */
    html body .parts-grid { display: flex !important; flex-direction: column; gap: 10px !important; }
    html body .parts-grid .part-card { display: grid !important; flex-direction: row !important; grid-template-columns: 96px minmax(0, 1fr) !important; align-items: stretch; min-height: 112px; border-radius: 16px !important; }
    html body .part-card .pc-img { position: relative; width: 96px; height: auto; min-height: 112px; padding-bottom: 24px; box-sizing: border-box; }
    html body .part-card .pc-img img.part-image { max-width: 74%; max-height: 74%; }
    html body .part-card .pc-chip { top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 3px 6px; font-size: 9px !important; }
    html body .part-card .pc-view { top: auto; right: 0; bottom: 0; left: 0; height: 24px; padding: 0; justify-content: center; background: #0d0d0d; border: 0; border-top: 1px solid #1f1f1f; border-radius: 0 !important; font-size: 11px !important; color: #c9c9c9; }
    html body .part-card .pc-body { padding: 10px 12px; gap: 4px; }
    html body .part-card .part-name { height: auto; max-height: 36px; font-size: 14px !important; }
    html body .part-card .pc-meta, html body .part-card .pc-meta span { font-size: 12px !important; }
    html body .part-card .pc-foot { flex-wrap: nowrap; padding-top: 4px; }
    html body .part-card .part-price, html body .part-card .part-price span { font-size: 16px !important; }
    html body .part-card .pc-select, html body .part-card .pc-qty { height: 36px; }

    /* an identity transform left on <main> by its fade-in would make the sheet position itself inside the page instead of the screen */
    html body #main-builder-content, html body #main-builder-content.visible { transform: none !important; animation: none !important; opacity: 1 !important; }

    /* the build bar at the bottom */
    html body .bp-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 12px; box-sizing: border-box; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: #0a0a0a; border-top: 1px solid #1c1c1c; }
    html body .bp-bar-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; background: none; border: 0; text-align: left; color: #fff; cursor: pointer; }
    html body .bp-bar-label { display: flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 400 !important; color: #a8a8a8; }
    html body .bp-bar-label i { font-size: 10px !important; color: #ff5252; }
    html body .bp-bar-label span { font-size: 12px !important; font-weight: 400 !important; }
    html body .bp-bar-sum b { font-size: 22px !important; line-height: 1.1; font-weight: 700 !important; color: #fff; }
    html body .bp-bar-cta { flex: 0 0 auto; height: 48px; padding: 0 24px; background: #d10000 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
    html body .bp-bar-cta.is-waiting { background: #1f1f1f !important; color: #fff !important; }

    /* "Your build" as a sheet that slides up */
    html body #build-panel { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 10050; box-sizing: border-box; max-height: 84vh; overflow-y: auto; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); background: #0d0d0d; border: 1px solid #1f1f1f; border-bottom: 0; border-radius: 24px 24px 0 0 !important; box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.85); transform: translateY(104%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s; }
    html body.bp-open #build-panel { transform: translateY(0); visibility: visible; }
    html body.bp-open::after { content: ''; position: fixed; inset: 0; z-index: 10040; background: rgba(0, 0, 0, 0.68); animation: bpFade 0.25s ease both; }
    @keyframes bpFade { from { opacity: 0; } to { opacity: 1; } }
    html body #build-panel .bp-grab { display: block; width: 44px; height: 5px; margin: 0 auto 14px; background: #3a3a3a; border-radius: 3px; }
    html body #build-panel .bp-close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: #161616; border: 0; border-radius: 50% !important; color: #a8a8a8; font-size: 20px !important; line-height: 1; cursor: pointer; }
    html body #build-panel .bp-head { padding-right: 44px; }
    html body #build-panel .bp-name { white-space: normal; }
    html body #build-panel .bp-swap { padding: 6px 0 0; font-size: 12px !important; }
    /* Save / PDF / Share / Reset / Summary stay pinned to the bottom of the sheet while the parts list scrolls */
    html body #build-panel .bp-links { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); z-index: 2; margin: 14px -18px calc(-22px - env(safe-area-inset-bottom)); padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: #0d0d0d; border-top: 1px solid #1f1f1f; }
}

/* the AI build screen has its own layout: no build bar or sheet there */
html.aib-open .bp-mobilebar, html.aib-open #build-panel, html.aib-boot .bp-mobilebar { display: none !important; }


/* ---------- "Filter & sort" drawer and "View details" drawer (computer: side panel, phone: bottom sheet) ---------- */
html body .filter-drawer-overlay, html body .part-drawer-overlay { background: rgba(0, 0, 0, 0.68) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .filter-drawer, html body .part-drawer { background: #0d0d0d !important; border: 1px solid #1f1f1f !important; border-bottom: 0 !important; border-radius: 24px 24px 0 0 !important; box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.85); }
@media (min-width: 769px) {
    html body .filter-drawer, html body .part-drawer { border: 0 !important; border-left: 1px solid #1f1f1f !important; border-radius: 24px 0 0 24px !important; box-shadow: -24px 0 70px rgba(0, 0, 0, 0.85); }
}
html body .filter-drawer { padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); }

/* headers */
html body .filter-drawer-header { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid #1f1f1f !important; }
html body .filter-drawer-header h3 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.01em; text-transform: none; color: #fff; }
html body .close-drawer, html body .part-drawer-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: #161616 !important; border: 0 !important; border-radius: 50% !important; color: #a8a8a8; font-size: 16px !important; cursor: pointer; }
html body .close-drawer:hover, html body .part-drawer-close:hover { background: #222 !important; color: #fff; }

/* filter groups and chips */
html body .filter-section { margin-bottom: 22px; }
html body .filter-section label { margin-bottom: 10px; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase; color: #7a7a7a; opacity: 1; }
html body .filter-chips { gap: 8px; }
html body .filter-chip { padding: 9px 16px; background: #0d0d0d !important; border: 1px solid #2a2a2a !important; border-radius: 999px !important; color: #fff; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; transform: none !important; }
html body .filter-chip:hover { border-color: #5a5a5a !important; }
html body .filter-chip.active { background: #d10000 !important; border-color: #d10000 !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; }
html body .filter-chip.active-all { background: #1a0000 !important; border: 1px solid #d10000 !important; color: #fff !important; font-weight: 600 !important; }
html body .filter-drawer-footer { gap: 10px; padding: 16px 0 6px; border-top: 1px solid #1f1f1f !important; background: #0d0d0d; }
html body .clear-filters-btn, html body .apply-filters-btn { height: 50px; padding: 0; border-radius: 12px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none; box-shadow: none !important; }
html body .clear-filters-btn { background: transparent !important; border: 1px solid #3a3a3a !important; color: #fff; }
html body .clear-filters-btn:hover { border-color: #fff !important; }
html body .apply-filters-btn { background: #d10000 !important; border: 0 !important; color: #fff !important; }
html body .apply-filters-btn:hover { background: #e60000 !important; }

/* part details drawer */
html body .part-drawer-header { padding: 18px 22px; border-bottom: 1px solid #1f1f1f; }
html body #part-drawer-title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.2em; text-transform: uppercase; color: #ff5252; }
html body .part-drawer-body { padding: 22px; }
html body .part-drawer-img { height: 240px; padding: 16px; background: #161616 !important; border: 0 !important; border-radius: 16px !important; margin-bottom: 14px; }
html body .part-drawer-thumb { background: #161616 !important; border: 1px solid #1f1f1f !important; border-radius: 10px !important; box-shadow: none !important; }
html body .part-drawer-thumb:hover { border-color: #5a5a5a !important; background: #161616 !important; }
html body .part-drawer-thumb.active { border-color: #d10000 !important; background: #161616 !important; box-shadow: none !important; }
html body .part-drawer-name { margin: 6px 0 0; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
html body .part-drawer-brand { margin-top: 6px; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #a8a8a8; }
html body .part-drawer-price { margin: 14px 0 16px; font-size: 32px !important; font-weight: 700 !important; color: #fff !important; }
html body .part-drawer-price span { margin-right: 8px; font-size: 16px !important; font-weight: 500 !important; opacity: 1; color: #a8a8a8; }
html body .part-drawer-badges, html body .part-drawer-badges span, html body .part-drawer-badges strong { font-size: 14px !important; font-weight: 400 !important; color: #c9c9c9 !important; }
html body .part-drawer-badges strong { font-weight: 700 !important; color: #fff !important; }
html body .part-drawer-badges span[style*="00ff88"] { color: #fff !important; font-weight: 600 !important; }
html body .part-drawer-already-note { color: #ff5252; font-size: 14px !important; font-weight: 500 !important; }
html body .part-drawer-warn { background: #1a0000; border: 1px solid #5a1010; border-radius: 12px !important; color: #ff8a8a; font-size: 14px !important; }
html body .part-drawer-desc { font-size: 15px !important; font-weight: 400 !important; line-height: 1.65; color: #c9c9c9; }
html body .part-drawer-specs { gap: 8px; }
html body .part-drawer-specs .spec-item { padding: 11px 14px; background: #000 !important; border: 1px solid #1f1f1f !important; border-radius: 12px !important; }
html body .part-drawer-specs .spec-label { margin-bottom: 3px; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em; color: #7a7a7a; }
html body .part-drawer-specs .spec-value { font-size: 15px !important; font-weight: 500 !important; color: #fff; }
html body .part-drawer-footer { padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); background: #0d0d0d !important; border-top: 1px solid #1f1f1f; }
html body .part-drawer-btn { height: 50px; padding: 0 12px; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none; box-shadow: none !important; transform: none !important; filter: none !important; }
html body .part-drawer-btn.build { background: #d10000 !important; border: 0 !important; color: #fff !important; }
html body .part-drawer-btn.build:not(:disabled):hover { background: #e60000 !important; }
html body .part-drawer-btn.cart { background: transparent !important; border: 1px solid #3a3a3a !important; color: #fff !important; }
html body .part-drawer-btn.cart:hover { border-color: #fff !important; }
html body .part-drawer-btn i { font-size: 14px !important; }
html body .part-drawer-fullpage { display: block; margin-top: 12px; text-align: center; color: #c9c9c9; font-size: 14px !important; font-weight: 400 !important; text-decoration: underline; }
html body .part-drawer-fullpage:hover { color: #fff; }


/* ---------- build summary page ("Summary" in the build panel): title, one row per part, total + actions ---------- */
html body .summary-view-container.sm-wrap { max-width: 920px; margin: 0 auto; padding: 4px 0 60px !important; background: none !important; border: 0 !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; text-align: start; }
html body .sm-wrap .summary-view-title { margin: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 36px !important; font-weight: 700 !important; line-height: 1.1; letter-spacing: -0.02em !important; text-transform: none !important; text-align: start !important; color: #fff; }
html body .sm-wrap .summary-view-subtitle { margin: 10px 0 0 !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5; letter-spacing: 0 !important; text-transform: none !important; text-align: start !important; color: #a8a8a8; }

html body .sm-list { margin-top: 26px; overflow: hidden; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 18px !important; }
html body .sm-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #1f1f1f; cursor: pointer; transition: background 0.15s; }
html body .sm-row:last-child { border-bottom: 0; }
html body .sm-row:hover { background: #121212; }
html body .sm-thumb { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; background: #161616; border-radius: 12px !important; }
html body .sm-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
html body .sm-info { min-width: 0; }
html body .sm-cat { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #ff5252; }
html body .sm-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 3px 0 0 !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.35; letter-spacing: 0 !important; text-transform: none !important; color: #fff; }
html body .sm-arrival { margin-top: 4px; font-size: 13px !important; font-weight: 400 !important; color: #a8a8a8; }
html body .sm-price { font-size: 18px !important; font-weight: 700 !important; color: #fff; white-space: nowrap; }
html body .sm-cur { font-size: 13px !important; font-weight: 500 !important; color: #a8a8a8; }
html body .sm-replace { height: 38px; padding: 0 16px; background: transparent !important; border: 1px solid #3a3a3a !important; border-radius: 10px !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; cursor: pointer; }
html body .sm-replace:hover { border-color: #fff !important; }

html body .sm-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; margin-top: 20px; padding: 20px 22px; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 18px !important; }
html body .sm-total > span { display: block; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #a8a8a8; }
html body .sm-total strong { display: block; margin-top: 4px; font-size: 34px !important; line-height: 1.1; font-weight: 700 !important; color: #fff; }
html body .sm-total strong .sm-cur { font-size: 16px !important; }
html body .sm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
html body .sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 18px; background: transparent !important; border: 1px solid #3a3a3a !important; border-radius: 12px !important; box-shadow: none !important; color: #fff !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important; transform: none !important; animation: none !important; cursor: pointer; }
html body .sm-btn i { font-size: 14px !important; color: #ff5252; }
html body .sm-btn:hover { border-color: #fff !important; }
html body .sm-btn-primary { background: #d10000 !important; border: 0 !important; font-weight: 700 !important; }
html body .sm-btn-primary i { color: #fff; }
html body .sm-btn-primary:hover { background: #e60000 !important; }
html body .sm-btn.is-disabled { opacity: 0.45; }

@media (max-width: 700px) {
    html body .sm-wrap .summary-view-title { font-size: 28px !important; }
    html body .sm-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb info info" "thumb price replace"; gap: 8px 12px; padding: 12px; }
    html body .sm-thumb { grid-area: thumb; width: 64px; height: 64px; align-self: start; }
    html body .sm-info { grid-area: info; }
    html body .sm-price { grid-area: price; align-self: center; font-size: 17px !important; }
    html body .sm-replace { grid-area: replace; height: 36px; }
    html body .sm-foot { flex-direction: column; align-items: stretch; padding: 18px 16px; }
    html body .sm-actions { display: grid; grid-template-columns: 1fr 1fr; }
    html body .sm-btn-primary { grid-column: 1 / -1; }
    html body .sm-btn { padding: 0 8px; gap: 7px; font-size: 14px !important; white-space: nowrap; }
    html body .sm-total strong { font-size: 30px !important; }
}


/* ---------- balance / bottleneck / thermal message under the parts ---------- */
html body #bottleneck-warning-bar.bn-note { align-items: flex-start; flex-direction: row !important; gap: 14px !important; margin: 18px 0 14px !important; padding: 14px 16px !important; background: #0d0d0d !important; border: 1px solid #2a2a2a !important; border-radius: 14px !important; box-shadow: none !important; color: #c9c9c9 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; }
html body .bn-note .bn-icon { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; background: #161616; border-radius: 10px !important; color: #fff; }
html body .bn-note .bn-icon i { font-size: 16px !important; }
html body .bn-note .bn-text { flex: 1; min-width: 0; }
html body .bn-note .bn-title { display: block; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; }
html body .bn-note .bn-body { display: block; margin-top: 3px; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5; color: #c9c9c9; }
html body .bn-note .bn-body strong { font-size: 14px !important; font-weight: 600 !important; color: #fff; }
html body #bottleneck-warning-bar.bn-note.is-warn { background: #1a0000 !important; border-color: #5a1010 !important; }
html body .bn-note.is-warn .bn-icon { background: #2a0606; color: #ff5252; }
html body .bn-note.is-info .bn-icon { color: #ff5252; }