/* =============================================================================
   Kinetic Ultra — Build Your Rig (Bay Dock System)

   Implements design 06c. Each bay is a compartmented product search panel
   with 4 mutually-exclusive states: open / locked / collapsed / optional.
   The right-side BUILD MANIFEST is a sticky glassmorphism aggregator.

   No 1px borders. Tonal layering only. Neon underglows for active state.
   ========================================================================== */

.k-build {
    /* Scoped tonal stack — extends the global tokens that don't define
       surface-1/3/4 in :root or the light mode palette. We keep these
       contained to .k-build so we don't pollute other components. */
    --kb-page:        var(--k-background);
    --kb-card:        var(--k-surface-2);
    --kb-card-deep:   #0e0e13;
    --kb-card-lift:   #1f1f26;
    --kb-card-lift-2: #25252d;
    --kb-chip:        rgba(255, 255, 255, 0.04);
    --kb-chip-hover:  rgba(0, 212, 255, 0.10);
    --kb-divider:     rgba(255, 255, 255, 0.05);
    --kb-thumb-bg:    rgba(0, 0, 0, 0.3);
    --kb-shadow-glow-cyan:   rgba(0, 212, 255, 0.4);

    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    background: var(--kb-page);
    color: var(--k-text);
    position: relative;
    isolation: isolate;
}

/* Light mode — re-tone the build palette for legible cards on a light bg.
   Cards become bright-white "lifted" surfaces over a light grey page,
   chips invert to soft grey, and thumbs use a warm-grey wash that keeps
   product images readable without a dark gradient. */
html[data-theme="light"] .k-build {
    --kb-page:        #F4F4F8;
    --kb-card:        #FFFFFF;
    --kb-card-deep:   #ECECF1;
    --kb-card-lift:   #FFFFFF;
    --kb-card-lift-2: #F8F8FC;
    --kb-chip:        #ECECF1;
    --kb-chip-hover:  rgba(0, 178, 218, 0.10);
    --kb-divider:     rgba(14, 14, 19, 0.06);
    --kb-thumb-bg:    #ECECF1;
    --kb-shadow-glow-cyan: rgba(0, 178, 218, 0.25);
}

/* Light leak — cyan upper-left, violet lower-right */
.k-build::before,
.k-build::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(120px);
}
.k-build::before {
    top: 0; left: 0;
    width: 480px; height: 480px;
    background: rgba(0, 212, 255, 0.08);
}
.k-build::after {
    bottom: 0; right: 0;
    width: 520px; height: 520px;
    background: rgba(123, 97, 255, 0.06);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.k-build__hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

.k-build__hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    letter-spacing: -0.02em;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0;
    color: var(--k-text);
}
.k-build__hero-accent {
    background: linear-gradient(120deg, var(--k-violet), var(--k-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.k-build__hero-subtitle {
    margin: 1rem 0 0;
    color: var(--k-muted);
    font-size: 0.875rem;
    max-width: 36rem;
    line-height: 1.55;
}

/* Strip of 13 mini progress bars */
.k-build__strip {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    min-width: 280px;
}
.k-build__strip-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--k-muted);
    font-weight: 600;
}
.k-build__strip-bars {
    display: flex;
    gap: 4px;
}
.k-build__strip-bar {
    position: relative;
    width: 18px;
    height: 36px;
    border-radius: 3px;
    background: var(--kb-divider);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.k-build__strip-bar-fill {
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: linear-gradient(180deg, var(--k-cyan), var(--k-violet));
    transition: height 240ms ease;
}
.k-build__strip-bar.is-locked .k-build__strip-bar-fill { height: 100%; }
.k-build__strip-bar-code {
    position: relative;
    font-size: 8px;
    letter-spacing: 0.06em;
    color: var(--k-muted);
    font-weight: 700;
    margin-bottom: 2px;
    z-index: 1;
}
.k-build__strip-bar.is-locked .k-build__strip-bar-code {
    color: var(--kb-page);
}
.k-build__strip-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--k-cyan);
    letter-spacing: 0.04em;
}

/* ── Two-column grid ─────────────────────────────────────────────────────── */

