/*
 * DCS Components — redesign stylesheet (Phase 2 onward).
 *
 * Everything here is expressed in tokens from tokens.css: DECISIONS #1 means a
 * dark navy FRAME (utility bar, header, hero, accent bands, footer) around
 * LIGHT catalogue surfaces (products, categories, process). No !important, no
 * raw hex — if a value is not a token, it does not belong here.
 *
 * Breakpoints (tokens.css canon): narrow 560px · mid 980px · wide 1300px.
 */

/* ---- frame ------------------------------------------------------------- */

.v2 {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: var(--leading-body);
}

.v2 a { text-decoration: none; }

.v2-shell {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
}

/* utility bar */
.v2-utility {
    background: color-mix(in srgb, var(--ink) 86%, black);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--muted);
}

.v2-utility .v2-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 34px;
    gap: var(--space-3);
}

.v2-utility a { color: var(--muted); }
.v2-utility a:hover { color: var(--text); }
.v2-utility strong { color: var(--text); font-weight: 600; }

/* header */
.v2-header {
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
}

.v2-header .v2-shell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.v2-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.v2-logo-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: var(--text-sm);
    color: #ffffff;
    background: linear-gradient(135deg, var(--surface), var(--accent));
    border: 1px solid var(--line);
}

.v2-logo-copy { line-height: 1.15; }
.v2-logo-copy strong { display: block; color: var(--text); font-size: var(--text-base); letter-spacing: -0.02em; }
.v2-logo-copy small { display: block; color: var(--muted); font-size: var(--text-xs); }

.v2-search {
    flex: 1;
    display: flex;
    max-width: 560px;
}

.v2-search input {
    flex: 1;
    min-width: 0;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius-control) 0 0 var(--radius-control);
    padding: 11px 14px;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
}

.v2-search input::placeholder { color: var(--muted); }

.v2-search input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.v2-search button {
    background: var(--accent);
    color: #ffffff;
    border: 0;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    padding: 0 18px;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.v2-search button:hover { filter: brightness(1.1); }

.v2-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

.v2-nav a {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 9px 13px;
    border-radius: var(--radius-control);
}

.v2-nav a:hover { color: var(--text); background: var(--surface); }

.v2-nav .v2-nav-basket {
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: #ffffff;
    font-weight: 700;
}

.v2-nav .v2-nav-basket:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }

.v2-nav .v2-nav-basket span {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    background: var(--accent);
    color: #ffffff;
    border-radius: 999px;
    font-size: var(--text-xs);
    padding: 1px 6px;
    margin-left: 6px;
}

/* ---- hero (compact by design: products above the fold on 1080p) -------- */

