/* ============================================
   BUILDER PAGE STYLES
   ============================================ */

.builder-page {
    padding: 24px 0 80px;
    background: var(--bg-primary);
}

@media (max-width: 768px) {
    .builder-page {
        padding: 16px 0 60px;
    }
}

/* Builder Header (Catalog Style) */
.builder-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-bottom: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem);
    border-bottom: 2px solid var(--accent);
}

.builder-header__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.builder-header__title {
    font-size: clamp(1.625rem, 3vw + 0.25rem, 2.25rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.builder-header__subtitle {
    font-size: clamp(0.9375rem, 1.5vw + 0.25rem, 1.0625rem);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.builder-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}

/* Legacy subtitle (voor backwards compatibility) */
.builder-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem) 0;
}

/* Breadcrumb in builder */
.builder-page .breadcrumb {
    margin-bottom: clamp(1rem, 2vw, 1.25rem);
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 1100px) {
    /* Restored layout: parts-list-column is position: relative, schematic
       is absolutely positioned in the upper-right. The header (build
       title + buttons), stats bar (compatibility line), share toolbar
       (clone + settings), warning banner and footer all stretch the FULL
       width because the parts-list spans the full container; the body
       (part-rows) gets right-padding so the rows flow alongside the
       schematic without overlapping it. This was the working state the
       user confirmed earlier. */
    .builder-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .parts-list-column {
        position: relative !important;
    }

    .schematic-column {
        position: absolute !important;
        /* Aligns with the top of the tabs row, just below the share-toolbar.
           If a compatibility warning appears, the tabs/body shift down by
           the warning-banner height — accepted minor cosmetic cost vs the
           grid-overflow issues we hit otherwise. */
        top: 220px !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: clamp(440px, 44vw, 592px) !important;
        margin: 0 !important;
        /* z-index keeps the schematic above any part-row content (Koop
           buttons etc.) at any zoom level — fixes 'schemtic onder de koop
           knop' overlap reported when zooming in. */
        z-index: 5;
    }

    /* Reserve right-side space in the rows that should sit alongside the
       schematic. Header, stats-bar, share-toolbar, warning-banner and
       footer all stretch FULL width because they're siblings of the
       schematic-column inside the same parts-list-column container.
       !important is required because _modals-popups.css and
       _price-history.css later set `padding: 0` / `padding: clamp(...)`
       (shorthand) which resets padding-right unless we force it.
       Tighter +0.5rem extra (was +1rem) so the parts list reaches
       further right toward the schematic. */
    .parts-list__tabs,
    .parts-list__body,
    .parts-list__history {
        padding-right: calc(clamp(440px, 44vw, 592px) + 0.5rem) !important;
    }
}

/* ============================================
   SCHEMATIC SCALER — GPU-accelerated transform: scale
   The Preact schematic has fixed pixel widths (ATX case 500 + airflow
   ≈ 640 natural). We use `transform: scale` (NOT `zoom`) because zoom
   is known to cause sub-pixel rounding distortions on Retina/Mac
   displays — components don't connect properly. transform: scale uses
   the GPU and renders crisp at any non-integer scale factor.

   Layout: position: absolute on the mount removes its 640px box from
   the parent's flow, so it can never push the page wider than the
   viewport. The scaler reserves the SCALED height via calc() so the
   page layout matches the visually-scaled schematic.
   ============================================ */

.schematic-column__content,
.schematic-column {
    /* Establish a container-query context so descendants can read the
       column's inline-size via 100cqi. Two selectors covers both the
       sidebar mode (≥1100px) and the collapsible-below mode (<1100px). */
    container-type: inline-size;
}

.pkb-schematic-scaler {
    width: 100%;
    /* Reserve scaled vertical space — natural height ≈ 850px (radiator +
       ATX case + components). At scale 1 scaler is 850px tall; at scale
       0.7 it's 595px — page flow matches visual. */
    height: calc(850px * min(1, calc(100cqi / 640px)));
    /* Containing block for the absolutely-positioned mount + safety
       clip in case anything bleeds horizontally. */
    position: relative;
    overflow: hidden;
}

.pkb-schematic-scaler .pkb-schematic-mount {
    /* Fixed natural width — matches the JSX render (case 500 + airflow). */
    width: 640px;
    /* Airflow indicators extend only to the LEFT of components (-left-12
       = -48px in JSX line 123). Padding-left: 48 exactly compensates so
       the case+airflow visual mass is balanced around the mount centre. */
    padding-left: 48px;
    box-sizing: border-box;
    /* Absolute positioning: the 640px box is removed from flow and CAN'T
       push the page wider. left:50% + translateX(-50%) is the classic
       horizontal-centring pattern for absolutely-positioned elements. */
    position: absolute;
    top: 0;
    left: 50%;
    /* GPU-accelerated scale — crisp on Retina, no zoom-style distortion.
       min(1, cqi/640) caps at 1 so wide columns show natural size. */
    transform: translateX(-50%) scale(min(1, calc(100cqi / 640px)));
    transform-origin: top center;
}