.k-build__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .k-build__grid {
        /* `minmax(0, 1fr)` au lieu de `1fr` : sans le `minmax(0, ...)`, la
           track grid prend la TAILLE INTRINSÈQUE MIN des enfants. Comme
           keen-slider pose un `min-width: <pixels>` inline sur ses slides
           au moment de son init, l'intrinsèque min de `.k-build__bays`
           atteignait ~6138px → toute la page explosait en scroll horizontal
           sur mobile (scrollWidth = 6154 vs viewport 390). */
        grid-template-columns: minmax(0, 1fr);
    }
    /* Les enfants direct du grid (`.k-build__bays`, `.k-build__manifest-wrap`)
       ont `min-width: auto` par défaut quand ils sont grid items → ils ne
       peuvent pas shrink sous leur taille de contenu. On bascule à 0 pour
       que la chaîne de min-content (slides keen-slider à 1215px) ne force
       plus la grille à s'étendre. */
    .k-build__bays,
    .k-build__manifest-wrap {
        min-width: 0;
    }
    /* Même chose sur les conteneurs internes qui hébergent le keen-slider :
       sans `min-width: 0` ils héritent du min-content et débordent. */
    .k-build__bay,
    .k-build__bay-form,
    .k-build__form,
    .k-build__filter-row,
    .k-build__results,
    .k-build__slider-wrap {
        min-width: 0;
    }
    /* Light leaks décoratifs : 480 × 480 et 520 × 520 dépassent le viewport
       sous 520px → ils créent un scroll horizontal global (scrollWidth = 480
       au lieu de 390). En mobile on les contraint à 60vw — ça reste un halo
       cyan/violet ambiant mais ne déborde plus. */
    .k-build::before  { width: 60vw; height: 60vw; }
    .k-build::after   { width: 65vw; height: 65vw; }
}

/* ── Section header ──────────────────────────────────────────────────────── */

.k-build__section + .k-build__section { margin-top: 2.5rem; }

.k-build__section-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.k-build__section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--k-cyan);
    font-weight: 700;
    margin: 0;
}
.k-build__section-count {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--k-muted);
    text-transform: uppercase;
}

/* ── Bay card — common ──────────────────────────────────────────────────── */

.k-build__bay-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-build__bay {
    position: relative;
    background: var(--kb-card);
    border-radius: 12px;
    overflow: hidden;
    transition: background-color 200ms ease;
}
.k-build__bay--open    { background: var(--kb-card); }
.k-build__bay--locked  { background: var(--kb-card); }
.k-build__bay--collapsed { background: var(--kb-card); }
.k-build__bay--optional {
    background: transparent;
    outline: 2px dashed rgba(118, 116, 123, 0.15);
    outline-offset: -2px;
}

/* The bay clips its rounded corners + neon underglow with overflow:hidden,
   which also clips the brand search popover — with many brands the popover
   exceeds the bay box and gets cut off, making the filter unusable. While a
   popover is open, let that bay overflow and stack above the following bays.
   Restored to clipped the instant the popover closes. */
.k-build__bay:has(.k-build__chip-popover:not([hidden])) {
    overflow: visible;
    z-index: 5;
}

/* Neon underglow per state */
.k-build__bay--open::before,
.k-build__bay--locked::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 60px;
    pointer-events: none;
    opacity: 0.5;
    border-radius: 12px 12px 0 0;
}
.k-build__bay--open::before    { background: linear-gradient(180deg, rgba(123, 97, 255, 0.18), transparent); }
.k-build__bay--locked::before  { background: linear-gradient(180deg, rgba(0, 212, 255, 0.18), transparent); }

/* ── Bay header strip ────────────────────────────────────────────────────── */

.k-build__bay-header {
    display: grid;
    grid-template-columns: 3px 56px 32px 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    position: relative;
}

.k-build__bay-accent {
    width: 3px;
    align-self: stretch;
    border-radius: 3px;
    background: var(--k-cyan);
    transition: background-color 200ms;
}
.k-build__bay--open    .k-build__bay-accent { background: var(--k-violet); }
.k-build__bay--locked  .k-build__bay-accent { background: var(--k-cyan); }
.k-build__bay--collapsed .k-build__bay-accent { background: var(--kb-divider); }
.k-build__bay--optional .k-build__bay-accent { display: none; }