.v2-hero {
    background:
        radial-gradient(60rem 22rem at 85% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
        var(--ink);
    border-bottom: 1px solid var(--line);
}

.v2-hero .v2-shell {
    padding: var(--space-5) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: var(--space-5);
    align-items: center;
}

.v2-hero h1 {
    margin: 0 0 10px;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    color: #ffffff;
}

.v2-hero p {
    margin: 0 0 18px;
    color: var(--muted);
    max-width: 54ch;
}

.v2-hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.v2-btn {
    display: inline-block;
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 12px 22px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
}

.v2-btn-primary { background: var(--accent); color: #ffffff; }
.v2-btn-primary:hover { filter: brightness(1.1); }

.v2-btn-ghost { border-color: var(--line); color: var(--text); }
.v2-btn-ghost:hover { border-color: var(--muted); }

.v2-hero-facts {
    display: grid;
    gap: 10px;
    border-left: 1px solid var(--line);
    padding-left: var(--space-4);
    font-size: var(--text-sm);
}

.v2-hero-facts div strong { display: block; color: var(--text); }
.v2-hero-facts div span { color: var(--muted); }

/* stats strip bridging dark frame -> light surface */
.v2-stats {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.v2-stats .v2-shell {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    padding: 14px 0;
    font-size: var(--text-sm);
}

.v2-stats b { color: var(--text); font-weight: 800; margin-right: 6px; }
.v2-stats span { color: var(--muted); }

/* ---- light catalogue surfaces ------------------------------------------ */

.v2-surface {
    background: var(--paper);
    color: var(--ink);
}

.v2-section { padding: var(--space-5) 0; }

.v2-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.v2-section-head h2 {
    margin: 0;
    font-size: var(--text-xl);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.v2-section-head a { color: var(--accent); font-weight: 600; font-size: var(--text-sm); }
.v2 a.v2-btn-primary, .v2 button.v2-btn-primary { color: #ffffff; }
.v2 a.v2-btn-ghost { color: inherit; }
.v2-section-head a:hover { text-decoration: underline; }

.v2-kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-ink);
    margin-bottom: 4px;
}

/* product cards — white, photography-first, MPN visible */
.v2-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.v2-card {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.v2-card:hover {
    box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 12%, transparent);
    transform: translateY(-2px);
}

.v2-card-media {
    position: relative;
    display: block;
    background: var(--card);
    aspect-ratio: 1 / 1;
    padding: var(--space-3);
}

.v2-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* availability pill on the image */
.v2-card-avail {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 99px;
}
.v2-card-avail-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.v2-card-avail.is-in { background: color-mix(in srgb, var(--ok-ink) 12%, #ffffff); color: var(--ok-ink); }
.v2-card-avail.is-lead { background: color-mix(in srgb, var(--warn-ink) 13%, #ffffff); color: var(--warn-ink); }

.v2-card-body {
    padding: var(--space-3);
    border-top: 1px solid var(--paper-line);
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.v2-card-brand { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.v2-card-brand b {
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-ink);
}
.v2-card-brand code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px;
    color: var(--muted-ink);
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.v2-card-title {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
}

.v2-card-title a { color: var(--ink); text-decoration: none; }
.v2-card-title a:hover { color: var(--accent); }

.v2-card-specs { display: flex; flex-wrap: wrap; gap: 5px; }
.v2-card-specs span {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-ink);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    padding: 2px 8px;
    border-radius: 6px;
}

/* price block */
.v2-card-price { margin-top: auto; }
.v2-card-price-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1px;
}
.v2-card-now {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.v2-card-now small { font-size: var(--text-xs); font-weight: 600; color: var(--muted-ink); letter-spacing: 0; }
.v2-card-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--muted-ink);
    font-variant-numeric: tabular-nums;
}
.v2-card-was { text-decoration: line-through; opacity: 0.7; }
.v2-card-save { color: var(--ok-ink); font-weight: 700; }
.v2-card-quote { font-size: var(--text-base); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.v2-card-quote small { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--muted-ink); letter-spacing: 0; margin-top: 2px; }

/* actions: quantity stepper + add to quote */
.v2-card-actions { margin-top: 2px; }
.v2-card-buy { display: flex; gap: 8px; }
.v2-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    overflow: hidden;
    flex: none;
}
.v2-qty button {
    width: 32px;
    border: 0;
    background: var(--card);
    color: var(--muted-ink);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.v2-qty button:hover { color: var(--accent); background: var(--paper); }
.v2-qty input {
    width: 30px;
    border: 0;
    text-align: center;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.v2-card-add {
    flex: 1;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 9px 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
}
.v2-card-add:hover { background: color-mix(in srgb, var(--accent) 87%, black); border-color: color-mix(in srgb, var(--accent) 87%, black); }
.v2-card-add--full { width: 100%; }
.v2-card-view {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted-ink);
    text-decoration: none;
}
.v2-card-view:hover { color: var(--accent); }

/* category tiles */
.v2-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.v2-cat {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.v2-cat:hover { border-color: var(--accent); color: var(--accent); }
.v2-cat::after { content: '\2192'; color: var(--muted-ink); }
.v2-cat:hover::after { color: var(--accent); }

/* process strip */
.v2-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    counter-reset: v2step;
}

.v2-step {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    counter-increment: v2step;
}

.v2-step::before {
    content: counter(v2step, decimal-leading-zero);
    display: block;
    font-weight: 800;
    color: var(--accent);
    font-size: var(--text-sm);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.v2-step strong { display: block; color: var(--ink); margin-bottom: 6px; font-size: var(--text-sm); }
.v2-step span { color: var(--muted-ink); font-size: var(--text-sm); }

/* ---- trade account band (dark frame again) ------------------------------ */

.v2-account {
    background:
        radial-gradient(50rem 20rem at 12% 120%, color-mix(in srgb, var(--accent) 25%, transparent), transparent),
        var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.v2-account .v2-shell {
    padding: var(--space-6) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: var(--space-5);
    align-items: center;
}

.v2-account h2 { margin: 0 0 10px; color: #ffffff; font-size: var(--text-2xl); letter-spacing: -0.025em; }
.v2-account p { margin: 0 0 18px; color: var(--muted); max-width: 58ch; }

.v2-account-perks { display: grid; gap: 10px; font-size: var(--text-sm); }
.v2-account-perks div strong { display: block; color: var(--text); }
.v2-account-perks div span { color: var(--muted); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1300px) {
    .v2-grid, .v2-cats, .v2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .v2-header .v2-shell { flex-wrap: wrap; padding: 10px 0; }
    .v2-search { order: 3; max-width: none; flex-basis: 100%; }
    .v2-hero .v2-shell, .v2-account .v2-shell { grid-template-columns: minmax(0, 1fr); }
    .v2-hero-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-3); }
    .v2-grid, .v2-cats, .v2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-stats .v2-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .v2-shell { width: calc(100% - 28px); }
    .v2-grid, .v2-cats, .v2-steps { grid-template-columns: minmax(0, 1fr); }
    .v2-utility .v2-shell { justify-content: center; }
    .v2-utility .v2-utility-links { display: none; }
}

/* ---- product page (light surface) --------------------------------------- */

.v2-crumbs {
    background: var(--paper);
    border-bottom: 1px solid var(--paper-line);
    font-size: var(--text-xs);
    color: var(--muted-ink);
}

.v2-crumbs .v2-shell { display: flex; gap: 8px; align-items: center; min-height: 40px; flex-wrap: wrap; }
.v2-crumbs a { color: var(--muted-ink); }
.v2-crumbs a:hover { color: var(--accent); }
.v2-crumbs span[aria-hidden] { color: var(--paper-line); }

.v2-product { padding: var(--space-5) 0; }

.v2-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: var(--space-5);
    align-items: start;
}

.v2-product-gallery {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.v2-product-gallery .v2-product-main-image {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.v2-product-gallery img { max-width: 100%; max-height: 100%; object-fit: contain; }

.v2-product-thumbs { display: flex; gap: 10px; margin-top: var(--space-3); }

.v2-thumb {
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    padding: 6px;
    background: var(--card);
    cursor: pointer;
    display: block;
    /* Belt and braces: nothing inside may paint over the frame. */
    overflow: hidden;
    transition: border-color 120ms ease, transform 120ms ease;
}

.v2-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v2-thumb:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--paper-line)); transform: translateY(-1px); }
.v2-thumb.is-active { border-color: var(--accent); }

.v2-buy {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.v2-buy h1 {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--text-xs); color: var(--muted-ink); }

.v2-chips span {
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    padding: 4px 10px;
    font-variant-numeric: tabular-nums;
}

.v2-buy-price-label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.v2-buy-price strong { display: block; font-size: var(--text-2xl); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-buy-price strong span { font-size: var(--text-sm); font-weight: 600; color: var(--muted-ink); letter-spacing: 0; }
.v2-buy-price > span, .v2-buy-price-sub { color: var(--muted-ink); font-size: var(--text-sm); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-variant-numeric: tabular-nums; }
.v2-buy-was { text-decoration: line-through; opacity: 0.7; }
.v2-buy-save { color: var(--ok-ink); font-weight: 700; }

/* availability pill — matches the product card */
.v2-buy-avail {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 5px 12px;
    border-radius: 99px;
    width: fit-content;
}
.v2-buy-avail-dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.v2-buy-avail.is-in { background: color-mix(in srgb, var(--ok-ink) 12%, #ffffff); color: var(--ok-ink); }
.v2-buy-avail.is-lead { background: color-mix(in srgb, var(--warn-ink) 13%, #ffffff); color: var(--warn-ink); }

.v2-buy .v2-btn { text-align: center; }

.v2-buy-notes { display: grid; gap: 8px; font-size: var(--text-sm); color: var(--muted-ink); border-top: 1px solid var(--paper-line); padding-top: var(--space-3); }
.v2-buy-notes strong { color: var(--ink); font-weight: 600; }

/* description + specs */
.v2-prose {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    max-width: none;
    line-height: var(--leading-body);
}

.v2-prose h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--ink); }
.v2-prose p { margin: 0 0 1em; color: var(--ink); }

.v2-specs { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.v2-specs caption { text-align: left; font-weight: 700; color: var(--ink); padding: 14px 0 8px; font-size: var(--text-base); }
.v2-specs th, .v2-specs td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.v2-specs th { color: var(--muted-ink); font-weight: 500; width: 38%; }
.v2-specs td { color: var(--ink); }

@media (max-width: 980px) {
    .v2-product-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- catalogue toolbar, results, pagination ------------------------------ */

.v2-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.v2-toolbar-count { font-size: var(--text-sm); color: var(--muted-ink); margin-right: auto; }
.v2-toolbar-count b { color: var(--ink); }

.v2-toolbar select {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    padding: 9px 12px;
    cursor: pointer;
}

.v2-toolbar select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.v2-toolbar noscript button,
.v2-toolbar .v2-apply {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 9px 14px;
    border-radius: var(--radius-control);
    border: 1px solid var(--paper-line);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}

.v2-empty {
    background: var(--card);
    border: 1px dashed var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--muted-ink);
}

.v2-empty strong { display: block; color: var(--ink); font-size: var(--text-lg); margin-bottom: 6px; }

.v2-pagination { display: flex; justify-content: center; margin-top: var(--space-5); }

.v2-pagination nav { display: flex; gap: 6px; flex-wrap: wrap; }

.v2-pagination a,
.v2-pagination span {
    min-width: 38px;
    text-align: center;
    padding: 8px 12px;
    font-size: var(--text-sm);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    background: var(--card);
    color: var(--ink);
}

.v2-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.v2-pagination [aria-current="page"] span,
.v2-pagination span[aria-current] { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.v2-cat-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.v2-cat-hero .v2-shell { padding: var(--space-4) 0; }
.v2-cat-hero h1 { margin: 0 0 6px; color: #ffffff; font-size: var(--text-2xl); letter-spacing: -0.025em; }
.v2-cat-hero p { margin: 0; color: var(--muted); max-width: 70ch; font-size: var(--text-sm); }

/* ---- forms, basket, legal prose ------------------------------------------ */

.v2-form { display: grid; gap: var(--space-3); }
.v2-form-row {
    display: grid;
    /* auto-fit, not a fixed 2-up: this row lives in a narrow summary column,
       where two forced columns pushed email and phone into each other. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3) var(--space-4);
}

.v2-field label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px; }

.v2-field input,
.v2-field textarea {
    width: 100%;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    padding: 11px 12px;
}

.v2-field input:focus,
.v2-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.v2-field .v2-error { display: block; color: var(--accent); font-size: var(--text-xs); margin-top: 4px; }

.v2-flash {
    background: var(--card);
    border: 1px solid var(--ok-ink);
    color: var(--ok-ink);
    border-radius: var(--radius-control);
    padding: 12px 14px;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

/* basket lines */
.v2-basket { display: grid; gap: var(--space-3); }

.v2-basket-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    gap: var(--space-3);
    align-items: center;
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

.v2-basket-line img { width: 72px; height: 72px; object-fit: contain; }

.v2-basket-title { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.v2-basket-title a { color: var(--ink); }
.v2-basket-title a:hover { color: var(--accent); }
.v2-basket-meta { font-size: var(--text-xs); color: var(--muted-ink); margin-top: 2px; }

.v2-qty { display: flex; align-items: center; gap: 6px; }

.v2-qty input {
    width: 64px;
    text-align: center;
    font: inherit;
    font-size: var(--text-sm);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    padding: 8px 6px;
}

.v2-qty button,
.v2-basket-remove button {
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid var(--paper-line);
    background: var(--card);
    color: var(--muted-ink);
    border-radius: var(--radius-control);
    padding: 8px 10px;
    cursor: pointer;
}

.v2-qty button:hover, .v2-basket-remove button:hover { border-color: var(--accent); color: var(--accent); }

.v2-basket-price { text-align: right; font-variant-numeric: tabular-nums; }
.v2-basket-price strong { display: block; color: var(--ink); }
.v2-basket-price span { font-size: var(--text-xs); color: var(--muted-ink); }

.v2-basket-summary {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    position: sticky;
    top: 88px;
}

.v2-basket-summary h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--ink); }

.v2-basket-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    /* space-5 across: on checkout the left column is a tall form whose inputs
       run to its full width, so a 24px gutter put the summary card right up
       against them. */
    gap: var(--space-4) var(--space-5);
    align-items: start;
}

.v2-totals { display: grid; gap: 6px; font-size: var(--text-sm); color: var(--muted-ink); margin-bottom: var(--space-3); }
.v2-totals div { display: flex; justify-content: space-between; }
.v2-totals .v2-total-main { color: var(--ink); font-weight: 700; font-size: var(--text-base); border-top: 1px solid var(--paper-line); padding-top: 8px; }

/* legal prose reuses the old pages' class names inside a v2 shell */
.v2-legal .content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.v2-legal .panel {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.v2-legal .panel h2 { margin: 0 0 10px; font-size: var(--text-lg); color: var(--ink); }
.v2-legal .panel h3 { margin: 16px 0 8px; font-size: var(--text-base); color: var(--ink); }
.v2-legal .panel p, .v2-legal .panel li { color: var(--muted-ink); font-size: var(--text-sm); line-height: var(--leading-body); }
.v2-legal .panel a { color: var(--accent); }

@media (max-width: 980px) {
    .v2-basket-grid { grid-template-columns: minmax(0, 1fr); }
    .v2-basket-line { grid-template-columns: 56px minmax(0, 1fr); }
    .v2-basket-price { text-align: left; }
    .v2-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   FINISH LAYER — the premium pass (review feedback: "great but a bit plain").
   Depth, light and texture over the same tokens. Appended so it reads as one
   reviewable layer; later rules win at equal specificity. Still no !important
   and no raw hex beyond white.
   ========================================================================== */

/* --- light, texture and glass on the dark frame --------------------------- */

.v2-hero,
.v2-account,
.v2-cat-hero {
    background-image:
        linear-gradient(color-mix(in srgb, var(--accent-text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent-text) 4%, transparent) 1px, transparent 1px),
        radial-gradient(56rem 24rem at 82% -30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent),
        radial-gradient(40rem 20rem at 8% 130%, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
    background-size: 72px 72px, 72px 72px, auto, auto;
    background-color: var(--ink);
}

.v2-header {
    background: color-mix(in srgb, var(--ink) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

.v2-utility {
    background: color-mix(in srgb, var(--ink) 80%, black);
}

/* --- typography presence --------------------------------------------------- */

.v2-hero h1 {
    font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl));
    letter-spacing: -0.035em;
}

.v2-hl { color: var(--accent-text); }

.v2-kicker { display: flex; align-items: center; gap: 8px; }

.v2-kicker::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}

.v2-section-head h2 { font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); letter-spacing: -0.025em; }

.v2-stats b { font-size: var(--text-xl); letter-spacing: -0.02em; }

/* --- buttons that feel pressable ------------------------------------------ */

.v2-btn { transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, border-color 120ms ease; }

.v2-btn-primary {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-text)));
    box-shadow:
        0 1px 0 color-mix(in srgb, #ffffff 25%, transparent) inset,
        0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent);
}

.v2-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.v2-btn-primary:active { transform: translateY(0); }

.v2-btn-ghost:hover { border-color: color-mix(in srgb, var(--accent-text) 60%, var(--line)); color: #ffffff; }

.v2-search input { background: color-mix(in srgb, var(--surface) 75%, black); }
.v2-search input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* --- elevation on the light surfaces --------------------------------------- */

.v2-surface {
    background:
        linear-gradient(180deg, #ffffff, var(--paper) 220px);
}

.v2-card,
.v2-buy,
.v2-basket-summary,
.v2-basket-line,
.v2-prose,
.v2-cat,
.v2-step {
    box-shadow:
        0 1px 0 #ffffff inset,
        0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
        0 10px 30px color-mix(in srgb, var(--ink) 6%, transparent);
}

.v2-card { border-color: color-mix(in srgb, var(--ink) 8%, var(--paper-line)); }

.v2-card:hover {
    box-shadow:
        0 1px 0 #ffffff inset,
        0 4px 10px color-mix(in srgb, var(--ink) 8%, transparent),
        0 22px 50px color-mix(in srgb, var(--ink) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--paper-line));
    transform: translateY(-3px);
}

.v2-card-media { background: radial-gradient(closest-side, #ffffff 60%, color-mix(in srgb, var(--paper) 70%, #ffffff)); }

.v2-cat { transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease; }
.v2-cat:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 12%, transparent); }

/* --- hero facts become a glass card ---------------------------------------- */

.v2-hero-facts {
    border-left: 0;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-text) 18%, var(--line));
    border-radius: var(--radius-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px color-mix(in srgb, black 40%, transparent);
}

@media (max-width: 980px) {
    .v2-hero-facts { border-top: 0; padding-top: var(--space-4); }
}

/* --- seams between dark and light ------------------------------------------ */

.v2-stats { border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); }
.v2-account { border-top: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }

/* --- calmer, considered motion --------------------------------------------- */

.v2 a, .v2 button { transition: color 120ms ease, background 120ms ease, border-color 120ms ease; }

@media (prefers-reduced-motion: reduce) {
    .v2 *, .v2 *::before, .v2 *::after { transition: none; transform: none; }
}

/* ---- v2 footer ----------------------------------------------------------- */

.v2-footer {
    background:
        linear-gradient(color-mix(in srgb, var(--accent-text) 4%, transparent) 1px, transparent 1px) 0 0 / 72px 72px,
        radial-gradient(44rem 18rem at 90% 130%, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
        var(--ink);
    border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    color: var(--muted);
    font-size: var(--text-sm);
}

.v2-footer-grid {
    display: grid;
    /* The contact column (2nd) floors at its own max-content so the email
       address always fits on one line; every other column shares the rest. */
    grid-template-columns: minmax(0, 1.5fr) minmax(max-content, 1.15fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    padding: var(--space-6) 0 var(--space-5);
}

.v2-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.v2-footer-brand img { display: block; }
.v2-footer-brand strong { color: var(--text); font-size: var(--text-base); letter-spacing: -0.02em; }

.v2-footer p { margin: 0 0 12px; line-height: var(--leading-body); }
.v2-footer-note { font-size: var(--text-xs); color: color-mix(in srgb, var(--muted) 75%, transparent); }

.v2-footer h3 {
    margin: 0 0 12px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
}

.v2-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v2-footer a { color: var(--muted); }
.v2-footer a:hover { color: var(--text); }
.v2-footer strong { color: var(--text); }

.v2-footer-base {
    border-top: 1px solid var(--line);
    padding: var(--space-3) 0 var(--space-4);
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--muted) 75%, transparent);
}

@media (max-width: 1080px) {
    /* Stack early enough that the floored contact column never squeezes the
       link columns. */
    .v2-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .v2-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* real mark in the chrome */
.v2-logo-badge { background: none; border: 0; width: auto; height: auto; }
.v2-logo-badge img { display: block; height: 38px; width: auto; }

/* ==========================================================================
   UTILITY-PAGE PRESENCE — quote, contact, legal (review: "too plain").
   Every page now opens with the branded dark band; content gets structure.
   ========================================================================== */

.v2-page-hero {
    background-image:
        linear-gradient(color-mix(in srgb, var(--accent-text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent-text) 4%, transparent) 1px, transparent 1px),
        radial-gradient(52rem 22rem at 85% -30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
    background-size: 72px 72px, 72px 72px, auto;
    background-color: var(--ink);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

.v2-page-hero .v2-shell {
    padding: var(--space-5) 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.v2-page-hero h1 {
    margin: 6px 0 8px;
    color: #ffffff;
    font-size: clamp(var(--text-xl), 2.6vw, var(--text-3xl));
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
}

.v2-page-hero .v2-lede { margin: 0; color: var(--muted); max-width: 62ch; font-size: var(--text-sm); }

.v2-page-hero-aside { text-align: right; }
.v2-page-hero-aside .v2-phone {
    display: block;
    color: var(--accent-text);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.v2-page-hero-aside span { color: var(--muted); font-size: var(--text-xs); }

@media (max-width: 980px) {
    .v2-page-hero-aside { text-align: left; }
}

/* --- richer basket ---------------------------------------------------------- */

.v2-basket-line { grid-template-columns: 84px minmax(0, 1fr) auto auto; padding: var(--space-4); }
.v2-basket-line img { width: 84px; height: 84px; }
.v2-basket-unit { font-size: var(--text-xs); color: var(--muted-ink); }

.v2-basket-summary { border-top: 3px solid var(--accent); }

.v2-summary-trust {
    margin: var(--space-3) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--paper-line);
    display: grid;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--muted-ink);
}

.v2-summary-trust div { display: flex; gap: 8px; align-items: baseline; }
.v2-summary-trust div::before { content: '\2713'; color: var(--ok-ink); font-weight: 700; }

/* --- legal pages read like documents, not dumps ----------------------------- */

.v2-legal-wrap { max-width: 880px; }

.v2-legal .panel h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-lg);
}

.v2-legal .panel h2::before {
    content: '';
    width: 4px;
    height: 1.1em;
    border-radius: 4px;
    background: var(--accent);
    flex-shrink: 0;
}

.v2-legal .panel ul { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.v2-legal .panel ul li { padding-left: 20px; position: relative; }
.v2-legal .panel ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 70%, var(--paper-line));
}

.v2-legal .panel table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); margin: 10px 0; }
.v2-legal .panel th, .v2-legal .panel td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--paper-line); }
.v2-legal .panel th { color: var(--muted-ink); font-weight: 600; }

.v2-help-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    background:
        radial-gradient(30rem 12rem at 90% 140%, color-mix(in srgb, var(--accent) 20%, transparent), transparent),
        var(--ink);
    color: var(--text);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-top: var(--space-4);
    box-shadow: 0 20px 50px color-mix(in srgb, var(--ink) 25%, transparent);
}

.v2-help-strip strong { display: block; font-size: var(--text-base); letter-spacing: -0.01em; }
.v2-help-strip span { color: var(--muted); font-size: var(--text-sm); }

/* --- contact form panel ------------------------------------------------------ */

.v2-contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 400px); gap: var(--space-4); align-items: start; }
@media (max-width: 980px) { .v2-contact-grid { grid-template-columns: minmax(0, 1fr); } }