/* The xl: classes (xl:items-start, xl:text-left) have been removed from
   the JSX (schematic.jsx) so the wrapper is always items-center and the
   title always text-center — no override needed. */

/* Nudge the "PCBuildMate Blauwdruk" title down a bit so it doesn't sit
   on top of the share-toolbar's bottom border. JSX renders it as
   absolute top-0 of the schematic wrapper (which has pt-8). */
.pkb-schematic-mount h2 {
    top: 14px !important;
}

/* Parts List - Clean container (catalog style) */
.parts-list {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    position: relative;
}

/* Section Header (catalog style accent) */
.parts-list__section-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Title Row - Combined with buttons */
.parts-list__title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.parts-list__title-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.parts-list__title-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* Ghost Button */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn--ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn--xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Builds Dropdown - Base styles for desktop */
.builds-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    bottom: auto;
    width: 320px;
    max-height: min(500px, 70vh);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

/* Parent needs relative positioning */
.parts-list__title-right {
    position: relative;
}

.builds-dropdown__header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    flex: 0 0 auto;
}

.builds-dropdown__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-tertiary);
    -webkit-overflow-scrolling: touch;
}

.builds-dropdown__list::-webkit-scrollbar {
    width: 6px;
}

.builds-dropdown__list::-webkit-scrollbar-track {
    background: transparent;
}

.builds-dropdown__list::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 3px;
}

.builds-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}

.builds-dropdown__item:last-child {
    border-bottom: none;
}

.builds-dropdown__item:hover {
    background: var(--bg-tertiary);
}

.builds-dropdown__item--active {
    background: rgba(var(--accent-rgb), 0.1);
}

.builds-dropdown__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.builds-dropdown__dot--active {
    background: var(--accent);
}

.builds-dropdown__info {
    flex: 1;
    min-width: 0;
}

.builds-dropdown__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.builds-dropdown__date {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.builds-dropdown__price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    font-family: 'Monaco', 'Consolas', monospace;
}

.builds-dropdown__delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s;
}

.builds-dropdown__item:hover .builds-dropdown__delete {
    opacity: 1;
}

.builds-dropdown__delete:hover {
    background: var(--error-bg);
    color: var(--error);
}

.builds-dropdown__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.builds-dropdown__footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.builds-dropdown__count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.builds-dropdown__login {
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: none;
}

.builds-dropdown__login:hover {
    text-decoration: underline;
}

.builds-dropdown__clear-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--error);
    background: transparent;
    border: 1px solid var(--error);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.builds-dropdown__clear-all:hover {
    background: var(--error);
    color: white;
}

.builds-dropdown__clear-all svg {
    flex-shrink: 0;
}

/* Parts List Header (catalog toolbar style) */
.parts-list__header {
    padding: 0;
    margin-bottom: 0.5rem;
    border-bottom: none;
}

/* Build Title Row */
.parts-list__title-row {
    margin-bottom: 0.5rem;
}

.parts-list__title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.parts-list__title-display {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.parts-list__title-display:hover .parts-list__title-edit-icon {
    opacity: 1;
}

.parts-list__title-text {
    font-size: clamp(1.125rem, 2.5vw + 0.2rem, 1.25rem);
    font-weight: 600;
    color: var(--text-primary);
}

.parts-list__title-edit-icon {
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.15s;
}

.parts-list__title-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    outline: none;
    min-width: 200px;
}