.k-build__bay-deck {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: rgba(118, 116, 123, 0.4);
    letter-spacing: -0.04em;
}

.k-build__bay-icon {
    width: 28px;
    height: 28px;
    color: var(--k-muted);
    transition: color 200ms;
}
.k-build__bay-icon svg { width: 100%; height: 100%; }
.k-build__bay--open    .k-build__bay-icon { color: var(--k-violet); }
.k-build__bay--locked  .k-build__bay-icon { color: var(--k-cyan); }

.k-build__bay-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.k-build__bay-cat {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--k-text);
    font-weight: 600;
}
.k-build__bay-status {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--k-muted);
    text-transform: uppercase;
}
.k-build__bay-status--locked { color: var(--k-green); }
.k-build__bay--locked .k-build__bay-status--empty { display: none; }
.k-build__bay--locked .k-build__bay-status--locked { display: inline; }

.k-build__bay-pill {
    font-size: 9px;
    letter-spacing: 0.16em;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}
.k-build__bay-pill--open   { background: rgba(123, 97, 255, 0.15); color: var(--k-violet); }
.k-build__bay-pill--locked { background: rgba(0, 212, 255, 0.15); color: var(--k-cyan); }
.k-build__bay--locked .k-build__bay-pill--open   { display: none; }
.k-build__bay--locked .k-build__bay-pill--locked { display: inline; }
.k-build__bay--collapsed .k-build__bay-pill,
.k-build__bay--optional  .k-build__bay-pill { display: none; }

.k-build__bay-toggle {
    background: transparent;
    border: 0;
    color: var(--k-muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 200ms, background 200ms;
}
.k-build__bay-toggle:hover { color: var(--k-cyan); background: rgba(0, 212, 255, 0.08); }
.k-build__bay-toggle-open  { display: none; }
.k-build__bay-toggle-close { display: none; }
.k-build__bay--collapsed .k-build__bay-toggle-open  { display: inline; }
.k-build__bay--open      .k-build__bay-toggle-close { display: inline; }
.k-build__bay--locked    .k-build__bay-toggle,
.k-build__bay--optional  .k-build__bay-toggle { display: none; }

/* ── STATE B — locked product summary ───────────────────────────────────── */

.k-build__bay-locked {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0 1.25rem 1.25rem;
}
.k-build__locked-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--kb-thumb-bg);
}
.k-build__locked-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.k-build__locked-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--k-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.k-build__locked-spec {
    font-size: 0.75rem;
    color: var(--k-muted);
    letter-spacing: 0.04em;
}
.k-build__locked-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--k-cyan);
}
.k-build__locked-actions { display: flex; gap: 0.5rem; }
.k-build__locked-stock {
    grid-column: 2 / -1;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--k-green);
    text-transform: uppercase;
}

/* ── STATE C — optional bay ─────────────────────────────────────────────── */

.k-build__bay-optional {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.k-build__optional-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.1);
    color: var(--k-cyan);
    display: grid;
    place-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.k-build__optional-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    color: var(--k-text);
}
.k-build__optional-desc {
    font-size: 0.75rem;
    color: var(--k-muted);
    margin: 0;
    max-width: 28rem;
}
.k-build__optional-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* ── STATE A — query form ───────────────────────────────────────────────── */

.k-build__bay-form {
    padding: 0 1.25rem 1.25rem;
}

.k-build__form {
    background: var(--kb-card-deep);
    border-radius: 10px;
    padding: 1.25rem;
}

.k-build__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
}
.k-build__filter-row + .k-build__filter-row { margin-top: 1rem; }
.k-build__filter-row--attrs {
    border-radius: 8px;
    padding-top: 1rem;
}

.k-build__filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.k-build__filter-group--price { min-width: 180px; }
.k-build__filter-group--sort  { min-width: 140px; }

.k-build__filter-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--k-muted);
    font-weight: 600;
}