.v2-contact-fact { display: grid; gap: 2px; }
.v2-contact-fact strong { color: var(--ink); font-size: var(--text-sm); }
.v2-contact-fact span { color: var(--muted-ink); font-size: var(--text-sm); }
.v2-contact-fact .v2-phone-big { color: var(--accent); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }

/* ---- Browse mega-menu (details/summary: works without JS, on touch, and
        with a keyboard) ---------------------------------------------------- */

.v2-menu { position: relative; flex-shrink: 0; }

.v2-menu summary {
    list-style: none;
    cursor: pointer;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    user-select: none;
}

.v2-menu summary::-webkit-details-marker { display: none; }
.v2-menu summary::after { content: ' \25BE'; color: var(--muted); }
.v2-menu summary:hover { border-color: color-mix(in srgb, var(--accent-text) 50%, var(--line)); }
.v2-menu[open] summary { background: var(--surface); border-color: var(--accent); }

.v2-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(920px, calc(100vw - 40px));
    background: color-mix(in srgb, var(--ink) 96%, black);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: var(--radius-card);
    box-shadow: 0 30px 80px color-mix(in srgb, black 55%, transparent);
    padding: var(--space-4);
    z-index: 60;
}

.v2-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.v2-menu-dept-name {
    display: block;
    color: var(--text);
    font-weight: 700;
    font-size: var(--text-sm);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.v2-menu-dept-name:hover { color: var(--accent-text); }

.v2-menu-dept ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.v2-menu-dept li a { color: var(--muted); font-size: var(--text-xs); display: block; padding: 2px 0; }
.v2-menu-dept li a:hover { color: var(--text); }
.v2-menu-dept .v2-menu-more { color: var(--accent-text); font-weight: 600; margin-top: 2px; }

.v2-menu-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--line);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    font-size: var(--text-xs);
}

