/* ═══════════════════════════════════════════════════════════════════════════════
   Blueprint Tech - Configurator (page-specific styles)
   Extracted from configurator.html's former inline <style> block in the
   2026-07 restructure. Loads AFTER css/styles.css - tokens, fonts, nav,
   footer, buttons, and the mobile-nav overlay all come from the shared
   sheet; only configurator tool styles live here.
   ═══════════════════════════════════════════════════════════════════════════════ */

.scroll-fade-title { opacity: 0; transition: opacity 0.3s ease; }

    /* ─── Loading Skeleton ──────────────────────────────────────────────────────
       Mirrors the real .config-hero and build-picker-grid markup below (same
       layout/tile classes) so there's no layout shift when it's swapped out -
       only text/photos are replaced with skeleton-line placeholders. Hidden
       by JS the moment the real entry screen is ready (see initData()),
       never a fixed timer. */
    .config-loading { position: fixed; inset: 0; z-index: 200; background: var(--bg); opacity: 1; visibility: visible; overflow-y: auto; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .config-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    /* Dark tiles (--c3/--c4/--custom use near-black backgrounds) - the
       default skeleton-line gradient is too low-contrast against them. */
    .config-loading .build-picker-tile--c3 .skeleton-line,
    .config-loading .build-picker-tile--c4 .skeleton-line,
    .config-loading .build-picker-tile--custom .skeleton-line { background: linear-gradient(90deg, rgba(255,255,255,0.14) 25%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.14) 75%); background-size: 200% 100%; }

    /* ─── Configurator ──────────────────────────────────────────────────────── */
    .configurator { position: relative; z-index: 1; min-height: 100vh; }
    .config-fade-in { opacity: 1; }
    .configurator > * { position: relative; z-index: 1; }
    .config-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; min-height: calc(100vh - 64px); }
    .config-steps { display: flex; flex-direction: column; gap: 6px; width: 100%; }

    /* ─── Category Tiles (beginner-friendly big buttons) ───────────────────── */
    .tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .tile-btn { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition); text-align: left; font: inherit; color: inherit; min-height: 130px; }
    .tile-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
    .tile-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .tile-btn.is-open { border-color: var(--accent); }
    .tile-btn.is-filled { border-color: rgba(26,26,26,0.45); }
    .tile-btn.is-filled.is-open { border-color: var(--accent); }
    .tile-btn.has-warning { border-color: rgba(239,68,68,0.5); }
    .tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .tile-icon-wrap { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
    .tile-icon-wrap svg { width: 16px; height: 16px; }
    .tile-status-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
    .tile-btn.is-filled .tile-status-dot { background: var(--accent); border-color: var(--accent); }
    .tile-btn.is-filled.is-open .tile-status-dot { background: var(--accent); border-color: var(--accent); }
    .tile-btn.is-filled .tile-status-dot::after { content: ''; width: 6px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
    .tile-label { font-family: var(--font); font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
    .tile-sublabel { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; margin-top: 2px; }
    .tile-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding: 7px 8px; background: var(--surface-hover); border-radius: var(--radius); min-height: 44px; }
    /* Extra RAM stick / storage drive rows - flex-basis:100% forces this
       block onto its own line below the primary pick's row, within the same
       flex-wrap tile-preview container. */
    .tile-extra-block { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
    .tile-extra-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.75rem; }
    .tile-extra-name { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tile-extra-price { font-family: var(--font); font-weight: 700; color: var(--accent); white-space: nowrap; margin-left: auto; }
    .tile-extra-remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9375rem; line-height: 1; padding: 2px 4px; border-radius: 4px; transition: color var(--transition); }
    .tile-extra-remove:hover { color: var(--text-primary); }
    .tile-extra-add { align-self: flex-start; background: none; border: none; padding: 0; font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
    .tile-preview-empty { font-family: var(--font); font-size: 0.75rem; color: var(--text-muted); margin: auto 0; }
    .tile-preview-img { width: 28px; height: 28px; object-fit: contain; border-radius: 5px; background: rgba(255,255,255,0.04); padding: 2px; flex-shrink: 0; }
    .tile-preview-info { flex: 1; min-width: 0; }
    .tile-preview-name { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tile-preview-price { font-family: var(--font); font-size: 0.8125rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
    .tile-warning-pill { position: absolute; top: 10px; right: 10px; display: none; align-items: center; gap: 4px; font-family: var(--font); font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #EF4444; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.4); border-radius: 20px; padding: 3px 8px; }
    /* partImg() reuses part-card-img markup for the tile preview thumbnail too - force it back to tile size here so it doesn't eat the name's width */
    .tile-preview .part-card-img, .tile-preview .part-card-img-wrap, .tile-preview .part-card-img-fallback { width: 28px; height: 28px; }
    .tile-btn.has-warning .tile-warning-pill { display: inline-flex; }
    /* A tile with an active compatibility issue shouldn't also show the
       "all good" status dot - the ISSUE pill already covers that corner, so
       just remove the dot entirely rather than leaving a bare ring behind. */
    .tile-btn.has-warning .tile-status-dot { display: none; }

    /* ─── Config Step (expanded picker panel under tiles) ──────────────────── */
    .config-step {
      background: var(--bg);
      border: 1px solid transparent;
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: border-color var(--transition), opacity 0.25s ease, max-height 0s ease 0.25s;
      max-height: 0;
      opacity: 0;
    }
    .config-step:focus-within { border-color: var(--accent); }
    .config-step.is-open {
      border-color: var(--accent);
      transition: border-color var(--transition), max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
      max-height: 1600px;
      opacity: 1;
    }
    .step-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
    .step-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    .step-number { font-family: var(--font); font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); background: var(--surface); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
    .step-label { font-family: var(--font); font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
    .step-sublabel { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
    .step-price { font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; min-width: 64px; text-align: right; }
    .step-price.active { color: var(--accent); }
    .step-close-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
    .step-close-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
    .step-close-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .step-content { display: block; }
    .step-content-inner { padding: 0 16px 14px; min-width: 0; }

    /* ─── Step: Search ──────────────────────────────────────────────────────── */
    .step-search { position: relative; margin-bottom: 16px; }
    .step-search input { width: 100%; padding: 10px 14px 10px 38px; font-family: var(--font); font-size: 0.875rem; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition); }
    .step-search input:focus { outline: none; border-color: var(--accent); }
    .step-search input::placeholder { color: var(--text-secondary); }
    .step-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; width: 16px; height: 16px; }

    /* ─── Step: Card Grid ───────────────────────────────────────────────────── */
    .parts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
    /* Collapsible category group inside the add-ons Browse-all grid (drawer +
       mobile modal) - closed by default, same interaction as the accordion
       step's category groups. */
    .drawer-group { grid-column: 1 / -1; }
    .drawer-group-heading { display: flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 14px 2px; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
    .drawer-group:first-child .drawer-group-heading { padding-top: 2px; }
    .drawer-group-count { color: var(--text-muted); font-weight: 500; }
    .drawer-group-arrow { margin-left: auto; flex-shrink: 0; transition: transform 0.3s ease; }
    .drawer-group-heading.active .drawer-group-arrow { transform: rotate(180deg); }
    .drawer-group-panel { display: none; }
    .drawer-group-panel.open { display: block; }
    .drawer-group-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 0; }
    .drawer-body .drawer-group-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .mobile-parts-modal-body .drawer-group-cards { grid-template-columns: 1fr; }
    .part-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); position: relative; min-width: 0; }
    .part-card:hover { border-color: var(--accent); background: var(--surface); }
    .part-card.selected { border-color: var(--accent); background: rgba(26,26,26,0.06); }
    /* Pending = highlighted but not yet confirmed */
    .part-card.pending { border-color: var(--accent); background: rgba(26,26,26,0.04); }
    .part-card.pending .part-card-check { border-color: var(--accent); background: rgba(26,26,26,0.08); }
    .part-card.pending .part-card-check::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
    .part-card-img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,0.03); padding: 3px; flex-shrink: 0; cursor: zoom-in; }
    .part-card-img-wrap { width: 40px; height: 40px; flex-shrink: 0; position: relative; }
    .part-card-img-wrap .part-card-img { width: 100%; height: 100%; }
    .part-card-img-fallback { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.6875rem; font-family: var(--font); border-radius: 6px; background: rgba(255,255,255,0.03); }

    /* ─── Image Lightbox - click any part image to view it bigger, centered ── */
    .image-lightbox-overlay {
      position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.88);
      display: flex; align-items: center; justify-content: center; padding: 32px;
      opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .image-lightbox-overlay.open { opacity: 1; visibility: visible; }
    .image-lightbox-img {
      max-width: min(90vw, 700px); max-height: 85vh; object-fit: contain;
      border-radius: var(--radius); background: var(--bg);
      transform: scale(0.94); transition: transform 0.25s ease;
    }
    .image-lightbox-overlay.open .image-lightbox-img { transform: scale(1); }
    .image-lightbox-close {
      position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.1);
      border: none; color: #fff; cursor: pointer; padding: 8px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; transition: background var(--transition);
    }
    .image-lightbox-close:hover { background: rgba(255,255,255,0.2); }
    /* Mobo-downgrade slot-capacity warning - see checkMoboSlotCapacity(). */
    .slot-warning-overlay {
      position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.6);
      display: flex; align-items: center; justify-content: center; padding: 24px;
      opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .slot-warning-overlay.open { opacity: 1; visibility: visible; }
    .slot-warning-modal {
      max-width: 380px; width: 100%; background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius-xl); padding: 24px; text-align: center;
      transform: translateY(12px); transition: transform 0.25s ease;
    }
    .slot-warning-overlay.open .slot-warning-modal { transform: translateY(0); }
    .slot-warning-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(239,68,68,0.12); color: #EF4444; margin-bottom: 14px; }
    .slot-warning-text { font-size: 0.875rem; line-height: 1.55; color: var(--text-primary); margin: 0 0 18px; }
    .slot-warning-ok { width: 100%; padding: 11px; font-family: var(--font); font-size: 0.8125rem; font-weight: 700; color: var(--bg); background: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); }
    .slot-warning-ok:hover { background: #3A3A3A; }
    .part-card-info { flex: 1; min-width: 0; }
    .part-card-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .part-card-spec { font-size: 0.6875rem; color: var(--text-secondary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .part-card-price { font-family: var(--font); font-size: 0.875rem; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; min-width: 44px; text-align: right; }
    .part-card-check { width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
    .part-card.selected .part-card-check { background: var(--accent); border-color: var(--accent); }
    .part-card.selected .part-card-check::after { content: ''; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
    .part-card.incompatible { opacity: 0.45; cursor: not-allowed; border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); }
    .part-card.incompatible:hover { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); transform: none; }
    .part-card.incompatible .part-card-name { color: var(--text-muted); }
    .part-card.incompatible .part-card-price { color: var(--text-muted); }
    .part-card-empty { grid-column: 1 / -1; text-align: center; padding: 32px 16px; color: var(--text-secondary); font-size: 0.875rem; }
    /* ─── Step: Confirm Bar (slides up when a part is pending) ───────────────── */
    .step-confirm-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
      margin-top: 10px;
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
    }
    .step-confirm-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .step-confirm-bar-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; }
    .step-confirm-bar-icon svg { color: var(--accent); }
    .step-confirm-bar-info { flex: 1; min-width: 0; }
    .step-confirm-bar-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .step-confirm-bar-hint { font-family: var(--font); font-size: 0.625rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
    .step-confirm-bar-price { font-family: var(--font); font-size: 0.8125rem; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
    .step-confirm-btn {
      font-family: var(--font); font-size: 0.75rem; font-weight: 700;
      padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
      background: var(--accent); color: var(--bg);
      transition: all var(--transition); white-space: nowrap; flex-shrink: 0;
    }
    .step-confirm-btn:hover { background: #3A3A3A; }
    .step-cancel-btn {
      font-family: var(--font); font-size: 0.75rem; font-weight: 600;
      padding: 8px 10px; border-radius: 8px;
      border: 1px solid var(--border); cursor: pointer;
      background: none; color: var(--text-secondary);
      transition: all var(--transition); flex-shrink: 0;
    }
    .step-cancel-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }

    /* ─── Step: Selected info bar ───────────────────────────────────────────── */
    .step-selected { display: none; margin-top: 12px; padding: 12px 16px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius); align-items: center; gap: 12px; }
    .step-selected.visible { display: flex; }
    .step-selected-info { flex: 1; min-width: 0; }
    .step-selected-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
    .step-selected-spec { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
    .step-selected-price { font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
    .step-change-btn { font-family: var(--font); font-size: 0.6875rem; color: var(--accent); background: none; border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: all var(--transition); white-space: nowrap; }
    .step-change-btn:hover { background: var(--accent-dim); border-color: var(--accent); }

    /* ─── Step: Browse all button (desktop only - always visible below collapsed step) */
    .step-browse-all-desktop { display: none; }
    @media (min-width: 641px) {
      .step-browse-all-desktop { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); margin-top: 8px; }
      .step-browse-all-desktop:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
    }

    /* ─── Compat ────────────────────────────────────────────────────────────── */
    .compat-warning { display: none; margin-top: 12px; padding: 10px 14px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius); font-size: 0.8125rem; color: #EF4444; line-height: 1.5; }
    .compat-warning.visible { display: flex; align-items: flex-start; gap: 8px; }
    .compat-warning svg { flex-shrink: 0; margin-top: 2px; }
    .compat-ok { display: none; margin-top: 8px; font-size: 0.75rem; color: var(--success); font-family: var(--font); }
    .compat-ok.visible { display: block; }
    .step-compat-badge { display: none; align-items: center; gap: 4px; font-family: var(--font); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #EF4444; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); border-radius: 20px; padding: 3px 10px; margin-left: 8px; white-space: nowrap; flex-shrink: 0; }
    .step-compat-badge.visible { display: inline-flex; }
    .step-compat-badge svg { flex-shrink: 0; }

    /* ─── Part Drawer (full view) ──────────────────────────────────────────── */
    .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 150; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .drawer-overlay.open { opacity: 1; visibility: visible; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; background: var(--bg); border-left: none; z-index: 151; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    .drawer-overlay.open .drawer { transform: translateX(0); }
    .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .drawer-title { font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
    .drawer-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; transition: color var(--transition); display: flex; align-items: center; justify-content: center; }
    .drawer-close:hover { color: var(--text-primary); }
    .drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
    .drawer-body .parts-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .drawer-filters { margin-bottom: 16px; }
    .drawer-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
    .drawer-filter-label { font-family: var(--font); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-right: 4px; white-space: nowrap; }
    .drawer-filter-chip { font-family: var(--font); font-size: 0.6875rem; font-weight: 500; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); user-select: none; }
    .drawer-filter-chip:hover { border-color: var(--accent); color: var(--text-primary); }
    .drawer-filter-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
    .drawer-confirm-wrap { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 16px 24px; margin: 0 -24px -20px; }
    .drawer-confirm-wrap .btn { width: 100%; justify-content: center; }

    /* ─── Parts Modal (centered on desktop, full-screen on mobile) ──────────── */
    .mobile-parts-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 160; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .mobile-parts-modal-overlay.open { opacity: 1; visibility: visible; }
    .mobile-parts-modal { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 520px; height: 80vh; display: flex; flex-direction: row; overflow: hidden; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    .mobile-parts-modal-overlay.open .mobile-parts-modal { transform: translateY(0); }
    .mobile-parts-modal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
    .mobile-parts-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .mobile-parts-modal-title { font-family: var(--font); font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
    .mobile-parts-modal-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; transition: color var(--transition); display: flex; align-items: center; justify-content: center; }
    .mobile-parts-modal-close:hover { color: var(--text-primary); }
    .mobile-parts-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
    .mobile-parts-modal-body .parts-grid { grid-template-columns: 1fr; }
    .mobile-parts-modal-confirm { flex-shrink: 0; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--bg); display: none; }

    /* Detail panel - hidden/collapsed by default, expands the modal to the right
       when a part card is tapped. Collapsed via width so the transition animates
       smoothly and the flex-centered overlay re-centers the modal as it grows. */
    .mobile-parts-modal-detail {
      flex: 0 0 auto; width: 0; overflow: hidden; border-left: 1px solid transparent;
      background: var(--bg-elevated, var(--surface));
      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
      position: relative;
    }
    /* Crossfade + scale transition: whenever a new part's info is shown in
       the detail panel (only this panel, not the whole modal), the current
       content fades/scales down slightly, swaps underneath while hidden,
       then fades/scales back up to reveal the new part. */
    .mobile-parts-modal-detail-inner {
      width: 600px; height: 100%; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
      opacity: 0; transform: scale(1);
      transition: opacity 0.28s ease 0.1s, transform 0.28s ease 0.1s;
    }
    .mobile-parts-modal-detail-inner.swapping { opacity: 0; transform: scale(0.97); transition: opacity 0.18s ease, transform 0.18s ease; }
    .mobile-parts-modal-detail.open { width: 600px; border-left-color: var(--border); }
    .mobile-parts-modal-detail.open .mobile-parts-modal-detail-inner { opacity: 1; }
    .mobile-parts-modal-detail-img-wrap { width: 50%; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: var(--radius); background: rgba(255,255,255,0.03); overflow: hidden; position: relative; }
    /* Horizontal scroll-snap carousel - scroll or swipe through a part's images */
    .mobile-parts-modal-detail-img-track {
      display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .mobile-parts-modal-detail-img-track::-webkit-scrollbar { display: none; }
    .mobile-parts-modal-detail-img-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
    .mobile-parts-modal-detail-img-slide img { width: 100%; height: 100%; object-fit: contain; padding: 16px; pointer-events: none; }
    .mobile-parts-modal-detail-img-fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: var(--text-muted); font-family: var(--font); font-size: 0.75rem; }
    .mobile-parts-modal-detail-img-nav {
      position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%;
      background: rgba(20,20,20,0.55); border: none; color: #fff; cursor: pointer; display: flex; align-items: center;
      justify-content: center; opacity: 0; transition: opacity var(--transition), background var(--transition);
    }
    .mobile-parts-modal-detail-img-wrap:hover .mobile-parts-modal-detail-img-nav { opacity: 1; }
    .mobile-parts-modal-detail-img-nav:hover { background: rgba(20,20,20,0.8); }
    .mobile-parts-modal-detail-img-nav.prev { left: 8px; }
    .mobile-parts-modal-detail-img-nav.next { right: 8px; }
    .mobile-parts-modal-detail-img-dots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 5px; }
    .mobile-parts-modal-detail-img-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background var(--transition), transform var(--transition); }
    .mobile-parts-modal-detail-img-dot.active { background: #fff; transform: scale(1.3); }
    .mobile-parts-modal-detail-name { font-family: var(--font); font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
    .mobile-parts-modal-detail-price { font-family: var(--font); font-size: 1.375rem; font-weight: 700; color: var(--accent); }
    .mobile-parts-modal-detail-compat { padding: 11px 13px; border-radius: var(--radius); font-family: var(--font); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; }
    .mobile-parts-modal-detail-compat.ok { background: rgba(52,211,153,0.08); color: #34D399; }
    .mobile-parts-modal-detail-compat.warn { background: rgba(239,68,68,0.08); color: #EF4444; }
    .mobile-parts-modal-detail-block { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
    .mobile-parts-modal-detail-section-label { font-family: var(--font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
    .mobile-parts-modal-detail-specs { display: flex; flex-direction: column; gap: 8px; }
    .mobile-parts-modal-detail-spec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8125rem; }
    .mobile-parts-modal-detail-spec-row span:first-child { color: var(--text-secondary); }
    .mobile-parts-modal-detail-spec-row span:last-child { color: var(--text-primary); font-weight: 600; text-align: right; }
    .mobile-parts-modal-detail-spec-row.placeholder span:last-child { color: var(--text-muted); font-weight: 500; font-style: italic; }
    .mobile-parts-modal-detail-desc { font-size: 0.8125rem; line-height: 1.55; color: var(--text-secondary); }
    .mobile-parts-modal-detail-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
    .mobile-parts-modal-detail-thumb { width: 56px; height: 56px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.03); cursor: pointer; overflow: hidden; }
    .mobile-parts-modal-detail-thumb.active { border-color: var(--accent); }
    .mobile-parts-modal-detail-thumb img { width: 100%; height: 100%; object-fit: contain; }

    /* Desktop: modal is a centered card; hide inline step panels (modal is primary) */
    @media (min-width: 641px) {
      .mobile-parts-modal { max-width: 620px; height: 80vh; border-radius: var(--radius-xl); }
      .mobile-parts-modal.detail-open { max-width: 1220px; }
      .mobile-parts-modal-body .parts-grid { grid-template-columns: 1fr; }
      .config-step { display: none !important; }
    }

    /* Mobile: keep the detail panel off (bottom sheet already covers this) */
    @media (max-width: 640px) {
      .mobile-parts-modal-detail { display: none; }
    }

    /* ─── Mobile Part Bottom Sheet ─────────────────────────────────────────── */
    @keyframes sheet-slide-up {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .mobile-part-bottom-sheet {
      flex-shrink: 0;
      padding: 14px 20px 18px;
      background: var(--bg-elevated);
      border-top: 1px solid var(--border);
      display: none;
      flex-direction: column;
      gap: 10px;
      transform: translateY(100%);
    }
    .mobile-part-bottom-sheet.visible { display: flex; animation: sheet-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
    .mobile-part-bottom-sheet-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .mobile-part-bottom-sheet-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
    .mobile-part-bottom-sheet-price-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .mobile-part-bottom-sheet-price { font-family: var(--font); font-size: 0.875rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
    /* RAM-only quantity stepper, shown next to the price in the bottom sheet
       when picking RAM - see showMobileBottomSheet(). Chosen quantity is
       baked into state.ramQty on confirm, not adjustable afterward without
       reopening the picker. */
    .mobile-part-bottom-sheet-qty { display: flex; align-items: center; gap: 6px; }
    .sheet-qty-btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 0.875rem; font-weight: 700; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; transition: all var(--transition); }
    .sheet-qty-btn:hover { border-color: var(--border-strong); }
    .sheet-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .sheet-qty-value { font-family: var(--font); font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); min-width: 22px; text-align: center; }
    .tile-preview-qty { font-family: var(--font); font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); }
    .mobile-part-bottom-sheet-msg { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }
    .mobile-part-bottom-sheet-actions { display: flex; gap: 10px; }
    .mobile-part-bottom-sheet-cancel {
      flex: 1; padding: 10px; font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
      color: var(--text-secondary); background: none; border: 1px solid var(--border);
      border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
    }
    .mobile-part-bottom-sheet-cancel:hover { border-color: var(--border-strong); color: var(--text-primary); }
    .mobile-part-bottom-sheet-confirm {
      flex: 2; padding: 10px; font-family: var(--font); font-size: 0.8125rem; font-weight: 700;
      color: var(--bg); background: var(--accent); border: none; border-radius: var(--radius);
      cursor: pointer; transition: all var(--transition);
    }
    .mobile-part-bottom-sheet-confirm:hover { background: #3A3A3A; }
    .mobile-part-bottom-sheet-confirm:disabled { opacity: 0.4; cursor: not-allowed; background: var(--surface); color: var(--text-muted); }

    /* Incompatible state */
    .mobile-part-bottom-sheet.incompatible .mobile-part-bottom-sheet-msg { color: #EF4444; font-weight: 600; }
    .mobile-part-bottom-sheet.incompatible .mobile-part-bottom-sheet-confirm { display: none; }
    .mobile-part-bottom-sheet.incompatible .mobile-part-bottom-sheet-cancel { flex: 1; }

    /* Delete-selected-part bar - sits below the "Select this part" bottom sheet */
    .mobile-parts-modal-delete-bar { flex-shrink: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border); background: var(--bg); }
    .drawer-delete-selected-btn {
      display: block; width: 100%; padding: 10px 12px; font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
      color: #EF4444; background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.3);
      border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
    }
    .drawer-delete-selected-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); }

    /* ─── Sidebar / Price Panel ─────────────────────────────────────────────── */
    .config-sidebar { position: static; max-height: none; display: flex; flex-direction: column; }
    .price-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
    .price-panel::-webkit-scrollbar { width: 4px; }
    .price-panel::-webkit-scrollbar-track { background: transparent; }
    .price-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .price-panel-label { font-family: var(--font); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 8px; }
    .price-total { font-family: var(--font); font-size: clamp(1.35rem, 2.2vw, 2.25rem); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; line-height: 1.15; word-break: break-all; }
    .price-total .currency { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }
    .price-breakdown { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 20px; }
    .price-note { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.6; padding: 12px 16px; background: var(--accent-dim); border-radius: var(--radius); margin-bottom: 24px; border-left: 3px solid var(--accent); }
    .parts-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
    .parts-list-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; }
    .parts-list-item-info { flex: 1; min-width: 0; }
    .parts-list-category { font-family: var(--font); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); display: block; }
    .parts-list-name { font-size: 0.8125rem; color: var(--text-primary); display: block; line-height: 1.4; }
    .parts-list-price { font-family: var(--font); font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; padding-top: 2px; }
    .parts-list-price.set { color: var(--text-primary); }
    .parts-list-acc-header { font-family: var(--font); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 8px 0 2px; border-top: 1px solid var(--border); margin-top: 4px; }
    .parts-list-acc-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0 3px 12px; }
    .parts-list-acc-name { font-size: 0.75rem; color: var(--text-secondary); flex: 1; min-width: 0; }
    .parts-list-acc-price { font-family: var(--font); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }

    /* ─── Preset Builds ─────────────────────────────────────────────────────── */
    .presets-section { margin-bottom: 40px; }
    .presets-label { font-family: var(--font); font-size: 1.125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 16px; text-align: center; }
    .presets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

    /* ─── Classic preset cards (restored from the previous configurator) ─────
       Text-only cards with a cursor-anchored black hover fill, used for the
       second "Quick Start" grid in the advanced part picker only - kept
       alongside the new photo-tile grid above so both designs are visible
       at once, per request. */
    .preset-card { position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: border-color var(--transition); text-align: left; font: inherit; color: inherit; --ihb-x: 50%; }
    .preset-card:hover { border-color: var(--accent); }
    .preset-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .preset-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      clip-path: inset(0 calc(100% - var(--ihb-x)) 0 var(--ihb-x));
      transition: clip-path 0.18s ease-out;
      z-index: 0;
    }
    .preset-card.ihb-hover::before,
    .preset-card:focus-visible::before {
      clip-path: inset(0 0 0 0);
    }
    .preset-name, .preset-desc, .preset-price, .preset-view-details {
      position: relative;
      z-index: 1;
    }
    .preset-name { font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; transition: color var(--transition); }
    .preset-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; transition: color var(--transition); }
    .preset-price { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--accent); margin-top: 8px; transition: color var(--transition); }
    .preset-view-details { font-family: var(--font); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; opacity: 0.8; transition: opacity var(--transition), color var(--transition); }
    .preset-view-details:hover { opacity: 1; }
    .preset-view-details svg { width: 10px; height: 10px; }
    .preset-card.ihb-hover .preset-name, .preset-card.ihb-hover .preset-desc, .preset-card.ihb-hover .preset-price, .preset-card.ihb-hover .preset-view-details,
    .preset-card:focus-visible .preset-name, .preset-card:focus-visible .preset-desc, .preset-card:focus-visible .preset-price, .preset-card:focus-visible .preset-view-details {
      color: #fff;
      opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .preset-card::before { transition: none; }
    }
    @media (max-width: 640px) {
      .preset-card { padding: 12px; }
      .preset-name { font-size: 0.8125rem; }
      .preset-desc { font-size: 0.6875rem; }
      .preset-price { font-size: 0.75rem; }
    }

    /* ─── Build Picker: photo tiles ─────────────────────────────────────────
       Reuses homepage preset colors via .preset-showcase--zero/--core/--elite/
       --ultimate (css/styles.css, already linked on this page below) - those
       classes set background-color (and, for the dark tiers, --text-*/--accent
       custom properties too), so applying one directly re-themes this tile's
       name/price color for free, no new color values needed here.
       No transform/scale/lift on hover - this site keeps button hover states
       to a plain border/color change. */
    .build-picker-secondary-actions { display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
    .build-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
    /* Square aspect-ratio + overflow:hidden gives the photo a hard edge to be
       clipped against - name/price sit in normal flow at the top (with
       z-index so they're never covered), the photo is absolutely
       positioned, centered horizontally, and pushed down far enough that
       its bottom portion runs past the tile's bottom edge and gets cropped
       - "sitting in the middle but lowered and cut off at the bottom",
       matching a typical product-tile look instead of a fully-contained
       thumbnail. */
    .build-picker-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #EFEDFB; border: none; border-radius: 20px; padding: 24px; cursor: pointer; text-align: left; font: inherit; color: inherit; --ihb-x: 50%; }
    .build-picker-tile:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }
    /* Same cursor-anchored black hover fill as .preset-card (see below) -
       the .ihb-hover class and --ihb-x custom property are driven by the
       same mouseenter/mousemove/mouseleave JS pattern in buildPickerTiles(). */
    .build-picker-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #000;
      clip-path: inset(0 calc(100% - var(--ihb-x)) 0 var(--ihb-x));
      transition: clip-path 0.18s ease-out;
      z-index: 0;
    }
    .build-picker-tile.ihb-hover::before,
    .build-picker-tile:focus-visible::before {
      clip-path: inset(0 0 0 0);
    }
    @media (prefers-reduced-motion: reduce) { .build-picker-tile::before { transition: none; } }
    .build-picker-tile-name, .build-picker-tile-price { position: relative; z-index: 2; }
    .build-picker-tile-photo { position: absolute; z-index: 1; left: 50%; bottom: -70px; transform: translateX(-50%) translateY(0); width: 88%; max-width: 320px; height: auto; pointer-events: none; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
    .build-picker-tile:hover .build-picker-tile-photo { transform: translateX(-50%) translateY(-24px); }
    @media (prefers-reduced-motion: reduce) { .build-picker-tile-photo { transition: none; } }
    .build-picker-tile-name { font-family: var(--font); font-size: 1rem; font-weight: 700; color: #16181D; margin-bottom: 4px; transition: color var(--transition); }
    .build-picker-tile-price { font-size: 0.8125rem; color: #5C5C6B; font-weight: 600; transition: color var(--transition); }
    .build-picker-tile.ihb-hover .build-picker-tile-name, .build-picker-tile:focus-visible .build-picker-tile-name,
    .build-picker-tile.ihb-hover .build-picker-tile-price, .build-picker-tile:focus-visible .build-picker-tile-price {
      color: #fff;
    }
    /* Matches each preset's actual .preset-showcase background color from
       the homepage (css/styles.css: --zero/--core/--elite/--ultimate), so
       the tile a build starts from carries the same colour it's shown in
       further down the page. Zero and Core stay light, Elite and Ultimate
       are dark, so their tile text flips to white below. */
    .build-picker-tile--c1 { background-color: #E3E9F0; }
    .build-picker-tile--c2 { background-color: #E6EDE1; }
    .build-picker-tile--c3 { background-color: #0F241B; }
    .build-picker-tile--c4 { background-color: #131720; }
    .build-picker-tile--c3 .build-picker-tile-name, .build-picker-tile--c4 .build-picker-tile-name { color: #fff; }
    .build-picker-tile--c3 .build-picker-tile-price, .build-picker-tile--c4 .build-picker-tile-price { color: rgba(255,255,255,0.65); }
    /* Plain black hover fill disappears on tiles that are already near-black
       (Ultimate's navy bg, Custom Build's own black) - give those two a
       white fill instead, with their text flipping dark to match. */
    .build-picker-tile--c4::before, .build-picker-tile--custom::before { background: #fff; }
    .build-picker-tile--c4.ihb-hover .build-picker-tile-name, .build-picker-tile--c4:focus-visible .build-picker-tile-name,
    .build-picker-tile--c4.ihb-hover .build-picker-tile-price, .build-picker-tile--c4:focus-visible .build-picker-tile-price,
    .build-picker-tile--custom.ihb-hover .build-picker-tile-name, .build-picker-tile--custom:focus-visible .build-picker-tile-name,
    .build-picker-tile--custom.ihb-hover .build-picker-tile-price, .build-picker-tile--custom:focus-visible .build-picker-tile-price {
      color: #14141A;
    }
    /* Custom Build is the 5th tile in a 3-col grid, so it'd otherwise sit
       alone with an empty cell beside it - span 2 columns to fill that
       gap instead, and re-center its text now that it's twice as wide. */
    .build-picker-tile--custom { background-color: #14141A; grid-column: span 2; aspect-ratio: auto; align-items: center; text-align: center; }
    .build-picker-tile--custom .build-picker-tile-name { color: #fff; font-size: 1.375rem; }
    .build-picker-tile--custom .build-picker-tile-price { color: rgba(255,255,255,0.65); font-size: 1rem; }
    @media (max-width: 900px) { .build-picker-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) {
      .build-picker-grid { grid-template-columns: 1fr; }
      .build-picker-secondary-actions { flex-direction: column; gap: 10px; align-items: center; }
    }

    /* ─── Configurator landing hero (product banner + gradient divider) ──
       Deliberately breaks from the site's sharp-corner/black-accent system
       - this screen is scoped to look like the reference build-picker
       design (rounded corners, indigo CTA, pastel tiles), matched exactly
       per the design brief. Nothing outside #build-picker-view is touched. */
    .config-landing { position: relative; z-index: 1; padding-top: 132px; }
    .config-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 56px; }
    .config-hero-text { flex: 1 1 440px; max-width: 480px; }
    .config-hero-title { font-family: var(--font); font-size: clamp(1.875rem, 3.6vw, 2.625rem); font-weight: 700; line-height: 1.15; color: #16181D; margin: 0 0 16px; letter-spacing: -0.01em; }
    .config-hero-sub { font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); margin: 0 0 28px; max-width: 420px; }
    .config-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .config-hero-btn { font-family: var(--font); font-size: 0.875rem; font-weight: 600; padding: 14px 26px; border-radius: 0; cursor: pointer; border: 1px solid transparent; transition: none; }
    .config-hero-btn-primary { background: #14141A; color: #fff; }
    .config-hero-btn-primary:hover { background: #3A3A3A; }
    .config-hero-btn-secondary { background: #fff; color: #16181D; border-color: #D8DCE3; }
    .config-hero-media { flex: 1 1 420px; display: flex; justify-content: flex-end; }
    .config-hero-img { width: 100%; max-width: 560px; height: auto; display: block; }
    /* "Built Right Here in Mississauga" banner - same photo/overlay/title/
       feature-list pattern as the homepage's .wwd-canada section, reused
       here as a divider between the hero and the model grid below. */
    .config-mississauga-banner { position: relative; min-height: 560px; margin-top: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .config-mississauga-bg { position: absolute; inset: 0; z-index: 0; background-image: url('../Recources/100%20_%20canadian%20.jpg'); background-size: cover; background-position: center; }
    .config-mississauga-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.55); }
    .config-mississauga-content { position: relative; z-index: 2; text-align: center; padding: 100px 32px; width: 100%; }
    .config-mississauga-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0 0 48px; }
    .config-mississauga-features { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 56px; row-gap: 20px; justify-content: center; }
    .config-mississauga-feature { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
    .config-mississauga-feature svg { width: 18px; height: 18px; flex-shrink: 0; }
    .config-landing-body { padding: 56px 32px 88px; }
    /* New section right below the warranty band - "Start Building" (scrolls
       back up to the model grid) and "How It Works" (navigates away), reusing
       the same .config-hero-btn look as the top hero's two actions. */
    .config-bottom-cta { padding: 64px 32px; text-align: center; }
    .config-bottom-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .config-bottom-cta-actions .config-hero-btn { text-decoration: none; display: inline-flex; align-items: center; }
    @media (max-width: 768px) {
      .config-mississauga-banner { min-height: 0; }
      .config-mississauga-content { padding: 72px 24px; }
      .config-mississauga-features { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; }
      .config-mississauga-feature { justify-content: center; white-space: normal; }
    }
    @media (max-width: 860px) {
      .config-hero-inner { flex-direction: column; text-align: center; }
      .config-hero-text { max-width: 100%; }
      .config-hero-sub { margin-left: auto; margin-right: auto; }
      .config-hero-actions { justify-content: center; }
      .config-hero-media { order: -1; justify-content: center; }
      .config-hero-img { max-width: 320px; }
    }
    @media (max-width: 640px) { .config-landing { padding-top: 112px; } }

    /* ─── Configurator landing: feature cards ─────────────────────────────── */
    .config-features { padding: 8px 32px 72px; }
    .config-features-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .config-feature-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px 22px; }
    .config-feature-icon { display: inline-flex; width: 26px; height: 26px; margin-bottom: 14px; color: #6B7280; flex-shrink: 0; }
    .config-feature-icon svg { width: 100%; height: 100%; display: block; }
    .config-feature-card h3 { font-family: var(--font); font-size: 0.9375rem; font-weight: 700; color: #16181D; margin: 0 0 8px; }
    .config-feature-card p { font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }
    @media (max-width: 860px) { .config-features-grid { grid-template-columns: 1fr; } }

    /* ─── Showcase sections: picture placeholders, sized to match the
       homepage's .preset-showcase-media box (50/50 split, 560px min-height)
       so real photos/copy can drop in later without any layout shift. */
    .config-showcase { position: relative; overflow: hidden; }
    .config-showcase-inner { display: flex; min-height: 560px; align-items: stretch; }
    .config-showcase--reverse .config-showcase-inner { flex-direction: row-reverse; }
    .config-showcase-media { position: relative; flex: 1 1 50%; }
    .config-showcase-placeholder { width: 100%; height: 100%; min-height: 560px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 2px dashed rgba(255,255,255,0.15); color: rgba(255,255,255,0.35); font-family: var(--font); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
    .config-showcase-media img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; display: block; }
    .config-showcase-text { position: relative; flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; padding: 48px 64px; }
    /* Sits at the top of the text half, flush against the side that
       borders the picture - left edge for a normal section, right edge
       for a reversed one. */
    .config-showcase-logo { position: absolute; z-index: 2; top: 32px; left: 32px; width: 130px; height: auto; }
    .config-showcase--reverse .config-showcase-logo { left: auto; right: 32px; }
    .config-showcase-title { font-family: var(--font); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #fff; margin: 0 0 12px; }
    .config-showcase-desc { font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 420px; margin: 0; }
    .config-showcase--reverse .config-showcase-text { align-items: flex-end; text-align: right; padding-right: 32px; padding-left: 64px; }
    .config-showcase--reverse .config-showcase-desc { margin-left: auto; }
    /* Expanded text variant - fills the full text column instead of sitting
       in a narrow centered block. */
    .config-showcase-text--fill { padding: 64px; justify-content: center; }
    .config-showcase--reverse .config-showcase-text--fill { padding: 64px; }
    .config-showcase-text--fill .config-showcase-title { font-size: clamp(2rem, 4vw, 3rem); }
    .config-showcase-text--fill .config-showcase-desc { font-size: 1.125rem; max-width: none; }
    .config-showcase--1, .config-showcase--2, .config-showcase--3 { background: #000; }
    @media (max-width: 860px) {
      .config-showcase-inner, .config-showcase--reverse .config-showcase-inner { flex-direction: column; min-height: 0; }
      .config-showcase-media { min-height: 280px; }
      .config-showcase-placeholder { min-height: 280px; }
      .config-showcase-text { padding: 32px 24px; }
    }

    /* ─── Preset Detail Modal ──────────────────────────────────────────────── */
    .preset-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 210; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .preset-detail-overlay.open { opacity: 1; visibility: visible; }
    .preset-detail-modal { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 600px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .preset-detail-overlay.open .preset-detail-modal { transform: translateY(0); }
    .preset-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .preset-detail-title { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
    .preset-detail-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; transition: color var(--transition); display: flex; align-items: center; justify-content: center; }
    .preset-detail-close:hover { color: var(--text-primary); }
    .preset-detail-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
    .preset-detail-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
    .preset-detail-part { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .preset-detail-part:last-child { border-bottom: none; }
    .preset-detail-part-cat { font-family: var(--font); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); display: block; }
    .preset-detail-part-name { font-size: 0.8125rem; color: var(--text-primary); line-height: 1.3; }
    .preset-detail-part-price { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
    .preset-detail-total { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--accent-dim); border-radius: var(--radius); margin-top: 16px; border: 1px solid var(--border-strong); }
    .preset-detail-total-label { font-family: var(--font); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); }
    .preset-detail-total-price { font-family: var(--font); font-size: 1.125rem; font-weight: 700; color: var(--accent); }
    .preset-detail-footer { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
    .preset-detail-load-btn { flex: 1; padding: 12px; font-family: var(--font); font-size: 0.8125rem; font-weight: 700; color: var(--bg); background: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); }
    .preset-detail-load-btn:hover { background: #3A3A3A; }
    .preset-detail-cancel-btn { padding: 12px 20px; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); }
    .preset-detail-cancel-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }

    /* ─── Preset Detail: FPS / Uses / Pros-Cons ────────────────────────────── */
    .preset-detail-section-label { font-family: var(--font); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 10px; margin-top: 20px; display: block; }
    .preset-fps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .preset-fps-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; text-align: center; }
    .preset-fps-game { font-size: 0.6875rem; color: var(--text-secondary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .preset-fps-value { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--accent); }
    .preset-fps-unit { font-family: var(--font); font-size: 0.5625rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 2px; }
    .preset-uses-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
    .preset-use-pill { font-family: var(--font); font-size: 0.6875rem; font-weight: 500; padding: 5px 12px; border-radius: 20px; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-strong); }
    .preset-pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0; }
    .preset-pros-cons-col { }
    .preset-pros-cons-title { font-family: var(--font); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
    .preset-pros-cons-title.pros { color: var(--success); }
    .preset-pros-cons-title.cons { color: #EF4444; }
    .preset-pros-cons-title svg { width: 12px; height: 12px; flex-shrink: 0; }
    .preset-pros-cons-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .preset-pros-cons-item { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; padding: 6px 10px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }
    @media (max-width: 480px) {
      .preset-pros-cons-grid { grid-template-columns: 1fr; }
      .preset-fps-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ─── Add-ons ───────────────────────────────────────────────────────── */
    .accordion-category { border-bottom: 1px solid var(--border); }
    .accordion-category:last-child { border-bottom: none; }
    .accordion-category-header { display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; user-select: none; }
    .accordion-category-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .accordion-category-label { font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; }
    .accordion-category-count { font-family: var(--font); font-size: 0.6875rem; color: var(--text-secondary); }
    .accordion-category-arrow { margin-left: auto; flex-shrink: 0; transition: transform 0.3s ease; color: var(--text-secondary); }
    .accordion-category-header.active .accordion-category-arrow { transform: rotate(180deg); }
    .accordion-category-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .accordion-category-panel.open { max-height: 600px; }
    .accordion-category-items { display: flex; flex-direction: column; gap: 8px; padding-bottom: 0; }
    .accordion-category-panel.open .accordion-category-items { padding-bottom: 16px; }
    .accordion-category-selected { font-family: var(--font); font-size: 0.6875rem; color: var(--text-secondary); margin-left: 4px; }
    .accessory-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); user-select: none; border-left: 3px solid transparent; }
    .accessory-item:hover { border-color: var(--accent); }
    .accessory-item.selected { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
    .accessory-item input[type="checkbox"] { display: none; }
    .accessory-check { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
    .accessory-item.selected .accessory-check { background: var(--accent); border-color: var(--accent); }
    .accessory-item.selected .accessory-check::after { content: ''; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
    .accessory-img { width: 36px; height: 36px; object-fit: contain; background: var(--surface); flex-shrink: 0; padding: 4px; }
    .accessory-img-fallback { width: 36px; height: 36px; background: var(--surface); flex-shrink: 0; }
    .accessory-info { flex: 1; min-width: 0; }
    .accessory-name { font-size: 0.875rem; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .accessory-spec { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .accessory-price { font-family: var(--font); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
    .accessory-item.selected .accessory-price { color: var(--accent); }

    /* ─── Assembly Fee ──────────────────────────────────────────────────────── */
    .assembly-fee-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--surface-hover); border-radius: var(--radius); margin-bottom: 8px; }
    .assembly-fee-label { font-family: var(--font); font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
    .assembly-fee-price { font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
    .grand-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--accent-dim); border-radius: var(--radius); margin-bottom: 20px; border: 1px solid var(--border-strong); }
    .grand-total-label { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); }
    .grand-total-price { font-family: var(--font); font-size: 1.25rem; font-weight: 700; color: var(--accent); }



    /* ─── Power Estimator ───────────────────────────────────────────────────── */
    .power-estimator { margin-top: 20px; padding: 16px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius); }
    .power-estimator-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .power-estimator-title { font-family: var(--font); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
    .power-estimator-title svg { flex-shrink: 0; }
    .power-watt-badge { font-family: var(--font); font-size: 0.875rem; font-weight: 700; color: var(--text-primary); transition: color 0.35s ease; }
    .power-watt-badge.warn { color: #F59E0B; }
    .power-watt-badge.danger { color: #EF4444; }

    .power-breakdown { display: flex; flex-direction: column; gap: 4px; margin-top: 0; }
    .power-breakdown-row { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--text-secondary); }
    .power-breakdown-row span:last-child { font-family: var(--font); color: var(--text-primary); }
    .power-psu-note { font-size: 0.625rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
    .power-psu-note.warn { color: #F59E0B; }
    .power-psu-note.ok { color: var(--success); }


    /* ─── Buttons (page-specific additions; base .btn lives in styles.css) ──── */
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn-block { width: 100%; justify-content: center; }

    /* ─── Custom Part Input ─────────────────────────────────────────────────── */
    .custom-part-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
    .custom-part-section select,
    .custom-part-section input { margin-bottom: 8px; }
    .custom-part-section select { width: 100%; padding: 8px 10px; font-family: var(--font); font-size: 0.8125rem; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); appearance: auto; }
    .custom-part-section input[type="text"],
    .custom-part-section input[type="number"] { width: 100%; padding: 8px 10px; font-family: var(--font); font-size: 0.8125rem; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
    .custom-part-section input[type="number"] { width: 70px; }
    .custom-part-row { display: flex; gap: 8px; }

    /* Configurator Bottom Section */
    .configurator-bottom {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .bottom-left, .bottom-right { display: flex; flex-direction: column; min-width: 0; }

    /* Reset button styling */
    #reset-trigger {
      display: flex !important;
      flex-shrink: 0;
      width: auto;
      transition: opacity 0.2s ease, cursor 0.2s ease;
    }

    /* Lock button */
    #review-btn {
      flex: 1;
    }

    /* Reset modal popup - floats above the reset button */
    .reset-modal-popup {
      position: absolute;
      bottom: calc(100% + 8px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      min-width: 160px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 20;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .reset-modal-popup::after {
      content: '';
      position: absolute;
      top: 100%;
      right: 20px;
      border: 6px solid transparent;
      border-top-color: var(--border);
    }
    .reset-modal-popup.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Reset toast - "Build has been reset" + Undo, bottom-center */
    .reset-toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      z-index: 500;
      display: flex;
      align-items: center;
      gap: 16px;
      background: var(--accent);
      color: var(--bg);
      font-family: var(--font);
      font-size: 0.8125rem;
      font-weight: 500;
      padding: 12px 16px 12px 18px;
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      transform: translate(-50%, 16px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
    }
    .reset-toast.open {
      transform: translate(-50%, 0);
      opacity: 1;
      pointer-events: auto;
    }
    .reset-toast-undo {
      font-family: var(--font);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--bg);
      text-decoration: underline;
      text-underline-offset: 2px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .reset-toast-undo:hover { opacity: 0.8; }
    @media (max-width: 640px) {
      .configurator-bottom { grid-template-columns: 1fr; gap: 24px; }
      .reset-toast { left: 16px; right: 16px; transform: translateY(16px); }
      .reset-toast.open { transform: translateY(0); }
    }

    /* Custom Dropdown */
    .custom-dropdown { position: relative; width: 100%; margin-bottom: 8px; }
    .custom-dropdown select { display: none; }
    .dropdown-button { width: 100%; padding: 10px 14px; font-family: var(--font); font-size: 0.8125rem; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.15s ease; }
    .dropdown-button:hover { border-color: var(--text-secondary); }
    .dropdown-button.open { border-color: var(--accent); }
    .dropdown-arrow { pointer-events: none; transition: transform 0.2s ease; color: var(--text-secondary); }
    .dropdown-button.open .dropdown-arrow { transform: rotate(180deg); }
    .dropdown-menu {
      position: absolute; top: 100%; left: 0; right: 0;
      background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      max-height: 0; overflow: hidden; z-index: 10;
      padding: 0 4px;
    }
    /* max-height comfortably fits all 9 options; overflow-y:auto is a safety
       net so it scrolls (instead of hard-clipping) if a shorter viewport
       leaves less room below the button than that */
    .dropdown-menu.open { max-height: min(360px, 60vh); overflow-y: auto; padding: 4px; animation: dropdown-slide-down 0.3s ease-out; }
    .dropdown-option { padding: 9px 10px; cursor: pointer; transition: background 0.15s ease; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font); font-size: 0.8125rem; color: var(--text-primary); }
    .dropdown-option:hover { background: var(--surface); }
    .dropdown-option.selected { color: var(--accent); font-weight: 600; }
    .dropdown-option.selected::after {
      content: '';
      flex-shrink: 0;
      width: 12px; height: 8px;
      border-left: 2px solid var(--accent);
      border-bottom: 2px solid var(--accent);
      transform: rotate(-45deg) translateY(-2px);
    }

    /* ─── Payment ───────────────────────────────────────────────────────────── */
    .payment-section { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; }
    .payment-card { background: var(--surface); border: 1px solid var(--border); padding: 32px; margin-top: 32px; max-width: 600px; }
    .payment-card-title { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 16px; }
    .payment-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .payment-row:last-child { border-bottom: none; }
    .payment-label { font-family: var(--font); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
    .payment-value { font-size: 0.9375rem; color: var(--text-primary); font-weight: 500; }
    .payment-value a { color: var(--accent); }
    .payment-note { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-top: 16px; padding: 12px 16px; background: var(--accent-dim); border-radius: var(--radius); }
    .payment-steps { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
    .payment-step { display: flex; gap: 12px; align-items: flex-start; }
    .payment-step-num { font-family: var(--font); font-size: 0.6875rem; font-weight: 600; color: var(--accent); background: var(--accent-dim); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
    .payment-step-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
    .payment-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; font-family: var(--font); font-size: 0.6875rem; font-weight: 600; color: #818CF8; margin-bottom: 16px; }
    .payment-badge svg { flex-shrink: 0; }
    .calc-warning { display: none; margin-top: 16px; padding: 12px 16px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius); font-size: 0.8125rem; color: #F59E0B; line-height: 1.5; }
    .calc-warning.visible { display: flex; align-items: flex-start; gap: 8px; }
    .calc-warning svg { flex-shrink: 0; margin-top: 2px; }

    /* ─── Footer ────────────────────────────────────────────────────────────── */
    /* position/z-index/background kept (this page has absolutely-positioned
       overlays elsewhere that need the footer to stack above/paint opaque);
       border-top/padding and the old .footer-inner/-links/-social rules are
       dropped - the shared expanded footer in css/styles.css owns those now. */
    .footer { position: relative; z-index: 1; background: var(--bg); }

    /* ─── Modal ─────────────────────────────────────────────────────────────── */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px); transition: transform 0.3s ease; }
    .modal-overlay.active .modal { transform: translateY(0); }
    .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 0; flex-shrink: 0; }
    .modal-title { font-size: 1.25rem; }
    .modal-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color var(--transition); }
    .modal-close:hover { color: var(--text-primary); }
    .modal-body { padding: 24px 28px; flex: 1; overflow-y: auto; }
    .review-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
    .review-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg); border-radius: var(--radius); }
    .review-item-category { font-family: var(--font); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
    .review-item-name { font-size: 0.875rem; color: var(--text-primary); margin-top: 2px; }
    .review-item-price { font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
    .review-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--accent-dim); border-radius: var(--radius); margin-bottom: 20px; }
    .review-total-label { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); }
    .review-total-price { font-family: var(--font); font-size: 1.25rem; font-weight: 700; color: var(--accent); }
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-family: var(--font); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
    .form-input { width: 100%; padding: 10px 14px; font-family: var(--font); font-size: 0.9375rem; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition); }
    .form-input:focus { outline: none; border-color: var(--accent); }
    .form-input::placeholder { color: var(--text-secondary); }
    textarea.form-input { resize: vertical; min-height: 80px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .confirmation { text-align: center; padding: 20px 0; }
    .confirmation-icon { width: 64px; height: 64px; background: rgba(52,211,153,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
    .confirmation-title { font-size: 1.25rem; margin-bottom: 8px; }
    .confirmation-desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; }
    .confirmation-contact { background: var(--bg); border-radius: var(--radius); padding: 20px; text-align: left; }
    .confirmation-contact a { color: var(--text-primary); }

    /* ─── Dialog ────────────────────────────────────────────────────────────── */
    .dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
    .dialog-overlay.active { opacity: 1; visibility: visible; }
    .dialog { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); width: 100%; max-width: 420px; padding: 36px 32px; text-align: center; transform: scale(0.95); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
    .dialog-overlay.active .dialog { transform: scale(1); }
    .dialog-title { font-family: var(--font); font-size: 1.125rem; font-weight: 600; margin-bottom: 10px; }
    .dialog-desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 28px; }
    .dialog-actions { display: flex; gap: 12px; justify-content: center; }
    .dialog-actions .btn { min-width: 120px; justify-content: center; }

    /* ─── Desktop 2-column layout (tiles left, price panel right) ─────────────── */
    @media (min-width: 900px) {
      .config-grid { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
      .config-sidebar { position: sticky; top: 80px; }
      .tiles-grid { grid-template-columns: repeat(2, 1fr); }
      .presets-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ─── Responsive ────────────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .config-grid { grid-template-columns: 1fr; }
      .config-sidebar { position: static; }
      .presets-grid { grid-template-columns: 1fr 1fr; }
      .tiles-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      section { padding: 72px 0; }
      .container { padding: 0 16px; }
      /* Prevent horizontal clipping on mobile */
      html, body { overflow-x: hidden; }
      .configurator .section-label,
      .configurator .section-title,
      .configurator .section-desc { padding: 0 16px !important; }
      .presets-section { padding: 0 16px !important; }
      .config-grid { padding: 0 16px !important; }
      .config-sidebar { padding: 0; }
      .price-panel { padding: 20px 16px; }
      .step-content-inner { overflow-x: hidden; }
      .parts-list { overflow-x: hidden; }
      .part-card-name { word-break: break-word; white-space: normal; }
      .tile-preview-name { word-break: break-word; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
      .tile-preview-img, .tile-preview .part-card-img, .tile-preview .part-card-img-wrap, .tile-preview .part-card-img-fallback { width: 32px; height: 32px; }


      /* Tiles: single column, still big and tappable */
      .tiles-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .tile-btn { min-height: 140px; padding: 14px; gap: 8px; }
      .tile-icon-wrap { width: 34px; height: 34px; }
      .tile-icon-wrap svg { width: 18px; height: 18px; }
      .tile-label { font-size: 0.8125rem; }
      .tile-sublabel { font-size: 0.6875rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
      .tile-preview-img { width: 32px; height: 32px; }
      .tile-preview-name { font-size: 0.6875rem; }
      .tile-preview-price { font-size: 0.75rem; }

      /* Smaller part cards, images stay visible */
      .part-card { padding: 10px 12px; gap: 10px; }
      .part-card-img, .part-card-img-wrap, .part-card-img-fallback { width: 40px; height: 40px; }
      .part-card-name { font-size: 0.8125rem; }
      .part-card-price { font-size: 0.8125rem; }
      .part-card-check { width: 18px; height: 18px; border-radius: 4px; }
      .part-card.selected .part-card-check::after { width: 4px; height: 7px; border-width: 0 1.5px 1.5px 0; }

      /* Smaller step headers */
      .step-header { padding: 14px 16px; }
      .step-number { width: 24px; height: 24px; font-size: 0.625rem; }
      .step-label { font-size: 0.8125rem; }
      .step-sublabel { font-size: 0.6875rem; }
      .step-price { font-size: 0.8125rem; }
      .step-content-inner { padding: 0 16px 16px; }

      /* Browse all button (desktop only) */
      .step-browse-all-desktop { display: none; }

      .parts-grid { grid-template-columns: 1fr; }
      .drawer { max-width: 100%; }
      .form-row { grid-template-columns: 1fr; }
      .step-header { flex-wrap: wrap; }
      .presets-grid { grid-template-columns: 1fr; }

      /* Smaller configurator padding */
      .configurator { padding-top: 80px !important; }
      .config-steps { gap: 8px; }
      .config-step { border-radius: var(--radius); }

      /* On mobile: hide inline step panels entirely - parts are selected through the modal */
      .config-steps { display: none !important; }

      /* Mobile: stack configurator bottom section to single column */
      .configurator-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }
    /* ─── Entry Choice Gate (now just Build Picker's wrapper) ────────────────── */
    .entry-choice-hero { min-height: 100vh; box-sizing: border-box; padding: 140px 32px 80px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
    .entry-choice-hero-inner { max-width: 1280px; width: 100%; margin: 0 auto; text-align: center; }
    .entry-choice-hero .section-desc { max-width: 480px; }
    @media (max-width: 720px) { .entry-choice-hero { padding: 120px 20px 60px; } }

    /* Configurator screen transitions - same fade+blur+slide as .qa-question
       (Auto Build wizard questions), applied to the entry/method/preset/
       picking/auto-build screens themselves. See switchConfigScreen(). */
    .config-screen-leaving { animation: qaFadeBlurOut 0.25s ease both; }
    .config-screen-entering { animation: qaFadeBlurIn 0.35s ease both; }
    @media (prefers-reduced-motion: reduce) {
      .config-screen-leaving, .config-screen-entering { animation: none; }
    }

    .change-method-link { background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); padding: 0; margin: 0 0 20px; display: inline-flex; align-items: center; gap: 4px; transition: color var(--transition); }
    .change-method-link:hover { color: var(--accent); }

    #advanced-picking-view, #auto-build-view { opacity: 0; animation: viewFadeIn 0.4s ease both; }
    @keyframes viewFadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* ─── Question / Step animation (shared: Auto Build wizard + submit-time questions) ── */
    @keyframes qaFadeBlurIn { from { opacity: 0; filter: blur(10px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
    @keyframes qaFadeBlurOut { from { opacity: 1; filter: blur(0); transform: translateY(0); } to { opacity: 0; filter: blur(10px); transform: translateY(-8px); } }
    .qa-question { animation: qaFadeBlurIn 0.35s ease both; }
    .qa-question.qa-leaving { animation: qaFadeBlurOut 0.25s ease both; }
    @media (prefers-reduced-motion: reduce) {
      .qa-question { animation: none; }
      .qa-question.qa-leaving { animation: none; }
      #advanced-picking-view, #auto-build-view { animation: none; opacity: 1; }
    }

    .qa-progress { font-family: var(--font); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 12px; }
    .qa-progress-dots { display: flex; gap: 6px; margin-bottom: 16px; }
    .qa-progress-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background var(--transition); }
    .qa-progress-dot.active { background: var(--accent); }
    .qa-title { font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
    .qa-options { display: flex; flex-direction: column; gap: 10px; }
    .qa-option { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: all var(--transition); text-align: left; font: inherit; font-size: 0.875rem; color: var(--text-primary); }
    .qa-option:hover { border-color: var(--accent); }
    .qa-option.selected { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
    .qa-back-link { background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); padding: 0; margin-top: 16px; }
    .qa-back-link:hover { color: var(--accent); }

    .auto-build-result { text-align: center; padding: 24px 0; }
    .auto-build-result-name { font-family: var(--font); font-size: 1.25rem; font-weight: 700; color: var(--accent); margin: 8px 0 12px; }

    /* Pre-part-picker screens (build picker + auto build wizard) use Profa
       throughout, overriding the site-wide Sifonn display font used by
       .section-title elsewhere. */
    #build-picker-view .section-title,
    #auto-build-view .section-title { font-family: var(--font); }