.k-build__chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.k-build__chip {
    background: var(--kb-chip);
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    color: var(--k-muted);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 200ms, color 200ms, box-shadow 200ms;
}
.k-build__chip:hover {
    background: var(--kb-chip-hover);
    color: var(--k-cyan);
}
.k-build__chip[aria-pressed="true"] {
    background: rgba(0, 212, 255, 0.15);
    color: var(--k-cyan);
    box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.4);
}

/* ── Chip-list overflow patterns ────────────────────────────────────────── */

/* Collapsible: top N + "+ X" toggle that reveals a tail row in the same flow */
.k-build__chip-list--collapsible { position: relative; }
.k-build__chip-tail {
    display: contents; /* lets the chips flow inside the parent's wrap layout */
}
.k-build__chip-tail[hidden] { display: none; }

/* When expanded, cap the inline tail so a long value list (e.g. many
   distinct attribute terms) scrolls instead of flooding the shared
   attribute row and shoving sibling filter groups around. */
.k-build__chip-list--collapsible:has(.k-build__chip-more[aria-expanded="true"]) {
    max-height: 124px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--kb-divider) transparent;
}
.k-build__chip-list--collapsible::-webkit-scrollbar { width: 6px; }
.k-build__chip-list--collapsible::-webkit-scrollbar-thumb {
    background: var(--kb-divider);
    border-radius: 999px;
}

.k-build__chip-more {
    background: var(--kb-chip);
    color: var(--k-violet);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.k-build__chip-more[aria-expanded="true"] {
    background: rgba(123, 97, 255, 0.15);
    color: var(--k-violet);
    box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.4);
}
.k-build__chip-more:hover {
    background: rgba(123, 97, 255, 0.10);
    color: var(--k-violet);
}

/* Searchable: row of selected pills + trigger + popover with search */

/* Give the brand group a stable width so the absolutely-positioned popover
   (spanning left:0/right:0 of the list) keeps a sane size regardless of how
   many sibling filters compete in the universal flex row. */
.k-build__filter-group:has(.k-build__chip-list--searchable) {
    flex: 1 1 240px;
    min-width: 220px;
    max-width: 380px;
}

.k-build__chip-list--searchable {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    position: relative;
}

.k-build__chip-selected-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 28px;
    /* Cap to ~2 rows then scroll, so selecting many brands never grows the
       bay form and pushes the results panel down. */
    max-height: 68px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--kb-divider) transparent;
}
.k-build__chip-selected-row::-webkit-scrollbar { width: 6px; }
.k-build__chip-selected-row::-webkit-scrollbar-thumb {
    background: var(--kb-divider);
    border-radius: 999px;
}
.k-build__chip-placeholder {
    font-size: 11px;
    color: var(--k-muted);
    letter-spacing: 0.04em;
    padding: 6px 0;
}

.k-build__chip-selected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    cursor: pointer;
}
.k-build__chip-selected span {
    color: var(--k-cyan);
    font-weight: 700;
    margin-left: 2px;
}
.k-build__chip-selected:hover {
    background: rgba(255, 113, 108, 0.12);
    color: var(--k-danger, #ff716c);
    box-shadow: inset 0 0 0 1px rgba(255, 113, 108, 0.35);
}
.k-build__chip-selected:hover span { color: var(--k-danger, #ff716c); }

.k-build__chip-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--kb-chip);
    color: var(--k-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.k-build__chip-search-trigger svg { width: 14px; height: 14px; }
.k-build__chip-search-trigger:hover,
.k-build__chip-search-trigger[aria-expanded="true"] {
    background: var(--kb-chip-hover);
    color: var(--k-cyan);
}

.k-build__chip-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    padding: 0.75rem;
    background: var(--kb-card);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--kb-divider);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    animation: kBuildPopoverIn 160ms ease-out;
}
@keyframes kBuildPopoverIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="light"] .k-build__chip-popover {
    box-shadow: 0 16px 40px rgba(14, 14, 19, 0.16), 0 0 0 1px var(--kb-divider);
}