.v2-menu-foot a { color: var(--accent-text); font-weight: 700; }
.v2-menu-foot span { color: var(--muted); }

@media (max-width: 980px) {
    .v2-menu { order: 2; }
    .v2-menu-panel { position: fixed; left: 20px; right: 20px; width: auto; top: 120px; }
    .v2-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .v2-menu-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The contact column floors at the email's width (see .v2-footer-grid), so the
   address renders on one line; slightly smaller type keeps that floor modest.
   overflow-wrap stays as the safety net for the stacked narrow layouts. */
.v2-email { font-size: 0.8125rem; letter-spacing: -0.01em; white-space: nowrap; }
.v2-footer p { min-width: 0; overflow-wrap: anywhere; }

/* ---- customer account (dashboard + RFQ detail, redesigned 2026-08-11) ----
   Light catalogue surfaces like the rest of the storefront; reuses the
   v2-form/v2-btn/v2-empty/v2-page-hero patterns. */

.v2-account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.v2-stat {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: 16px 18px;
}

.v2-stat span { display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-ink); }
.v2-stat strong { display: block; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.v2-stat p { margin: 4px 0 0; font-size: var(--text-xs); color: var(--muted-ink); }

.v2-table-wrap { overflow-x: auto; border: 1px solid var(--paper-line); border-radius: var(--radius-card); background: var(--card); }
.v2-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.v2-table th { text-align: left; padding: 10px 14px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-ink); border-bottom: 1px solid var(--paper-line); background: color-mix(in srgb, var(--paper) 60%, var(--card)); white-space: nowrap; }
.v2-table td { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--paper-line) 55%, transparent); color: var(--ink); vertical-align: top; }
.v2-table tbody tr:last-child td { border-bottom: 0; }
.v2-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.v2-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.v2-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.v2-pill--ok { color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 40%, transparent); background: color-mix(in srgb, var(--ok-ink) 8%, var(--card)); }
.v2-pill--muted { color: var(--muted-ink); border-color: var(--paper-line); background: color-mix(in srgb, var(--paper) 70%, var(--card)); }

.v2-thread { display: grid; gap: 12px; margin-bottom: var(--space-4); }
.v2-thread-msg { border: 1px solid var(--paper-line); border-radius: var(--radius-control); background: var(--card); padding: 14px 16px; }
.v2-thread-msg--dcs { border-left: 3px solid var(--accent); }
.v2-thread-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.v2-thread-head strong { color: var(--ink); }
.v2-thread-head small { color: var(--muted-ink); font-size: var(--text-xs); }
.v2-thread-body { white-space: pre-wrap; color: var(--ink); line-height: var(--leading-body); font-size: var(--text-sm); }

.v2-detail-rows { display: grid; gap: 8px; }
.v2-detail-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); border-bottom: 1px solid color-mix(in srgb, var(--paper-line) 55%, transparent); padding-bottom: 8px; }
.v2-detail-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.v2-detail-rows span { color: var(--muted-ink); }
.v2-detail-rows strong { color: var(--ink); text-align: right; overflow-wrap: anywhere; }

.v2-pay-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.v2-pay-card { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--paper-line)); border-radius: var(--radius-card); background: var(--card); padding: var(--space-3); }
.v2-pay-card h3 { margin: 0 0 6px; font-size: var(--text-base); color: var(--ink); }
.v2-pay-card p { margin: 0 0 10px; font-size: var(--text-xs); color: var(--muted-ink); }


/* ---- account premium pass (2026-08-11) ----------------------------------- */

/* The hero aside is a glass card on the dark frame; detail rows inside any
   dark context use the dark-side text tokens (they were unreadable ink-on-ink). */
.v2-hero-card {
    text-align: left;
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px color-mix(in srgb, black 30%, transparent);
    min-width: 300px;
}

.v2-page-hero .v2-detail-rows > div { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.v2-page-hero .v2-detail-rows span { color: var(--muted); }
.v2-page-hero .v2-detail-rows strong { color: var(--text); }

.v2-page-hero .v2-btn-ghost {
    border-color: color-mix(in srgb, #ffffff 35%, transparent);
    color: #ffffff;
    margin-top: var(--space-3);
}

/* Stat cards carry the premium finish: accent top edge, soft glow, real hover. */
.v2-stat {
    border-top: 3px solid color-mix(in srgb, var(--accent) 55%, var(--paper-line));
    background:
        radial-gradient(16rem 5rem at 50% -30%, color-mix(in srgb, var(--accent) 7%, transparent), transparent),
        var(--card);
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.v2-stat strong { font-size: var(--text-2xl); }

a.v2-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--paper-line));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Tables: the reference column reads as the action it is. */
.v2-table a { color: var(--accent); font-weight: 700; }
.v2-table a:hover { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }

/* Conversation: DCS replies sit on a faint accent wash. */
.v2-thread-msg--dcs { background: color-mix(in srgb, var(--accent) 4%, var(--card)); }

/* Pay-by-card is the primary route — give it the glow. */
.v2-pay-card--primary {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--paper-line));
    background:
        radial-gradient(20rem 7rem at 50% -40%, color-mix(in srgb, var(--accent) 9%, transparent), transparent),
        var(--card);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Signed-in chrome: the logout lives in the shared header (the old pages each
   carried their own topbar logout, which died with those topbars). */
.v2-nav-signout { display: inline; }
.v2-nav-signout button {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 9px 13px;
    border-radius: var(--radius-control);
    cursor: pointer;
}
.v2-nav-signout button:hover { color: var(--text); }

/* Buy-now basket sits beside the quote basket; tinted so the two are never
   mistaken for each other. */
.v2-nav .v2-nav-basket--buy {
    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
    background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.v2-nav .v2-nav-basket--buy:hover { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.v2-nav .v2-nav-basket--buy span { background: var(--ok-ink); }

/* Error variant of the storefront flash (add-to-basket refusals etc). */
.v2-flash--error { border-color: var(--danger-ink); color: var(--danger-ink); }

/* ---- available to order ------------------------------------------------ */

/* Amber, not the in-stock green: buyable, but not on a shelf, and the
   difference matters to someone planning an installation date. */
.v2-buy-order { color: var(--warn-ink); }

/* ---- server configurator ----------------------------------------------- */

/* Follows DECISIONS #1: a dark navy frame band carrying the machine, then
   light paper surfaces for the specification itself. */

.v2-config-hero {
    background: var(--ink);
    color: var(--text);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line);
}

.v2-config-hero-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: var(--space-5);
    align-items: center;
}

.v2-config-hero-media {
    background: var(--card);
    border-radius: var(--radius-card);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: var(--space-3);
}