.parts-list__meta-divider {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.parts-list__author,
.parts-list__date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.parts-list__author svg,
.parts-list__date svg {
    color: var(--text-muted);
}

/* Build title - left aligned, clean */
.parts-list__title {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: clamp(1.125rem, 2.5vw + 0.2rem, 1.375rem);
    font-weight: 600;
    padding: 0;
    margin: 0;
    text-align: left;
    transition: color 0.15s;
}

.parts-list__title-btn:hover .parts-list__title {
    color: var(--accent);
}

/* Share Toolbar */
.parts-list__share-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.share-toolbar__left,
.share-toolbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-toolbar__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Toast animations */
.toast-enter {
    transition: all 0.2s ease-out;
}

.toast-enter-start {
    opacity: 0;
    transform: translateY(10px);
}

.toast-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.toast-leave {
    transition: all 0.2s ease-in;
}

.toast-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.toast-leave-end {
    opacity: 0;
    transform: translateY(10px);
}

/* ============================================
   BUILD COMPLETE: Green button + tooltip
   ============================================ */

/* Button wrapper for tooltip positioning */
.pricing-btn-wrap {
    position: relative;
}

/* Green button state when all 8 components selected */
.btn--complete {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #000 !important;
    animation: btn-complete-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--complete:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@keyframes btn-complete-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Tooltip above the button */
.pricing-tooltip {
    position: absolute;
    bottom: calc(100% + 13px);
    right: -8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    padding: 10px 14px 10px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    z-index: 100;
    white-space: nowrap;
}

.pricing-tooltip__arrow {
    position: absolute;
    top: 100%;
    right: 28px;
    border: 6px solid transparent;
    border-top-color: var(--border);
}

.pricing-tooltip__icon {
    width: 30px;
    height: 30px;
    background: rgba(var(--success-rgb), 0.1);
    border: 1px solid rgba(var(--success-rgb), 0.18);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pricing-tooltip__icon svg {
    width: 15px;
    height: 15px;
    color: var(--success);
}

.pricing-tooltip__text {
    font-size: 13px;
    line-height: 1.35;
}

.pricing-tooltip__text strong {
    font-weight: 600;
    color: var(--text-primary);
}

.pricing-tooltip__text span {
    color: var(--text-secondary);
}

.pricing-tooltip__hl {
    color: var(--success) !important;
    font-weight: 700;
}

/* Tooltip enter transition */
.pricing-tooltip-enter {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-tooltip-enter-start {
    opacity: 0;
    transform: translateY(8px);
}

.pricing-tooltip-enter-end {
    opacity: 1;
    transform: translateY(0);
}

/* Tooltip leave transition */
.pricing-tooltip-leave {
    transition: all 0.2s ease-in;
}

.pricing-tooltip-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.pricing-tooltip-leave-end {
    opacity: 0;
    transform: translateY(8px);
}

/* Mobile: center tooltip */
@media (max-width: 640px) {
    .pricing-tooltip {
        right: 50%;
        transform: translateX(50%);
    }

    .pricing-tooltip__arrow {
        right: calc(50% - 6px);
    }

    .pricing-tooltip-enter-start {
        opacity: 0;
        transform: translateX(50%) translateY(8px);
    }

    .pricing-tooltip-enter-end {
        opacity: 1;
        transform: translateX(50%) translateY(0);
    }

    .pricing-tooltip-leave-start {
        opacity: 1;
        transform: translateX(50%) translateY(0);
    }

    .pricing-tooltip-leave-end {
        opacity: 0;
        transform: translateX(50%) translateY(8px);
    }
}

/* Alpine cloak */
[x-cloak] {
    display: none !important;
}

/* Alpine transition utilities */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.scale-90 {
    transform: scale(0.9);
}

.scale-100 {
    transform: scale(1);
}

/* =============================================================================
   SSR FALLBACK SECTION
   Shown when JavaScript is disabled, hidden when Alpine.js loads
   ============================================================================= */

.builder-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.builder-intro__lead {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0;
}

/* Example Builds Grid */
.builder-examples {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 768px) {
    .builder-examples {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .builder-examples {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Individual Build Card */
.builder-example {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.builder-example__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.builder-example__desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Parts Table */
.builder-example__parts {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.builder-example__parts td {
    padding: 0.5rem 0;
    vertical-align: top;
}

.builder-example__type {
    width: 30%;
    color: var(--text-muted);
    font-weight: 500;
}

.builder-example__name {
    color: var(--text-primary);
}

.builder-example__name a {
    color: var(--accent);
    text-decoration: none;
    transition: text-decoration 0.15s;
}

.builder-example__name a:hover {
    text-decoration: underline;
}

.builder-example__price {
    text-align: right;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-primary);
}

/* Total Row */
.builder-example__parts tfoot td {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    font-weight: 600;
}

.builder-example__parts tfoot .builder-example__type {
    color: var(--text-primary);
}

.builder-example__parts tfoot .builder-example__price {
    color: var(--accent);
}

/* Component Categories Grid */
.builder-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .builder-categories {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .builder-categories {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Category Link Card */
.builder-categories__link {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.builder-categories__link:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.builder-categories__label {
    font-weight: 500;
    color: var(--text-primary);
}

.builder-categories__desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* JavaScript Notice */
.builder-notice {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ================================================================
   RESPONSIVE - BUILDS DROPDOWN
   ================================================================ */

/* Backdrop for builds dropdown */
.builds-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

@media (max-width: 768px) {
    .builds-dropdown-backdrop {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
    }

    .builds-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100%;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    }

    .builds-dropdown__header {
        text-align: center;
        padding: 1rem;
        padding-top: 1.5rem;
        border-bottom: 1px solid var(--border);
        position: relative;
    }

    /* Add drag handle indicator */
    .builds-dropdown__header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
    }

    .builds-dropdown__list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .builds-dropdown__item {
        padding: 1rem;
    }

    .builds-dropdown__footer {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .builds-dropdown__footer-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ============================================
   Builder Extras Section (Additional Products)
   Uses same part-row structure as core components
   ============================================ */

.builder-extras-section {
    margin-top: var(--space-lg, 1.5rem);
    padding-top: var(--space-lg, 1.5rem);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 1.5rem);
}

/* Category grouping (Randapparatuur, Netwerk, Accessoires) */
.builder-category {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.builder-category__header {
    padding: var(--space-sm, 0.5rem) 0;
    margin-bottom: var(--space-xs, 0.25rem);
}

.builder-category__title {
    font-size: clamp(0.75rem, 1vw + 0.25rem, 0.875rem);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Extra product rows - same styling as core components, no special treatment */
.part-row--extra {
    /* No special styling - inherit everything from part-row */
}

/* Ensure extra rows have position relative for slot badge */
.part-row--extra .part-row__items {
    position: relative;
}

/* Hide slot badge for extra types - no compatibility tracking needed */
.part-row--extra .part-row__slot-badge {
    display: none;
}

/* Extra items should not have the card/box styling */
.part-row--extra.part-row--multi .part-row__item {
    border: none;
    background: transparent;
    padding: 0;
}

.part-row--extra.part-row--multi .part-row__item:hover {
    border: none;
    background: transparent;
}

/* Responsive adjustments for extras section */
@media (max-width: 640px) {
    .builder-extras-section {
        gap: var(--space-md, 1rem);
    }

    .builder-category__header {
        padding: var(--space-xs, 0.25rem) 0;
    }

    .builder-category__title {
        font-size: 0.6875rem;
    }
}

/* ============================================
   Builder Extras Section
   Matches part-row grid exactly
   ============================================ */

.builder-extras {
    margin-top: 0;
}

.builder-extras__categories {
    display: flex;
    flex-direction: column;
}

/* Each category row - matches part-row base styling */
.builder-extras__category {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.builder-extras__category:last-child {
    border-bottom: none;
}

/* Header - matches part-row__header width */
.builder-extras__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 80px;
    flex-shrink: 0;
}

/* Desktop: match part-row padding and layout */
@media (min-width: 1024px) {
    .builder-extras__category {
        padding: 1rem 1.25rem;
        gap: 1.5rem;
    }

    .builder-extras__header {
        width: 120px;
        min-width: 120px;
    }

    .builder-extras__chips {
        gap: 0.5rem;
    }
}

/* Icon - matches part-row__icon */
.builder-extras__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
}

.builder-extras__icon svg {
    width: 100%;
    height: 100%;
}

.builder-extras__category:hover .builder-extras__icon {
    color: var(--accent);
}

/* Label - matches part-row__label */
.builder-extras__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Chips - take remaining space */
.builder-extras__chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Chip button */
.builder-extras__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.builder-extras__chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.builder-extras__chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.builder-extras__chip--has-items {
    border-color: var(--accent);
    color: var(--accent);
}

/* Chip icon */
.builder-extras__chip-icon {
    display: flex;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.6;
}

.builder-extras__chip:hover .builder-extras__chip-icon,
.builder-extras__chip--has-items .builder-extras__chip-icon {
    opacity: 1;
}

.builder-extras__chip-icon svg {
    width: 100%;
    height: 100%;
}

.builder-extras__chip-label {
    white-space: nowrap;
}

/* Count badge */
.builder-extras__chip-count {
    min-width: 14px;
    height: 14px;
    padding: 0 0.25rem;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Add indicator */
.builder-extras__chip-add {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color 0.15s;
}

.builder-extras__chip:hover .builder-extras__chip-add {
    color: var(--accent);
}

/* Tablet - slightly smaller */
@media (max-width: 768px) {
    .builder-extras__category {
        gap: 1rem;
    }

    .builder-extras__header {
        width: 100px;
        min-width: 100px;
        gap: 0.375rem;
    }

    .builder-extras__icon {
        width: 18px;
        height: 18px;
    }

    .builder-extras__label {
        font-size: 0.65rem;
    }

    .builder-extras__chips {
        gap: 0.375rem;
    }
}

/* Mobile - label top, chips below (like core components) */
@media (max-width: 480px) {
    .builder-extras__category {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .builder-extras__header {
        width: auto;
        min-width: auto;
    }

    .builder-extras__chips {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .builder-extras__chip {
        padding: 0.3rem 0.5rem;
        font-size: 0.6875rem;
    }

    .builder-extras__chip-icon {
        width: 11px;
        height: 11px;
    }
}

/* ============================================
   BUILD COMPLETE CELEBRATION BANNER
   Slide-up banner when all 8 components selected
   ============================================ */

.build-complete-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    width: min(520px, calc(100% - 32px));
}

.build-complete-banner__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--success);
    border-left: 3px solid var(--success);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.build-complete-banner__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}

.build-complete-banner__close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.build-complete-banner__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-complete-banner__icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.build-complete-banner__content {
    flex: 1;
    min-width: 0;
}

.build-complete-banner__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.build-complete-banner__text {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0;
    line-height: 1.3;
}

.build-complete-banner__cta {
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s, transform 0.15s;
}

.build-complete-banner__cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Progress bar (auto-dismiss indicator) */
.build-complete-banner__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--success);
    border-radius: 0 0 12px 12px;
    animation: bcb-progress 10s linear forwards;
    opacity: 0.6;
}

@keyframes bcb-progress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Alpine.js x-transition classes — slide-up entrance */
.bcb-enter {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bcb-enter-start {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.bcb-enter-end {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Alpine.js x-transition classes — fade-out exit */
.bcb-leave {
    transition: all 0.3s ease-in;
}

.bcb-leave-start {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.bcb-leave-end {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .build-complete-banner {
        bottom: 16px;
    }

    .build-complete-banner__card {
        flex-wrap: wrap;
        padding: 14px 16px;
        gap: 10px;
    }

    .build-complete-banner__icon {
        width: 36px;
        height: 36px;
    }

    .build-complete-banner__icon svg {
        width: 18px;
        height: 18px;
    }

    .build-complete-banner__title {
        font-size: 14px;
    }

    .build-complete-banner__close {
        width: 32px;
        height: 32px;
    }

    .build-complete-banner__cta {
        width: 100%;
        text-align: center;
        margin-top: 4px;
        padding: 12px;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .bcb-enter,
    .bcb-leave {
        transition-duration: 0.01ms !important;
    }

    .build-complete-banner__progress {
        animation-duration: 0.01ms !important;
    }
}

/* ============================================
   SCHEMATIC COLUMN TOGGLE (visible only <1100px)
   ============================================ */

.schematic-column__toggle {
    display: none;
}

.schematic-column__content {
    /* always visible at desktop; collapse class only matters <1100px */
}

@media (max-width: 1099px) {
    .schematic-column {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        /* Gap from the parts-list footer ("Bekijk prijzen" row) above so
           the card doesn't sit flush against the buttons. */
        margin-top: clamp(0.75rem, 2vw, 1rem);
    }

    .schematic-column__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: clamp(0.9375rem, 1vw + 0.4rem, 1rem);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .schematic-column__toggle:hover {
        background: var(--bg-tertiary);
    }

    .schematic-column__toggle-text {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
    }

    .schematic-column__toggle-text svg {
        color: var(--accent);
    }

    .schematic-column__chevron {
        color: var(--text-muted);
        transition: transform 0.2s ease;
    }

    .schematic-column__chevron--open {
        transform: rotate(180deg);
    }

    .schematic-column__content {
        /* No horizontal padding at all on mobile — every pixel of the
           card width goes to the scaler so the schematic appears as
           large as possible. */
        padding: 0 0 clamp(1rem, 2.5vw, 1.25rem) 0;
        border-top: 1px solid var(--border);
    }

    .schematic-column__content--collapsed {
        display: none;
    }

    /* The mount's default padding-left (48px) compensates for the
       airflow indicators at md+ desktop where airflow extends -left-12
       = -48px. On mobile (<md = <768px) the JSX uses -left-8 = -32px,
       so padding-left: 32 matches the actual airflow extent and
       perfectly centres the case + airflow on the mount centreline. */
    .pkb-schematic-scaler .pkb-schematic-mount {
        padding-left: 32px;
        /* Smaller natural-width on mobile (case 500 + airflow 32 + a
           bit of breathing room ≈ 560) so the scale ratio (cqi/560) is
           higher and the case visually fills more of the column. */
        transform: translateX(-50%) scale(min(1, calc(100cqi / 560px)));
    }

    .pkb-schematic-scaler {
        /* Match the smaller natural-width so the reserved vertical
           space stays proportional. */
        height: calc(750px * min(1, calc(100cqi / 560px)));
    }
}