.k-build__chip-search {
    background: var(--kb-card-deep);
    border: 0;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    color: var(--k-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    outline: none;
    transition: box-shadow 200ms;
}
.k-build__chip-search::placeholder { color: var(--k-muted); }
.k-build__chip-search:focus {
    box-shadow: inset 0 0 0 1px var(--k-cyan), 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.k-build__chip-popover-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow-y: auto;
    padding-right: 4px;
    /* Keep the search input above sticky inside the popover height. */
    max-height: 220px;
}
.k-build__chip-popover-list::-webkit-scrollbar { width: 6px; }
.k-build__chip-popover-list::-webkit-scrollbar-thumb {
    background: var(--kb-divider);
    border-radius: 999px;
}

.k-build__chip-popover-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--k-muted);
    letter-spacing: 0.04em;
}

/* Hide chips that don't match the live search query. */
.k-build__chip-popover-list .k-build__chip[hidden] { display: none; }

/* Price slider mini */
.k-build__price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--kb-card-lift);
    border-radius: 8px;
    padding: 6px 10px;
}
.k-build__price-input {
    background: transparent;
    border: 0;
    color: var(--k-text);
    width: 60px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    outline: none;
}
.k-build__price-input::placeholder { color: rgba(172, 170, 177, 0.5); }
.k-build__price-sep { color: var(--k-muted); font-size: 0.75rem; }

/* Sort */
.k-build__sort {
    background: var(--kb-card-lift);
    border: 0;
    color: var(--k-text);
    border-radius: 8px;
    padding: 8px 28px 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23acaab1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    cursor: pointer;
}

/* Reset link */
.k-build__reset {
    background: transparent;
    border: 0;
    color: var(--k-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: color 200ms;
}
.k-build__reset:hover { color: var(--k-cyan); }

/* ── Results carousel ───────────────────────────────────────────────────── */

.k-build__results {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.875rem;
    min-height: 200px;
}
.k-build__results-state {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--k-muted);
    font-size: 0.8rem;
    padding: 2rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.k-build__results-state--unconfigured {
    background: rgba(123, 97, 255, 0.06);
    border-radius: 10px;
    color: var(--k-violet);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.5;
    font-size: 0.85rem;
}

.k-build__product {
    background: var(--kb-card-lift);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background 200ms;
    position: relative;
}
.k-build__product:hover {
    background: var(--kb-card-lift-2);
}
.k-build__product-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--kb-thumb-bg);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.k-build__product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.k-build__product-thumb-placeholder {
    color: var(--k-muted);
    font-size: 24px;
}
.k-build__product-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--k-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.k-build__product-spec {
    font-size: 0.7rem;
    color: var(--k-muted);
    letter-spacing: 0.04em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.k-build__product-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--k-cyan);
}
.k-build__product-stock {
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--k-green);
    text-transform: uppercase;
}
.k-build__product-stock--out { color: var(--k-danger, #ff716c); }
.k-build__product-lock {
    margin-top: 0.4rem;
    width: 100%;
    background: var(--k-cyan);
    color: var(--kb-page);
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 200ms, transform 100ms;
}
.k-build__product-lock:hover {
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.4);
}
.k-build__product-lock:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.k-build__results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.7rem;
    color: var(--k-muted);
    letter-spacing: 0.06em;
}
.k-build__results-narrow {
    color: var(--k-cyan);
    text-decoration: none;
}
.k-build__results-narrow:hover { text-decoration: underline; }

/* ── State visibility switching ──────────────────────────────────────────── */
/* Default: every state-specific panel is hidden. Only the parent bay state
   class (k-build__bay--<state>) reveals the matching panel. The default
   display values must match each panel's intrinsic layout (the panels
   themselves declare grid/flex on their own selectors above). */

.k-build__bay-form,
.k-build__bay-locked,
.k-build__bay-optional { display: none; }

.k-build__bay--open     .k-build__bay-form     { display: block; }
.k-build__bay--locked   .k-build__bay-locked   { display: grid; }
.k-build__bay--optional .k-build__bay-optional { display: flex; }
.k-build__bay--optional .k-build__bay-header   { display: none; }

/* ── BUILD MANIFEST sticky ───────────────────────────────────────────────── */

.k-build__manifest-wrap {
    position: sticky;
    top: 100px;
}

.k-build__manifest {
    padding: 1.5rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.k-build__manifest-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.k-build__manifest-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--k-text);
    margin: 0;
}
.k-build__manifest-id {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--k-muted);
}