.v2-config-hero-media img { width: 100%; height: 100%; object-fit: contain; }

.v2-config-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0 0 var(--space-2);
}

.v2-config-hero h1 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-2);
}

.v2-config-hero p { color: var(--muted); margin: 0; font-size: var(--text-sm); max-width: 62ch; }

.v2-config-hero-price { text-align: right; }
.v2-config-hero-price span { display: block; font-size: var(--text-xs); color: var(--muted); }
.v2-config-hero-price strong { font-size: var(--text-xl); font-weight: 700; }

/* ---- layout ---- */

.v2-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-5) 0 var(--space-6);
}

/* ---- option groups ---- */

.v2-config-group {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.v2-config-group > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--paper-line);
    background: var(--paper);
}

.v2-config-group h2 { font-size: var(--text-base); margin: 0; letter-spacing: -0.01em; }

.v2-config-count {
    font-size: var(--text-xs);
    color: var(--muted-ink);
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    padding: 2px var(--space-2);
    white-space: nowrap;
}

.v2-config-group ul { list-style: none; margin: 0; padding: 0; }
.v2-config-group li + li { border-top: 1px solid var(--paper-line); }

.v2-config-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    transition: background 120ms ease, box-shadow 120ms ease;
    cursor: pointer;
}

.v2-config-row:hover { background: var(--paper); }

.v2-config-row.is-selected {
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ---- quantity stepper ---- */

.v2-config-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    overflow: hidden;
    background: var(--card);
}

.v2-config-stepper button {
    font: inherit;
    line-height: 1;
    width: 28px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--muted-ink);
    cursor: pointer;
}

.v2-config-stepper button:hover { background: var(--paper); color: var(--ink); }

.v2-config-qty {
    width: 34px;
    height: 32px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--paper-line);
    border-right: 1px solid var(--paper-line);
    background: transparent;
    -moz-appearance: textfield;
}

.v2-config-qty::-webkit-outer-spin-button,
.v2-config-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- option text ---- */

.v2-config-name { font-size: var(--text-sm); line-height: var(--leading-body); }
.v2-config-name small { display: block; color: var(--muted-ink); font-size: var(--text-xs); margin-top: 2px; }

.v2-config-price { text-align: right; white-space: nowrap; }
.v2-config-price strong { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.v2-config-price small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--muted-ink); }
.v2-config-price .is-stocked { color: var(--ok-ink); }
.v2-config-price .is-order { color: var(--warn-ink); }

.v2-config-more { font-size: var(--text-xs); color: var(--muted-ink); margin: 0; padding: var(--space-3) var(--space-4); background: var(--paper); }

/* ---- summary ---- */

.v2-config-summary {
    position: sticky;
    top: 88px;
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.v2-config-summary > header {
    background: var(--ink);
    color: var(--text);
    padding: var(--space-3) var(--space-4);
}

.v2-config-summary > header h2 { font-size: var(--text-base); margin: 0; }
.v2-config-summary > header p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted); }

.v2-config-lines { padding: var(--space-4); }

.v2-config-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
}

.v2-config-line span:last-child { font-variant-numeric: tabular-nums; }
.v2-config-line.is-muted { color: var(--muted-ink); }

.v2-config-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--paper-line);
}

.v2-config-total-line span { font-size: var(--text-sm); color: var(--muted-ink); }
.v2-config-total-line strong { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.v2-config-lead {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-control);
    background: var(--paper);
    font-size: var(--text-sm);
}

.v2-config-lead strong { color: var(--warn-ink); }

.v2-config-actions { padding: 0 var(--space-4) var(--space-4); }
.v2-config-note { font-size: var(--text-xs); color: var(--muted-ink); margin: var(--space-3) 0 0; line-height: var(--leading-body); }

@media (max-width: 980px) {
    .v2-config-grid { grid-template-columns: minmax(0, 1fr); }
    .v2-config-summary { position: static; }
    .v2-config-hero-grid { grid-template-columns: 120px minmax(0, 1fr); }
    .v2-config-hero-price { grid-column: 2; text-align: left; }
}

@media (max-width: 560px) {
    .v2-config-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .v2-config-hero-price { grid-column: 1; }
    .v2-config-row { grid-template-columns: 92px minmax(0, 1fr); }
    .v2-config-price { grid-column: 2; text-align: left; }
}

/* Options matched by platform generation rather than declared by the supplier.
   Amber, like every other "true but needs a person" signal on the site. */
.v2-config-count.is-inferred { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 35%, var(--paper-line)); }

/* ------------------------------------------------------------------
   Configurator chooser: which machine to build.

   Rebuilt 2026-08-16 around the family photographs. The photograph IS
   the card — they were sourced by hand family by family, and a picker
   of 43 identical text tiles while they sat unused was the page's whole
   problem. Machines are tiered by platform age so the range reads as a
   range, not a wall.
   ------------------------------------------------------------------ */

.v2-config-hero--index { padding: var(--space-6) 0; }

.v2-config-hero--index h1 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }

.v2-config-lede {
    color: var(--muted);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    max-width: 68ch;
    margin: 0 0 var(--space-5);
}

/* Three numbered steps across the bottom of the hero band. */
.v2-config-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
}

.v2-config-steps > div { display: flex; gap: var(--space-3); align-items: flex-start; }

.v2-config-steps b {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text);
    font-size: var(--text-sm);
}

.v2-config-steps span {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: var(--leading-body);
}

.v2-config-steps strong {
    display: block;
    color: var(--text);
    font-size: var(--text-sm);
    margin-bottom: 2px;
}

@media (max-width: 760px) {
    .v2-config-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

.v2-config-index { padding: var(--space-5) 0 var(--space-6); }

.v2-config-tier-head { margin: var(--space-5) 0 var(--space-3); }
.v2-config-tier-head:first-child { margin-top: 0; }
.v2-config-tier-head h2 { font-size: var(--text-xl); color: var(--ink); line-height: var(--leading-tight); margin: 0 0 var(--space-1); }
.v2-config-tier-head p { margin: 0; font-size: var(--text-sm); color: var(--muted-ink); }

.v2-config-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }

.v2-config-pick {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    color: var(--ink);
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.v2-config-pick:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 14%, transparent);
}

.v2-config-pick-media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-4);
    background: var(--card);
    border-bottom: 1px solid var(--paper-line);
}

.v2-config-pick-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 200ms ease;
}

.v2-config-pick:hover .v2-config-pick-media img { transform: scale(1.04); }

/* A family with no photograph yet names the machine in the frame — an
   absence handled on purpose, not a broken-looking grey tile. */
.v2-config-pick-nophoto {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--muted-ink);
    text-align: center;
    padding: var(--space-3);
    border: 1px dashed var(--paper-line);
    border-radius: var(--radius-control);
}

.v2-config-pick-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    flex: 1;
}

.v2-config-pick-name { font-weight: 700; font-size: var(--text-lg); line-height: var(--leading-tight); }

.v2-config-pick-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.v2-config-chip {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    color: var(--accent);
    white-space: nowrap;
}

.v2-config-chip.is-quiet {
    background: var(--paper);
    color: var(--muted-ink);
    font-weight: 600;
}

.v2-config-pick-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--paper-line);
}

.v2-config-pick-price small { display: block; font-size: var(--text-xs); color: var(--muted-ink); }
.v2-config-pick-price strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

.v2-config-pick-cta { font-size: var(--text-sm); font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Previous generations: present, compact, ignorable. */
.v2-config-older {
    display: grid;
    gap: var(--space-2);
}

.v2-config-older-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    color: var(--ink);
    transition: border-color 120ms ease;
}

.v2-config-older-row:hover { border-color: var(--accent); }
.v2-config-older-name { font-weight: 700; font-size: var(--text-sm); }
.v2-config-older-meta { font-size: var(--text-xs); color: var(--muted-ink); white-space: nowrap; }
.v2-config-older-go { font-size: var(--text-xs); font-weight: 700; color: var(--accent); white-space: nowrap; }

@media (max-width: 640px) {
    .v2-config-older-row { grid-template-columns: minmax(0, 1fr) auto; }
    .v2-config-older-row .v2-config-chip { display: none; }
    .v2-config-older-meta { display: none; }
}

/* Why buying a server this way is safe — under everything, quiet. */
.v2-config-reassure {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.v2-config-reassure > div {
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.v2-config-reassure strong { display: block; font-size: var(--text-sm); color: var(--ink); margin-bottom: var(--space-1); }
.v2-config-reassure span { font-size: var(--text-xs); color: var(--muted-ink); line-height: var(--leading-body); }

/* ---- configurator: section navigation ---------------------------------- */

/* 240 options across nine groups is a lot of scrolling. This is what makes it
   feel like a tool rather than a long form. */
.v2-config-nav {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-3);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--paper-line);
    scrollbar-width: none;
}

.v2-config-nav::-webkit-scrollbar { display: none; }

.v2-config-nav a {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    color: var(--muted-ink);
    padding: 6px var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    background: var(--card);
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
}

.v2-config-nav a:hover { color: var(--ink); border-color: var(--accent); }
.v2-config-nav a b { font-variant-numeric: tabular-nums; }
.v2-config-nav a.has-selection { color: var(--accent); border-color: var(--accent); }

.v2-config-group { scroll-margin-top: 132px; }

/* ---- configurator: itemised specification ------------------------------ */

/* A running count is a counter. A list of what you actually chose is a
   specification, and that is the thing being built. */
.v2-config-chosen { margin: 0 0 var(--space-3); padding: 0; list-style: none; }

.v2-config-chosen li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: baseline;
    padding: 6px 0;
    font-size: var(--text-xs);
    border-bottom: 1px dashed var(--paper-line);
}

.v2-config-chosen .qty { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.v2-config-chosen .name { color: var(--muted-ink); line-height: 1.4; }
.v2-config-chosen .line { font-variant-numeric: tabular-nums; text-align: right; }
.v2-config-chosen-empty { font-size: var(--text-xs); color: var(--muted-ink); margin: 0 0 var(--space-3); }

/* ---- configurator: phone summary bar ----------------------------------- */

/* The summary is a sidebar on desktop and stacks to the bottom of a long page
   on a phone, where it is useless. This keeps the total and the action in
   reach without duplicating the whole panel. */
.v2-config-bar { display: none; }

@media (max-width: 980px) {
    .v2-config-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3);
        background: var(--ink);
        color: var(--text);
        border-top: 1px solid var(--line);
    }

    .v2-config-bar-total { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
    .v2-config-bar-total small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
    .v2-config-bar .v2-btn { flex: 0 0 auto; }

    /* Clear the fixed bar. */
    .v2-config-grid { padding-bottom: 96px; }
    .v2-config-nav { top: 0; }
}

/* ---- configurator: focus and detail ------------------------------------ */

.v2-config-row:focus-within { background: var(--paper); }
.v2-config-qty:focus-visible,
.v2-config-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.v2-config-group header h2 { display: flex; align-items: baseline; gap: var(--space-2); }
.v2-config-group-hint { font-size: var(--text-xs); color: var(--muted-ink); font-weight: 400; }

/* ------------------------------------------------------------------
   Configured builds in the quote basket

   A build is a chassis and its parts. Drawn as one panel with a rule
   down its left edge so the relationship is visible without reading:
   these lines belong to the machine named at the top, and the subtotal
   is what that machine costs.

   Individual lines keep their own remove and quantity controls. A
   customer who wants a different SSD should not have to rebuild.
   ------------------------------------------------------------------ */

.v2-build {
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.v2-build-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--paper-line);
}

.v2-build-head strong {
    display: block;
    font-size: var(--text-base);
    color: var(--ink);
    line-height: var(--leading-tight);
    margin-top: 4px;
}

.v2-build-tag {
    display: inline-block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--accent);
}

.v2-build-meta {
    display: block;
    font-size: var(--text-xs);
    color: var(--muted-ink);
    margin-top: 4px;
}

.v2-build-subtotal { text-align: right; white-space: nowrap; }
.v2-build-subtotal strong { display: block; font-size: var(--text-lg); color: var(--ink); }
.v2-build-subtotal span { font-size: var(--text-xs); color: var(--muted-ink); }

/* Inside a build the panel already supplies the frame, so the lines
   drop their own border and read as rows rather than as cards. */
.v2-basket-line.is-in-build {
    border-color: transparent;
    background: var(--card);
}

.v2-basket-line.is-chassis { background: var(--paper); }

.v2-role {
    display: inline-block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--muted-ink);
    margin-right: 6px;
}

@media (max-width: 640px) {
    .v2-build-head { flex-direction: column; }
    .v2-build-subtotal { text-align: left; }
}

/* ------------------------------------------------------------------
   Option rows: specification first, supplier prose second

   The feed's titles are ninety characters in which two matter. Leading
   with the extracted spec is what makes a build sheet scannable — the
   eye runs down a column of "32 GB · DDR4-2933" instead of re-reading
   "HPE SmartMemory - DDR4 - module - ..." on every line.
   ------------------------------------------------------------------ */

.v2-config-spec {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

.v2-config-full {
    display: block;
    font-size: var(--text-xs);
    color: var(--muted-ink);
    line-height: var(--leading-body);
    margin-top: 3px;
}

/* A chosen row states itself. Without this the only feedback that a
   selection landed was a number changing in a distant sidebar. */
.v2-config-row.is-selected .v2-config-spec { color: var(--accent); }

/* A build line that is not a published listing. Saying so plainly is the
   honest alternative to letting it look like stock we hold. */
.v2-quote-only { color: var(--warn-ink); font-weight: 600; }

/* Sits under the "Configure this server" call to action. */
.v2-buy-note-inline {
    font-size: var(--text-xs);
    color: var(--muted-ink);
    line-height: var(--leading-body);
    margin: calc(var(--space-1) * -1) 0 0;
}

/* "Build a server" inside the Browse panel.
   Moved out of the primary nav on request to keep that row clean. It lives in
   the menu footer because it is a tool rather than a department, but carries a
   line of explanation — "Build a server" alone reads like a category to
   somebody who does not already know the feature exists. */
.v2-menu-build {
    display: block;
    margin-right: auto;
    line-height: var(--leading-tight);
}

.v2-menu-build small {
    display: block;
    margin-top: 3px;
    font-weight: 400;
    color: var(--muted);
}

@media (max-width: 980px) {
    .v2-menu-build { margin-right: 0; }
}

/* Chassis with no photograph.
   Most configurable machines have none and will not until HPE or the
   distributor supplies one — HPE's site refuses this server, so it cannot be
   sourced here. A grey "no image" tile on a £12,000 server reads as a broken
   page; naming the machine is the same fact stated deliberately. */
.v2-config-hero-nophoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    aspect-ratio: 1;
    border: 1px dashed var(--paper-line);
    border-radius: var(--radius-card);
    background: var(--paper);
    padding: var(--space-2);
    text-align: center;
}

.v2-config-hero-nophoto span {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink);
    line-height: var(--leading-tight);
}

.v2-config-hero-nophoto small { font-size: var(--text-xs); color: var(--muted-ink); }

/* ------------------------------------------------------------------
   Server photograph worklist (admin)

   A working document, not a marketing page: dense, sortable by eye,
   and readable on a laptop next to a manufacturer's website.
   ------------------------------------------------------------------ */

.v2-worklist-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.v2-worklist-summary div {
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

.v2-worklist-summary strong {
    display: block;
    font-size: var(--text-2xl);
    color: var(--ink);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

.v2-worklist-summary span { font-size: var(--text-xs); color: var(--muted-ink); }

.v2-worklist-note {
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.v2-worklist-note p {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-body);
}

.v2-worklist-note p:last-child { margin-bottom: 0; }

/* Wide table, own scroller: the page must never scroll sideways. */
.v2-worklist-wrap {
    overflow-x: auto;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    background: var(--card);
}

.v2-worklist { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.v2-worklist th {
    text-align: left;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-ink);
    padding: var(--space-3);
    border-bottom: 1px solid var(--paper-line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--card);
}

.v2-worklist td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--paper-line);
    vertical-align: top;
}

.v2-worklist tr:last-child td { border-bottom: 0; }
.v2-worklist .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.v2-worklist td strong { display: block; color: var(--ink); line-height: var(--leading-tight); }
.v2-worklist td small { display: block; margin-top: 3px; font-size: var(--text-xs); color: var(--muted-ink); }

.v2-worklist code {
    font-size: var(--text-xs);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-control);
    padding: 2px 6px;
    white-space: nowrap;
}

/* Done rows stay visible but recede — the point of the page is what is left. */
.v2-worklist tr.is-done { opacity: .55; }
.v2-worklist-done { font-size: var(--text-xs); color: var(--ok-ink); font-weight: 700; }

/* Platform badge on the photo worklist. Current platforms are what somebody
   specifies now; legacy is still orderable but rarely worth photographing. */
.v2-worklist-platform {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-control);
    white-space: nowrap;
}

.v2-worklist-platform.is-current { background: var(--ok); color: var(--ok-ink); }
.v2-worklist-platform.is-legacy { background: var(--paper); color: var(--muted-ink); }

/* Photograph upload on the worklist page. */
.v2-upload {
    display: grid;
    gap: var(--space-3);
    background: var(--card);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.v2-upload strong { display: block; font-size: var(--text-lg); color: var(--ink); }
.v2-upload p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--muted-ink); line-height: var(--leading-body); }
.v2-upload input[type="file"] { font: inherit; font-size: var(--text-sm); color: var(--ink); }
.v2-upload button { cursor: pointer; font: inherit; justify-self: start; }