.k-build__manifest-radial {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.k-build__manifest-radial svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.k-build__radial-track {
    stroke: var(--kb-divider);
}
.k-build__radial-fill {
    stroke: url(#k-build-radial-grad);
    stroke-linecap: round;
    transition: stroke-dasharray 320ms ease;
}
.k-build__radial-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.k-build__radial-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--k-cyan);
}
.k-build__radial-sub {
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--k-muted);
    text-transform: uppercase;
}

/* Section subtotals */
.k-build__manifest-sections {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.k-build__manifest-section { display: grid; gap: 4px; }
.k-build__manifest-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    color: var(--k-muted);
}
.k-build__manifest-section-name { color: var(--k-text); }
.k-build__manifest-section-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
}
.k-build__manifest-section-bar {
    height: 3px;
    background: var(--kb-divider);
    border-radius: 999px;
    overflow: hidden;
}
.k-build__manifest-section-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--k-cyan), var(--k-violet));
    border-radius: 999px;
    transition: width 240ms ease;
}
.k-build__manifest-section-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    color: var(--k-muted);
    text-align: right;
}

/* Total */
.k-build__manifest-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 1rem 0;
}
.k-build__manifest-total-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--k-muted);
    text-transform: uppercase;
}
.k-build__manifest-total-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--k-cyan);
    letter-spacing: -0.01em;
}
.k-build__manifest-savings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--k-green);
    background: rgba(0, 255, 136, 0.1);
    padding: 4px 8px;
    border-radius: 999px;
}

/* Compatibility check */
.k-build__manifest-compat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--k-muted);
    letter-spacing: 0.04em;
}
.k-build__manifest-compat-icon {
    color: var(--k-green);
    font-weight: 700;
}
.k-build__manifest-compat.is-ready { color: var(--k-green); }

/* PSU draw */
.k-build__manifest-psu { display: flex; flex-direction: column; gap: 6px; }
.k-build__manifest-psu-head {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--k-muted);
}
.k-build__manifest-psu-bar {
    height: 4px;
    background: var(--kb-divider);
    border-radius: 999px;
    overflow: hidden;
}
.k-build__manifest-psu-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--k-cyan), var(--k-violet));
    border-radius: 999px;
    transition: width 240ms ease;
}

/* CTAs */
.k-build__manifest-cta { display: flex; flex-direction: column; gap: 0.5rem; }
.k-build__cta-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}
.k-build__cta-add svg { width: 16px; height: 16px; }
.k-build__manifest-cta-note {
    font-size: 0.7rem;
    color: var(--k-muted);
    margin: 0 0 0.25rem;
    text-align: center;
}
.k-build__manifest-footer {
    margin: 0;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--k-muted);
    text-align: center;
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */

.k-build__trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 3rem;
    padding: 2rem;
    background: var(--kb-card-deep);
    border-radius: 12px;
}
@media (max-width: 700px) { .k-build__trust { grid-template-columns: 1fr; } }

.k-build__trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}
.k-build__trust-icon {
    width: 36px;
    height: 36px;
    color: var(--k-cyan);
}
.k-build__trust-icon svg { width: 100%; height: 100%; }
.k-build__trust-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--k-text);
}
.k-build__trust-desc {
    font-size: 0.8rem;
    color: var(--k-muted);
    margin: 0;
    line-height: 1.4;
}

/* ── Generic button helpers (scoped fallbacks if not present in core) ────── */

.k-build .k-btn-text {
    background: transparent;
    border: 0;
    color: var(--k-muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    transition: color 200ms;
}
.k-build .k-btn-text:hover { color: var(--k-cyan); }

.k-build .k-btn-ghost-violet {
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.4);
    color: var(--k-violet);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.k-build .k-btn-ghost-violet:hover {
    background: rgba(123, 97, 255, 0.1);
    color: var(--k-violet);
}

/* ── Keen Slider — wraps the bay results so any number of products ──────── */
/*    drag/swipes horizontally without bloating the bay vertically.         */

.k-build__slider-wrap {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.k-build__slider {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    cursor: grab;
}
.k-build__slider:active { cursor: grabbing; }

/* Each slide *is* the product card wrapper — keen-slider sets width/transform.
   The card itself is capped at 280px so a single-result bay doesn't stretch
   into a full-width banner. */
.k-build__slide {
    min-width: 0;
}
.k-build__slide .k-build__product {
    height: 100%;
    max-width: 280px;
}
.k-build__slider {
    align-items: stretch;
}

.k-build__slider-arrow {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--kb-card-lift);
    color: var(--k-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 200ms, color 200ms, opacity 200ms, transform 200ms;
}
.k-build__slider-arrow svg { width: 18px; height: 18px; }
.k-build__slider-arrow:hover {
    background: var(--kb-chip-hover);
    color: var(--k-cyan);
    transform: translateY(-1px);
}
.k-build__slider-arrow[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}
.k-build__slider-arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--kb-shadow-glow-cyan);
}

@media (max-width: 600px) {
    .k-build__slider-arrow { display: none; }
}

/* When the slider is active, override the previous "auto-fill grid" results
   layout — keen-slider needs `display: flex` on the .keen-slider element
   (set by its CSS) but our parent .k-build__results was a grid. Switch to
   block so the slider-wrap sits naturally inside. */
.k-build__results:has(.k-build__slider-wrap) {
    display: block;
    min-height: 240px;
}

/* ── Tablet / large phone (≤ 768px) ──────────────────────────────────────────
   - Hero passe en 1 col (le strip et le texte étaient écrasés côte-à-côte
     car le breakpoint suivant était à 480px : trou entre 768 et 480).
   - Padding global réduit pour récupérer de la largeur utile.
   - Strip prend toute la largeur avec scroll horizontal (13 bays = 282px de
     bars, ne tient pas sans scroll sur <440px utile).                       */
@media (max-width: 768px) {
    .k-build {
        padding: 1.5rem 1.25rem 3rem;
    }
    .k-build__hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }
    .k-build__strip {
        align-items: flex-start;
        min-width: 0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .k-build__strip::-webkit-scrollbar { display: none; }
    .k-build__strip-bars { flex-shrink: 0; }
}

/* ── iPhone 12 / phone portrait (≤ 480px) ────────────────────────────────────
   Cible primaire : iPhone 12 (390 × 844, DPR 3).
   Largeur utile après padding : 358px. Tous les composants doivent tenir
   ou scroller horizontalement de façon contrôlée. Touch targets ≥ 44px. */