.v2-upload-result {
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

.v2-upload-result strong { display: block; color: var(--ink); margin-bottom: var(--space-2); }
.v2-upload-result ul { margin: 0 0 var(--space-2); padding-left: var(--space-4); color: var(--muted-ink); }
.v2-upload-result li { margin-bottom: 2px; }
.v2-upload-ok { color: var(--ok-ink); font-weight: 600; margin: 0 0 4px; }
.v2-upload-skip { color: var(--muted-ink); font-weight: 600; margin: 0 0 4px; }
.v2-upload-bad { color: var(--danger-ink); font-weight: 600; margin: 0 0 4px; }

.v2-upload-limits { font-size: var(--text-xs); color: var(--muted-ink); }

/* ------------------------------------------------------------------
   Configurator: colour on the build pages (2026-08-16)

   Both /build-a-server pages ran a navy band over an almost entirely
   white page — white gradient beneath the hero, white cards, white
   rows, forty of them to a group. On a large screen that is a sheet of
   glare with none of the site's colour in it.

   Everything here is scoped to .v2-config-page (the <main> of the two
   configurator views) so the rest of the storefront keeps the shared
   .v2-surface treatment, and every value is a token mixed with
   color-mix — no ninth colour, per tokens.css.

   Contrast checked at the mixes used: accent-on-card 5.17 (AA),
   darkened further where accent carries text; muted on the summary
   header gradient 4.95; warn-ink on the tinted lead panel ~5.5.
   ------------------------------------------------------------------ */

/* The hero keeps its navy but stops being flat: a blue bloom off the
   top corners, which is where the eye lands first. */
.v2-config-hero {
    background:
        radial-gradient(900px 420px at 12% -45%,
            color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
        radial-gradient(720px 380px at 88% -35%,
            color-mix(in srgb, var(--accent-text) 22%, transparent), transparent 72%),
        var(--ink);
    border-bottom-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* The light region steps down out of that band instead of starting at
   pure white directly beneath it — the seam was the brightest part of
   the page. Settles to plain paper further down the list. */
.v2-surface.v2-config-page {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 13%, var(--paper)) 0,
            color-mix(in srgb, var(--accent) 7%, var(--paper)) 340px,
            color-mix(in srgb, var(--accent) 3%, var(--paper)) 900px,
            var(--paper) 1500px);
}

/* ---- section nav ---- */

.v2-config-page .v2-config-nav {
    background: color-mix(in srgb, var(--accent) 10%, var(--paper));
    border-bottom-color: color-mix(in srgb, var(--accent) 28%, var(--paper-line));
}

.v2-config-page .v2-config-nav a b { color: var(--accent); }

/* ---- option groups ---- */

.v2-config-page .v2-config-group {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--paper-line));
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
        0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent);
}

.v2-config-page .v2-config-group > header {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 14%, var(--card)),
        color-mix(in srgb, var(--accent) 7%, var(--card)));
    border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--paper-line));
}

.v2-config-page .v2-config-group h2 { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }

.v2-config-page .v2-config-count {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--paper-line));
}

/* Banding on the rows. Forty near-identical lines is where the glare
   comes from, and a stripe is also the cheapest way to keep your eye on
   one line across a wide row. The row itself paints over the stripe, so
   hover and selection still win without a specificity fight. */
.v2-config-page .v2-config-group li:nth-child(even) {
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.v2-config-page .v2-config-row:hover { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

.v2-config-page .v2-config-row.is-selected {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    box-shadow: inset 3px 0 0 var(--accent);
}

.v2-config-page .v2-config-stepper button:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    color: var(--accent);
}

.v2-config-page .v2-config-more { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }

/* ---- summary ---- */

.v2-config-page .v2-config-summary {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--paper-line));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 10%, transparent);
}

.v2-config-page .v2-config-summary > header {
    background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--accent) 55%, var(--ink)));
}

.v2-config-page .v2-config-total-line {
    border-top-color: color-mix(in srgb, var(--accent) 28%, var(--paper-line));
}

.v2-config-page .v2-config-total-line strong { color: color-mix(in srgb, var(--accent) 88%, var(--ink)); }

/* The expected date is the one warm note on the page — same amber the
   rest of the site uses for "true, but a person confirms it". */
.v2-config-page .v2-config-lead {
    background: color-mix(in srgb, var(--warn-ink) 10%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--warn-ink) 24%, var(--paper-line));
}

/* ---- chooser (the index page) ---- */

.v2-config-page .v2-config-pick {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--paper-line));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 7%, transparent);
}

.v2-config-page .v2-config-pick-media {
    background: linear-gradient(180deg,
        var(--card),
        color-mix(in srgb, var(--accent) 7%, var(--card)));
    border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--paper-line));
}

.v2-config-page .v2-config-tier-head h2 { color: color-mix(in srgb, var(--accent) 65%, var(--ink)); }

/* ---- phone summary bar ---- */

.v2-config-page .v2-config-bar {
    border-top-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* Keyboard focus lands on the same tint as hover rather than the flat
   grey it shared with every other surface. */
.v2-config-page .v2-config-row:focus-within {
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

/* The blue row tints cost the stock green a little contrast — ok-ink on
   a selected row measures 4.12, under AA. Darkened just enough to clear
   it on every row state (5.20 selected, 5.51 hover, 5.92 banded). */
.v2-config-page .v2-config-price .is-stocked {
    color: color-mix(in srgb, var(--ok-ink) 85%, var(--ink));
}

/* ==========================================================================
   Homepage hero — rebuilt 2026-08-16

   The old hero was a headline, a paragraph, two buttons and a bordered list
   of three facts on a flat navy panel. Everything in it was true and none of
   it looked expensive: no depth, no focal point, and the numbers that carry
   the whole argument sat in a separate grey ribbon underneath, repeating.

   What this does instead:
     · one lit photograph, masked and scrimmed so it is depth behind the
       panel rather than a stock picture behind the words;
     · a display headline with the accent phrase in a light-to-accent wash;
     · the search field a buyer with a part number in hand actually wants;
     · the live catalogue numbers promoted into a glass panel beside the
       claim they evidence — which is why the .v2-stats ribbon is gone from
       the markup (its rules above are now unused, kept for a quick revert).

   Scoped to .v2-hero--home: .v2-hero itself still dresses the dashboard,
   cart and checkout headers, and those must not move.
   Tokens only, plus white — same rule as the rest of this file.
   ========================================================================== */

.v2-hero--home {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
}

/* ---- the lit room behind the panel ---- */

.v2-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.v2-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 45%;
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(90deg, transparent 8%, black 58%, black 100%);
            mask-image: linear-gradient(90deg, transparent 8%, black 58%, black 100%);
}

/* Scrim: navy across the copy, and a deeper fade at the foot so the seam
   into the light catalogue surface is a decision rather than an edge. */
.v2-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--ink) 10%,
            color-mix(in srgb, var(--ink) 74%, transparent) 48%,
            color-mix(in srgb, var(--ink) 34%, transparent) 84%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 60%, transparent),
            transparent 34%,
            color-mix(in srgb, var(--ink) 78%, transparent));
}

/* ---- composition ---- */

.v2-hero--home .v2-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: clamp(var(--space-4), 4vw, var(--space-6));
    align-items: center;
    padding: clamp(var(--space-5), 5.5vw, var(--space-6)) 0;
}

/* ---- copy column ---- */

.v2-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.v2-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    .v2-hero-dot { animation: v2-hero-pulse 2.8s ease-in-out infinite; }

    @keyframes v2-hero-pulse {
        0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
        50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 6%, transparent); }
    }
}

.v2-hero--home h1 {
    margin: 0 0 var(--space-3);
    font-size: clamp(var(--text-2xl), 4.2vw, var(--text-4xl));
    line-height: var(--leading-tight);
    letter-spacing: -0.038em;
    color: #ffffff;
}

/* The accent phrase carries a light wash rather than a flat colour. Guarded:
   text-fill-color: transparent without background-clip support would render
   the loudest words on the site invisible, so the wash only applies where the
   clip is actually supported. */
.v2-hero--home .v2-hl { color: var(--accent-text); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .v2-hero--home .v2-hl {
        background: linear-gradient(100deg, #ffffff 4%, var(--accent-text) 52%, var(--accent) 108%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.v2-hero-lede {
    margin: 0 0 var(--space-4);
    max-width: 52ch;
    font-size: clamp(var(--text-base), 1.15vw, var(--text-lg));
    color: var(--muted);
    line-height: var(--leading-body);
}

/* ---- hero search ---- */

.v2-hero-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 580px;
    margin: 0 0 var(--space-4);
    padding: 6px 6px 6px var(--space-3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-text) 24%, var(--line));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 22px 50px color-mix(in srgb, black 46%, transparent);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.v2-hero-search-icon { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }

.v2-hero-search input {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
}

.v2-hero-search input::placeholder { color: var(--muted); }
.v2-hero-search input:focus { outline: none; }

.v2-hero-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
        0 22px 50px color-mix(in srgb, black 46%, transparent);
}