@media (max-width: 480px) {
    .k-build {
        padding: 1rem 1rem 2.5rem;
    }

    /* Hero — typographie ajustée, sub-padding réduit */
    .k-build__hero {
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .k-build__hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
    }
    .k-build__hero-subtitle {
        font-size: 0.8125rem;
    }

    /* Section header — autorise wrap si le compteur passe sur 2 lignes */
    .k-build__section-header { flex-wrap: wrap; row-gap: 0.25rem; }
    .k-build__section-title  { font-size: 12px; }

    /* Bay header — masque deck (gros numéro), pill (état redondant avec
       l'accent violet/cyan et le contenu visible), iconifie le toggle.
       Grid: 3px accent · 32px icon · 1fr meta · 44px toggle (≥ touch target).
       Le numéro est déjà dans le strip sous "PROGRESSION DE L'ASSEMBLAGE". */
    .k-build__bay-header {
        grid-template-columns: 3px 32px minmax(0, 1fr) 44px;
        gap: 0.5rem;
        padding: 0.875rem 0.875rem;
    }
    .k-build__bay-deck   { display: none; }
    /* Spécificité 0-2-0 pour battre les overrides d'état
       (`.k-build__bay--locked .k-build__bay-status--locked { display: inline }`
       et équivalents) qui ré-affichent ces éléments sinon. Sans ce
       sélecteur composé, le pill « VERROUILLÉ » et le status
       « VERROUILLÉ · EXPÉDIÉ 24H » réapparaissent en état locked et
       chevauchent le titre / le toggle iconifié. */
    .k-build__bay .k-build__bay-status { display: none; }
    .k-build__bay .k-build__bay-pill   { display: none; }
    .k-build__bay-icon   { width: 24px; height: 24px; }

    /* Toggle iconifié : on masque le texte verbeux (`▶ OUVRIR LA BAY POUR
       INTERROGER` / `▼ FERMER LA BAY`) via font-size: 0, et on dessine
       l'arrow via un `::before` en pseudo-content qui reflète l'état du
       bay parent. L'aria-label sur le bouton reste lisible pour les
       lecteurs d'écran (« Open or close bay »). */
    .k-build__bay-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    .k-build__bay-toggle::before {
        font-size: 16px;
        font-family: 'Inter', sans-serif;
        line-height: 1;
    }
    .k-build__bay--collapsed .k-build__bay-toggle::before { content: "▶"; color: var(--k-cyan); }
    .k-build__bay--open      .k-build__bay-toggle::before { content: "▼"; color: var(--k-violet); }

    .k-build__bay-action {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    /* Bay form — padding intérieur réduit pour gagner de la largeur */
    .k-build__bay-form { padding: 0 0.875rem 0.875rem; }
    .k-build__form     { padding: 1rem; }

    /* Filter row — chaque groupe (SOCKET, CŒURS, TDP, PRIX, TRI) prend la
       largeur complète et s'empile verticalement. Sans cette règle générique,
       seuls --price et --sort stackaient, les pa_* (SOCKET/CŒURS/TDP)
       partageaient une ligne et leurs labels apparaissaient désalignés. */
    .k-build__filter-row { gap: 0.875rem; flex-direction: column; }
    .k-build__filter-group,
    .k-build__filter-group--price,
    .k-build__filter-group--sort {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    /* Results grid — 2 col compact (~165px chacun) au lieu d'1 col forcée
       par minmax(180px) qui était trop large pour le viewport iPhone */
    .k-build__results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
        min-height: 160px;
    }
    .k-build__product       { padding: 0.5rem; gap: 0.4rem; }
    .k-build__product-name  { font-size: 0.75rem; }
    .k-build__product-price { font-size: 0.875rem; }

    /* Locked bay — sur 358px utiles, les 3 boutons d'action (ÉCHANGER /
       DÉTAILS / RETIRER) totalisent ~220px. Si on les met dans la col 3
       d'un grid 3-col, ils forcent col 3 à 220px → le body se retrouve à
       ~13px et le nom produit n'est plus lisible. Solution : ligne 1 =
       thumb + body + price (col 3 dimensionnée par le prix seul), ligne 2
       = stock pleine largeur, ligne 3 = actions pleine largeur.
       `minmax(0, 1fr)` sur le body pour autoriser le shrink + la troncation
       du nom produit via ellipsis. */
    .k-build__bay-locked {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb body  price"
            "stock stock stock"
            "actions actions actions";
        column-gap: 0.75rem;
        row-gap: 0.5rem;
        padding: 0 1rem 1rem;
    }
    .k-build__locked-thumb   { grid-area: thumb; width: 56px; height: 56px; }
    .k-build__locked-body    { grid-area: body; min-width: 0; }
    .k-build__locked-price   { grid-area: price; align-self: center; font-size: 1rem; }
    .k-build__locked-stock   { grid-area: stock; }
    .k-build__locked-actions { grid-area: actions; justify-self: start; flex-wrap: wrap; }

    /* Manifest — sticky désactivé : sur 844px de haut avec header sticky,
       un panel sticky de 600px+ masquerait quasiment tous les bays.
       En mobile, le manifest défile naturellement en bas du flow. */
    .k-build__manifest-wrap     { position: static; top: auto; }
    .k-build__manifest          { padding: 1.25rem; gap: 1rem; }
    .k-build__manifest-radial   { width: 120px; height: 120px; }
    .k-build__manifest-total-value { font-size: 1.625rem; }

    /* Trust strip — padding plus modeste */
    .k-build__trust       { padding: 1.25rem; gap: 1.25rem; margin-top: 2rem; }
    .k-build__trust-item  { padding: 0; }

    /* Chip touch targets */
    .k-build__chip {
        min-height: 44px;
        font-size: 12px;
        padding: 0.625rem 0.875rem;
        touch-action: manipulation;
    }
}