.v2-hero-search button {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    color: #ffffff;
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-text)));
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 25%, transparent) inset;
    transition: filter 120ms ease, transform 120ms ease;
}

.v2-hero-search button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.v2-hero-search button:active { transform: translateY(0); }

/* ---- actions ---- */

.v2-hero--home .v2-hero-ctas { align-items: center; gap: var(--space-3); }

.v2-hero-call { color: var(--muted); font-size: var(--text-sm); }
.v2-hero-call strong { color: var(--text); font-weight: 700; }
.v2-hero-call:hover { color: var(--accent-text); }
.v2-hero-call:hover strong { color: var(--accent-text); }

/* ---- assurances ---- */

.v2-hero-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: var(--space-4) 0 0;
    list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--accent-text) 16%, var(--line));
}

.v2-hero-assurance li {
    display: flex;
    gap: 10px;
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: var(--leading-body);
}

.v2-hero-assurance svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--ok); }
.v2-hero-assurance strong { display: block; color: var(--text); font-size: var(--text-sm); margin-bottom: 1px; }

/* ---- the live-catalogue panel ---- */

.v2-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: 1px solid color-mix(in srgb, var(--accent-text) 22%, var(--line));
    background:
        linear-gradient(158deg,
            color-mix(in srgb, var(--surface) 88%, transparent),
            color-mix(in srgb, var(--ink) 86%, transparent));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-card);
}

/* A light catches the top edge. One hairline, and the panel stops looking
   like a rectangle with a border. */
.v2-hero-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--accent-text) 75%, transparent),
        transparent);
}

.v2-hero-panel > header {
    display: grid;
    gap: 3px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 14%, var(--line));
}

.v2-hero-panel-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.v2-hero-panel-note { font-size: var(--text-xs); color: var(--muted); }

.v2-hero-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.v2-hero-figures > div {
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid color-mix(in srgb, var(--accent-text) 12%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 12%, var(--line));
}

.v2-hero-figures > div:nth-child(2n) { border-right: 0; }
.v2-hero-figures > div:nth-last-child(-n+2) { border-bottom: 0; }

.v2-hero-figures dt {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.v2-hero-figures dd {
    margin: 4px 0 0;
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}

.v2-hero-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--accent-text) 14%, var(--line));
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: var(--text-xs);
    color: var(--muted);
    transition: background 140ms ease;
}

.v2-hero-panel-foot strong { display: block; color: var(--text); font-size: var(--text-sm); margin-bottom: 1px; }
.v2-hero-panel-foot:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.v2-hero-panel-go { color: var(--accent-text); font-size: var(--text-lg); }

/* ---- responsive ---- */

@media (max-width: 1100px) {
    .v2-hero--home .v2-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); }
}

@media (max-width: 980px) {
    .v2-hero--home .v2-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .v2-hero-bg img {
        object-position: 60% 40%;
        opacity: 0.26;
        -webkit-mask-image: linear-gradient(180deg, black, transparent 92%);
                mask-image: linear-gradient(180deg, black, transparent 92%);
    }
    .v2-hero-bg::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 72%, transparent),
            color-mix(in srgb, var(--ink) 88%, transparent));
    }
    .v2-hero-lede { max-width: 60ch; }
}

@media (max-width: 560px) {
    .v2-hero-assurance { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .v2-hero-search { flex-wrap: wrap; border-radius: var(--radius-card); padding: var(--space-2); }
    .v2-hero-search input { width: 100%; flex: 1 0 60%; padding-left: var(--space-1); }
    .v2-hero-search button { width: 100%; }
    .v2-hero--home .v2-hero-ctas .v2-btn { width: 100%; text-align: center; }
    .v2-hero-figures dd { font-size: var(--text-xl); }
}

/* ---- homepage: header search hands over to the hero search ---------------
   The hero has a full-size search field, so the small one in the sticky
   header is redundant while the hero is on screen — and essential the moment
   it is not, because it is then the only search on the page.

   It fades rather than collapses: .v2-search is flex:1, so taking it out of
   layout would shove the nav sideways at every crossing.

   Desktop only. Below 980px .v2-search takes a row of its own
   (flex-basis:100%), where hiding it would leave an empty band in the header
   or make the header change height mid-scroll. The crowding this fixes is a
   wide-screen problem anyway.

   Gated on .js-hero-swap, which the homepage script adds only when it can
   actually observe the hero — every failure path leaves the field visible. */

@media (min-width: 981px) {
    .v2-home.js-hero-swap .v2-search {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
            opacity 220ms ease,
            transform 220ms ease,
            visibility 0s linear 220ms;
    }

    .v2-home.js-hero-swap.hero-passed .v2-search {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity 220ms ease,
            transform 220ms ease,
            visibility 0s;
    }
}

/* ---- product photo zoom: side-panel magnifier + full-screen view --------- */

.v2-product-grid { position: relative; }
.v2-product-gallery .v2-product-main-image { position: relative; cursor: zoom-in; }
.v2-product-gallery .v2-product-main-image.is-zooming { cursor: crosshair; }

.v2-zoom-lens {
    position: absolute;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 4px;
}

.v2-zoom-pane {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background-color: var(--card);
    background-repeat: no-repeat;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

@media (max-width: 980px) {
    .v2-zoom-pane, .v2-zoom-lens { display: none !important; }
}

.v2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 12, 16, 0.92);
}

.v2-lightbox-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    display: grid;
    place-items: center;
    -webkit-overflow-scrolling: touch;
}

.v2-lightbox img {
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    cursor: zoom-in;
}

.v2-lightbox.is-zoomed .v2-lightbox-scroll { display: block; }
.v2-lightbox.is-zoomed img { max-width: none; max-height: none; height: auto; cursor: zoom-out; }

.v2-lightbox-close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
}

.v2-lightbox-hint {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    pointer-events: none;
}

html.v2-lightbox-open, html.v2-lightbox-open body { overflow: hidden; }

/* ── catalogue: facet rail + results grid ─────────────────────────────────── */
.v2-catalogue { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 20px; }
.v2-catalogue .v2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .v2-catalogue .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .v2-catalogue { grid-template-columns: 1fr; gap: 18px; }
    .v2-catalogue .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .v2-catalogue .v2-grid { grid-template-columns: minmax(0, 1fr); } }

.v2-facets {
    background: var(--card); border: 1px solid var(--paper-line); border-radius: var(--radius-card);
    padding: 18px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px;
}
@media (max-width: 860px) { .v2-facets { position: static; } }
.v2-facets-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.v2-facets-head h2 { margin: 0; font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.02em; color: var(--ink); }
.v2-facets-clear { font-size: var(--text-xs); font-weight: 700; color: var(--accent); text-decoration: none; }
.v2-facets-clear:hover { text-decoration: underline; }

.v2-facet { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--paper-line); padding-top: 15px; }
.v2-facets-head + .v2-facet { border-top: 0; padding-top: 0; }
.v2-facet h3 { margin: 0 0 1px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-ink); }
.v2-facet h3 small { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.v2-facet-select { width: 100%; padding: 8px 10px; border: 1px solid var(--paper-line); border-radius: var(--radius-control); background: var(--card); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.v2-facet-check { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--ink); cursor: pointer; line-height: 1.3; }
.v2-facet-check input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; margin: 0; }
.v2-facet-check:hover span { color: var(--accent); }
.v2-facet-any span { color: var(--muted-ink); }
.v2-facet-scroll { display: flex; flex-direction: column; gap: 9px; max-height: 262px; overflow-y: auto; padding-right: 4px; }

.v2-catalogue-main { min-width: 0; }
.v2-catalogue-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.v2-catalogue-count { font-size: var(--text-sm); color: var(--muted-ink); }
.v2-catalogue-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-catalogue-sort { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted-ink); }
.v2-catalogue-sort select { padding: 8px 10px; border: 1px solid var(--paper-line); border-radius: var(--radius-control); background: var(--card); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.v2-apply { padding: 9px 12px; border: 0; border-radius: var(--radius-control); background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* B2B-only badge (2026-10-07): header utility bar + product buy box */
.v2-trade-only {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--accent-text, var(--text)) 45%, transparent);
    border-radius: 999px;
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.v2-utility a.v2-trade-only { color: var(--text); }
.v2-trade-only--buy {
    margin: 0 0 8px;
    border-color: var(--paper-line, currentColor);
    color: var(--ink, inherit);
}

/* Checkout: verified business + trade-terms declaration (2026-10-07) */
.v2-checkout-business { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 0; }
.v2-checkout-business span { font-size: var(--text-xs); color: var(--muted-ink, inherit); }
.v2-trade-terms { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); line-height: 1.5; cursor: pointer; }
.v2-trade-terms input { margin-top: 4px; flex: 0 0 auto; width: 16px; height: 16px; }
.v2-trade-terms a { text-decoration: underline; font-weight: 600; }